Cocos Creator implements left and right jump games

This article first appeared in: a small worker (caizj_cn)

Cocos is authorized to reprint, thanks to the author for his creation

1

How to play

After the game starts, tap the left and right sides of the screen, the robot jumps a step towards the upper left or upper right. If there is a stone in the next step, 1 point is successful, otherwise the game ends.

2

Module introduction

Game scenes are divided into two: homepage scene (home), game scene (game).

The home scene (home) serves as the entrance to the game, without other functions, and simply provides the entrance to the game.

The game scene (game) realizes game play and game logic control. The interface is as follows:

The main functions of the game are all in the game scene. The main function structure of the game scene is as follows:

3

Development instructions

Here we mainly introduce the logic of the game scene, according to the above functional structure to introduce, first look at all the courseware UI components in the game scene:

The following sub-module introduction:

1

Stone Logic (Box)

The script is mounted on the prefabricated stone to realize the logic related to the stone. There are two main ones:

1. The stone moves down

According to the current screen position of the robot, after the robot jumps, whether it succeeds or fails, let the stone move down and out of the screen, the corresponding code is as follows:

[code]

 down(y: number) this.node.runAction(cc.sequence( cc.moveBy(0.4, 0, y), cc.callFunc( () => NodeMgr.putBox(this.node); ) )) ;

 [/code]

2. Record data

 *[code]

 private mPrevBox: cc.Node = null; // previous stone private mNextBox: cc.Node = null; // next stone private mOffset: number = 0; // left and right offset [-4,4]

 [/code]

The upper and lower stones are mainly used by the robot to let the machine know where the next jump is located, and the offset records the position of the stones in the horizontal direction of the screen, from left to right, the value is [-4, 4] Integer.

2

Node management logic (NodeMgr)

When the stones in the game are at most, they only cover 3 screen heights. After they are exceeded, the screen will move to the bottom and the stones will be redrawn. This cycle is repeated to achieve the goal of continuous play. So the stones are repeated The removal and addition of the battery, the use of battery, can make the game have a better performance.

(1) Get the stone node

Determine whether there are already in the battery, if there is one, go to the ready-made one, if not, return empty, let the game logic generate a new node by itself, the code is as follows:

          *[code]

 public static putBox(box: cc.Node) if(this.mBoxNodePool == null) this.mBoxNodePool = new cc.NodePool('boxs');

 if(box != null) this.mBoxNodePool.put(box);

 [/code]

(2) Recycling stone nodes

When removing a node, directly put the node into the node pool and provide it for use next time you need it. The code is as follows:

          *[code]

 public static getBox() if(this.mBoxNodePool != null && this.mBoxNodePool.size()> 0) let box = this.mBoxNodePool.get(); box.stopAllActions(); return box; else return null; 

 [/code]

3

Game logic (Game)

The Game script component is mounted on the root node of the game scene, and the stone management script component is the same, as shown below:

There are 3 main functions:

(1) Click event logic

Judging by the x coordinate of the clicked position, jump to the left on the left side of the screen, and jump to the right on the right side of the screen. Before you can jump, you need to judge whether the robot is jumping now, you need to pay attention to the code as follows:

                         *[code]

 onTouchCallback(event: any){ if(!this.mIsPlaying) return;

 if(this.nodeRobot.getComponent('Robot').isJumping()) return;

 this.bgDown();

 this.mIsPlaying = true; let location = event.getLocation(); if(location.x {}) ));}

 [/code]

(3) Control stone redrawing

Combine the game background control logic to determine whether all the stones need to be redrawn.

4

Stone management logic (BoxMgr)

Mounted on the root node of the game scene, it mainly completes the following 3 functions:

(1) Generate new stones

Corresponding to the reloadNew function in the code, there is too much code, so no code will be posted. If necessary, download the project code to see.

(2) Load all stones

First judge whether there is any reserved on the previous screen. If so, draw the previous screen first, and then draw the new one. The new one can be displayed on the third screen and needs to be kept for drawing the next time the screen is cut.

(3) Clean up rocks

Clean up all the stones and keep them in NodeMgr, the code is as follows:

                   *[code]

 clearAll(){ if(this.mMemBoxs != null){ for(let i = 0; i