HTML5 Game (4): 20 Lines of code implementation Flappybird

This series has not been updated for a long time. A few months ago, a reader joked, "Can a line of code to do a game it." Oh, the next period of time, I think about this problem every day, how can let GAMEBUILDER+CANTK further simplify the development of the game. After a few months of efforts, although still do not have a line of code to do a game, but the function of Gamebuilder has been a qualitative breakthrough. Today we use Flappybird as an example to introduce the method of developing games with Gamebuilder +CANTK, the whole game uses less than 20 lines of code.

CANTK (Canvas ToolKit) is an open source game engine and app framework, is a tool to develop HTML5 games and apps, if you like it, please add star on GitHub, your support is the driving force of our efforts: https://github.com/ Drawapp8/cantk

0. Show the final results first:

Online Operation: http://www.tangide.com/apprun.html?appid=previewgithubdrawapp8-651428115940100

Online Editor: http://www.tangide.com/gamebuilder.php?appid=previewgithubdrawapp8-651428115940100

1. Open the CANTK integrated development environment Gamebuilder and create a new project, named Flappybird.

2. Delete the ball and ground in the scene and set a background picture for the scene (Flappybird resource files can be found in the shared resource after login).

3. Put a geometric transform animation in the scene, set the corresponding picture, and then put a frame animation in the geometric transform animation, set its position and picture. Put a picture in the scene as a help, and then put a picture as the Start button. The effect is as follows:

4. Now let's make the Get Ready window, which is simple and no longer explained in detail. The effect is as follows:

5. Finally to the place where the real game begins: Create a new scene, set the background image of the scene, display the image horizontally, and set the virtual width of the scene to 5000. Put a block rigid body in the scene, put a frame animation in the rigid body, used as the bird of Flappybird, set the horizontal initial velocity of the rigid body to 3 m/s, set the bird's " Lens following properties ". Put two more static blocks to represent the upper and lower columns, and set the corresponding picture.

6. Put another block of static rigid body. This is the door between the two pillars, in order to distinguish it from the pillars: named Ui-door. Because the player cannot see the door, it is set to not be visible at run time. Because it only senses the passage of a bird and does not collide with the bird, it is set as a sensor.

(Copy&paste two pillars and doors to create a rear level.) )

7. The Score dialog box is also very simple, no longer explained in detail. The effect is as follows:

8. Now let's do the event handling:

• After clicking the button in the first window, open the second window.

• After clicking on the second window, open a third window.

-After clicking on the third window, give the bird a speed to the right. Velocity is a vector, where the velocity in the x direction is negative to the left and positive to the right. The velocity in the y direction is negative and downward is positive. The following code can be generated using the code generator.

this.getWindow().find("ui-bird").setV(3,-3);

• Bird Collision Event Handling: Hit the door score plus 1 and hit the pillar pop-up score dialog box.

var win = this. GetWindow();if (body. Element. Name. IndexOf("Ui-door") <0) {win. Stop();var score = parseint (win. getValueOf("Ui-score"));Window. Best= Math. Max(Window. Best||0, score);var InitData = {Score:score, Best:window. Best};This. Openwindow("Dialog-confirm", function (Retdata) {win. Replay();}, False, InitData);}else {win. Find("Ui-score"). AddValue(1);}

• Then look at the processing of the Score Display dialog box:

this.setValueOf("ui-score", initData.score);this.setValueOf("ui-best", initData.best);

It's done! I'm sorry I lied to you, no 20 lines of code. We only use 14 lines of code, and 10 of them can be generated with a code generator. Use Cantk+gamebuilder to do the game incredibly simple, skilled words, believe that 2 hours can be easily completed this game.

If you have any questions, please add QQ Group: 223466431

HTML5 Game (4): 20 Lines of code implementation Flappybird