HTML5 game practice (4): 20 lines of code to implement FlappyBird and html5flappybird

HTML5 game practice (4): 20 lines of code to implement FlappyBird and html5flappybird

This series has not been updated for a long time. A few months ago, a reader joked that he could make a game with a line of code. Well, for the next period of time, I have been thinking about this problem every day. How can we further simplify game development by using GameBuilder + CanTK. After several months of hard work, although it is still impossible to make a game with a line of code, the function of GameBuilder has already achieved a qualitative breakthrough. Today, we use FlappyBird as an example to describe how to develop a game using GameBuilder + CanTK. Less than 20 lines of code are used for the entire game.

CanTK (Canvas ToolKit) is an open-source game engine and APP framework. It is a powerful tool for developing HTML5 games and apps. If you like it, add stars to it on github, your support is our motivation: https://github.com/drawapp8/cantk

0. First Show the final result:

Online run: http://www.tangide.com/apprun.html? Appid = previewgithubdrawapp8-651428115940100

Online Editing: http://www.tangide.com/gamebuilder.php? Appid = previewgithubdrawapp8-651428115940100

1. Open the integrated development environment GameBuilder of CanTK and create a new project named FlappyBird.

2. Delete the ball and ground in the scene, and set a background image for the scene (after loginShared resourcesTo find the FlappyBird resource file ).

3. Place a ry transform animation in the scene, set the corresponding image, and then place a frame animation in the ry transform animation to set its position and image. Put an image for help in the scenario, and then put an image as the start button. The effect is as follows:

4. Now let's do the Get Ready window. This is very simple and will not be explained in detail. The effect is as follows:

5. Finally, it's time for the real game to start: Create a new scene, set the background image of the scene, set the image display mode to horizontal tile, and set the virtual width of the scene to 5000. Place a square Rigid Body in the scene, place a frame animation in the rigid body, use FlappyBird, set the horizontal initial speed of the Rigid Body to 3 meters/second, set the bird's"Lens follow attributes". Put two static blocks to indicate the upper and lower columns and set the corresponding image.

6. Place another static rigid block. This is the door between the two pillars, to distinguish it from the pillar: named ui-door. This is because the player cannot see this door and sets it to invisible during running. Because it only senses the passing of a bird, instead of colliding with the bird, it is set as a sensor.

(Copy & paste two pillars and doors to generate the following levels .)

7. The score dialog box is also very simple and will not be explained in detail. The effect is as follows:

8. Now let's handle the event:

• Click the button in the first window to open the second window.

• Click in the second window to open the third window.

-After clicking in the third window, give the bird a speed to the right. The speed is a vector. Here, the speed in the X direction is negative to the left and positive to the right. The speed in the Y direction is negative, and the downward direction is positive. The following code can be generated by a code generator.

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

• Collision event handling: Hit the door score plus 1, hit the column to pop up the 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);}

• Let's take a look at the processing of the score display dialog box:

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

Done! Sorry, you have no 20 lines of code. We only use 14 lines of code, and 10 lines can be generated by the code generator. It's incredibly easy to use CanTK + GameBuilder to play games. If you are skilled, you can easily complete the game within two hours.

If you have any questions, add the QQ group: 223466431