HTML5 Game (3): 60 line of code to achieve horizontal parkour game

Parkour game is undoubtedly one of the most popular game types, 3D parkour game may be more difficult to do a bit (this I do not understand), 2D running cool is very easy, as long as there is art resources, do a "every day cool run" this kind of popular game is not what difficult. Here through a squirrel parkour game to introduce the way to develop games with GAMEBUILDER+CANTK, the main scene of this game only use the 60来 line 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://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

Online Editor: http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586

1, create a new project, delete the scene of the ball and the ground, the phone set as a horizontal screen

Set the physical engine parameters for the scene, set the gravity in the Y direction to 50, and the ratio between pixels and meters to 50:

To set a background image for a scene:

To set the virtual width of the scene:

2, put a picture in the scene and use it to create a path.

The effect is as follows:

Create a full path by copying and pasting and using different pictures (drag the scene to see the full view of the scene).

3, the picture path placed in the front, purely for the purpose of achieving visual effects, physical effects also need to place rigid bodies to achieve.
To make a rigid body invisible at run time:

Set the physical properties of the rigid body, not elasticity and friction.

The effect is as follows:

4, put a picture text in the scene, used to indicate the score.

5, put a frame animation in the scene to represent the hazelnut.

To set its physical parameters:

Create a series of hazelnuts by copying and pasting.

6, put a frame animation in the scene, used to denote the squirrel.

Put a polygon in this frame animation so that it is not visible when it is running:

To set its physical parameters:

7, put a few static rigid bodies in the scene, to detect whether the squirrel fell down.

8, put a static rigid body in the scene, to detect whether the squirrel is home.

The work on the interface and basically OK. As a programmer, tweaking the game's interface can be a bit tedious, so think of yourself as a product manager or UI designer.

9, now let's write the program.

In the OnOpen event of the scene:

Initialize Game This.initgame = function () {for    (var i = 0; i < this.children.length; i++) {        var iter= this.children[i];        if (iter.name = = = "Ui-acorn") {            iter.setframerate (). Play ("normal", 100000);}    } Set the initial speed of the squirrel, play Jumpdown first, then play run    var squirrel = This.find ("Ui-squirrel", true);    Squirrel.nutbonus = 0;    Squirrel.setv (ten);    Squirrel.play ("Jumpdown", 1, function () {        squirrel.play ("Run", +),    }); Start the game again when the dialog box is closed. This.ondialogclose = function (retinfo) {    this.replay ();    This.initgame ();} This.initgame ();

In the Onpointerup event of the scene, give the squirrel an upward speed to play the Jumpup animation:

var squirrel = This.find ("Ui-squirrel", true); var vy = Squirrel.jumpingup? -6: -22;squirrel.setv (4, VY). Play ("Jumpup", 2, function () {Squirrel.play ("Run", 10000);});  Squirrel.jumpingup = true;

In the Onbegincontact (collision) Event of a squirrel:

var win = This.getwindow (), var element = Body.element;function Ondialogclose (retinfo) {win.ondialogclose (retinfo);}        Switch (element.name) {case "Ui-acorn": {//After the hazelnut hits, increase the score and play the Vanishing animation, then remove the hazelnut.        this.nutbonus++;        Element.play ("Dispear", 1, function () {win.removechild (element);});    Break } case "Ui-target": {//When the destination is reached, the Score dialog box is displayed.        Close the dialog box to start the game again.        var info = {LevelScore:Math.round (this.x/100) *, nutbonus:this.nutbonus*100};        Win.openwindow ("Win-success", Ondialogclose, False, info);        This.setenable (FALSE);    Break } case "ui-failed": {//After falling, display the score dialog box.        Close the dialog box to start the game again.        var info = {LevelScore:Math.round (this.x/100) *, nutbonus:this.nutbonus*100};        Win.openwindow ("win-failed", Ondialogclose, False, info);        This.setenable (FALSE);    Break        } default: {//When landing, set the speed to the right.        This.jumpingup = false;        This.setv (8);    Break }}

In the squirrel's onmoved event, the view of the scene is moved and the total score is displayed.

var win = This.getwindow (), Win.setoffset (this.x-200, this.y-200), var score = Win.find ("Ui-score"), var distance = Math. Round ((this.x/100)) * 100;var Totalscore = distance + This.nutbonus * 100;score.settext (Totalscore);

In the game there are several dialog boxes, they are very simple, do a post-copy paste generation, and then the interface to make some adjustments, in order not to let the article too long. For the use of dialogs, please describe them in a separate article.

Thank you for reading and welcome any suggestions and feedback.

Resources:

Https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

HTML5 Game (3): 60 line of code to achieve horizontal parkour game