Jun 26, 2020 23:00:00

'Puyo Puyo Programming' that you can learn programming for free through Puyo Puyo has appeared, so I tried it

In the programming learning environment

Monaca Education , the Puyo Puyo Programming, a teaching material that allows you to learn programming using Sega's popular puzzle game ' Puyo Puyo ' has appeared. 'Puyo Puyo Programming' is said to be available free of charge, so I tried a programming beginner immediately.

[Official] Puyo Puyo eSports × Programming
http://puyo.sega.jp/program_2020/

'Puyo Puyo Programming' Support Page | Monaca Education
https://edu.monaca.io/puyo

To try Puyo Puyo Programming, you need to sign in to Monaca Education. So , first access the Monaca Education account creation page , enter your email address and password, and click 'Create new account'.

An email will be sent from Monaca Education to the email address you entered, so click 'Register here'.

Select a usage plan, enter a name, and click 'Next'. Since Monaca Education is available for free, we chose 'Free plan' as the usage plan this time.

Click 'OK' if you agree to the terms of use.

Click 'Go to dashboard'.

Click 'Agree'.

This completes the main registration of the account. Some buttons were not displayed on Firefox, so I recommend using Monaca Education on Chrome. There are buttons such as 'Create new project' and 'Import' on the screen, but I could not find Puyo Puyo programming from here at the time of article creation.

So, open the

'Puyo Puyo Programming' support page and select your favorite course from beginner, intermediate, and advanced. Since I am a real amateur this time, click 'Beginner Course'.

Click “Import”.

Then, 'Puyo Puyo Programming Beginner' will appear on My page of Monaca Education.

To actually start learning programming, click 'Puyo Puyo Programming Beginner' → 'Open with Cloud IDE' in that order.

This is the development screen opened on the cloud. The file structure is on the left of the screen, the programming source code is on the red frame in the center of the screen, and the artifacts under development are on the right. By manually entering the code in the source code in the center of the screen, the development artifact displayed on the right of the screen (illustration of Puyo Puyo) should evolve to the game screen.

You can't learn programming just by opening the development screen, so go to

the official Puyo Puyo Programming site and download 'Puyo Puyo Programming' source code set and ' (PDF) 'Puyo Puyo Programming' booklet , respectively. This booklet summarizes how to use the development screens and the learning process, so it is OK if you proceed with learning according to this. Since Puyo Puyo Programming is a teaching material that aims to help you get used to programming by copying the source code, you do not have to think about difficult things such as basic JavaScript input rules. Therefore, the students just need to accurately code the sample code, so I will try it at once.

For beginners, the steps are divided as follows, and it is recommended to try the advanced course after completing all. The amount of input is only '28 lines' for beginners, but '1015 lines' for advanced courses.

SESSION 1: 'Puyo Puyo' is falling
SESSION 2: Move 'Puyo' left and right
SESSION 3: Let's turn 'Puyo'
SESSION 4: Let's erase 'Puyo'
SESSION 5: Let's change 'Puyo'

For example, in the case of 'SESSION 1: 'Puyo Puyo' is falling', the code that needs to be entered is only 4 lines in total. The part that needs to be input is the 189th, 190th, 192nd, and 193rd lines of 'player.js'.

After inputting 4 lines of code with reference to the downloaded source code set, press 'Ctrl' + 'S' key to save the source code.

Then, Puyo Puyo appears in the area where the development artifacts are displayed on the right side of the screen. You can judge whether the code you entered is correct in this way by whether the game is functioning properly.

All you have to do is copy the code on the line that is indicated in the booklet. When 'SESSION 2: Move 'Puyo' left and right' is completed, it becomes possible to move the Puyo falling from the top of the screen to the left and right, and in 'SESSION 3: Let's rotate 'Puyo'', rotation of Puyo, 'SESSION 4 In 'Let's erase Puyo', you can erase them by arranging four identical Puyos. In 'SESSION 5: Let's change 'Puyo'', instead of copying the source code, you can change the size of the stage and the background color by changing a part of the source code written up to this point. You can learn which chords are associated with which elements of the game by changing, changing the number of Puyo colors that fall, and changing the speed at which Puyo falls.

When you actually try Puyo Puyo Programming, you can enjoy a successful experience quickly because even a beginner in programming can just 'copy the Puyo Puyo you know' by just copying the source code. I felt that was the biggest point. It is good for beginners to gain the confidence that they have completed the code, and also to hone the essential skills for programming to find small mistakes themselves through the transcription work of the code.

However, Monaca Education, which provides Puyo Puyo programming, does not seem to think that it will be able to do programming completely by itself, and at the same time recommends learning the basics of programming using the first programming etc. learned with Monaca. I will.