CocosCreator stacking box game (tutorial + source code) TS implementation mini game

CocosCreator stacking box game (tutorial + source code) TS implementation mini game

Preface

The source code is at the bottom! ! !
The look after the game is complete.

This game can only be made with a single-color sprite. If you want the game to look beautiful, you can change it yourself.

For this game, the width and height of the canvas are the best

1. Turn on physics and collision

First create a new scene, named Game
and then create a new script named Collision

onLoad(){
    
    
        let manager = cc.director.getCollisionManager();//获取碰撞引擎
        manager.enabled = true;//开启碰撞引擎
 }

Onload is written like this, the function is to open the collision engine

Then create a new script, named Physize

onLoad(){
    
    
        let manager=cc.director.getPhysicsManager();//声明变量
        manager.enabled=true;//开启物理引擎
        manager.gravity=cc.v2(0,-1000);//下落速度
 }

Onload is written like this, the function is to open the physics engine and
hang both scripts on the canvas

Two, make boxes

First create an empty node, name it BoxParent,
then create a single-color sprite under BoxParent, name it groud

, adjust the properties according to this, add RigidBody, PhysicsBoxCollider and BoxCollider components to the groud. Adjust the
properties according to the picture. The


ground is finished.
Copy and paste a copy of groud, rename it to box, change the Y coordinate to 100, and set the type of RigidBody to dynamic (the parent node of the

box is also BoxParent). The box alone is not enough, we have to add a mobile for him Animation
Create a new Clip animation file on the box node, name it move, and add the Animation component
. Press Add Property to add the X property in the property list.

There are three key frames

when X is -120 at 0:00 and X is at
0:10. At 120
0:20, X is -120.
WrapMode is selected as the loop
speed. Choose according to your preference (you can choose according to the speed I choose).
Then remember to specify the animation in the animation component and
then start writing the script. Create a new script named Box

const {
    
    ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    
    

    @property(cc.RigidBody)
    self:cc.RigidBody = null;//自身刚体

    @property(cc.PhysicsBoxCollider)
    self_box:cc.PhysicsBoxCollider = null;//自身物理碰撞

    @property(cc.BoxCollider)
    self_collision:cc.BoxCollider = null;//自身碰撞

    @property(cc.Node)
    me:cc.Node = null;//自身

    @property(cc.Animation)
    move:cc.Animation = null;//箱子移动时的动画

    isdown:boolean = false;//是否在向下降

    onLoad(){
    
    
        this.self.type = cc.RigidBodyType.Static;//开始时刚体是静止的
        this.move.play("move");//播放移动动画
    }

    update(){
    
    
        if(this.isdown == true){
    
    //如果箱子正在下降
            this.self.type = cc.RigidBodyType.Dynamic;//刚体变成动态的
        }
    }

}

Hang the Box script on the box node. The

declared components are the Box node itself. Just

bind them one by one.
Then create a folder Prefabs under the assets of the explorer to store the prefabs.
Drag the box node you just made to the resource. In the folder Prefabs under the assets of the manager

Three, write the main controller

Before writing the main controller, create a label and rename it to score to
keep score. Change the Y coordinate of the label to 300

We need a main controller to control the game.
Create a new script and name it MainController

const {
    
    ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    
    

    @property(cc.Prefab)
    box:cc.Prefab = null;//预制体 箱子

    @property(cc.Node)
    xiangji:cc.Node = null;//相机

    @property(cc.Node)
    boxParent:cc.Node = null;//箱子的父节点

    @property(cc.Node)
    box_self:cc.Node = null;//最开始的箱子自身

    @property(cc.Label)
    score_lb:cc.Label = null;//分数

    @property(cc.Node)
    lb_score:cc.Node = null;//分数

    isok:boolean = true;//是否可以生成新的箱子

    score:number = 0;//分数

    onLoad(){
    
    
        this.xiangji.on(cc.Node.EventType.TOUCH_START,this.down,this);//给相机在触摸的时候添加点击事件
        this.xiangji.width = this.node.width;//相机的宽和高和屏幕的宽和高一样
        this.xiangji.height = this.node.height;
    }

    update(dt:number){
    
    
        this.score_lb.string = "分数:" + this.score.toString();//每秒获取最新分数
        this.lb_score.y = this.xiangji.y+(this.xiangji.height/2)-this.lb_score.height-10;//介绍和分数的最佳位置
        //this.jieshao.y = this.xiangji.y-(this.xiangji.height/2)+this.jieshao.height+10;
    }

    down(){
    
    //箱子下降
        if(this.isok == true){
    
    
            let box = this.boxParent.children[this.boxParent.childrenCount-1].getComponent("Box");//获取box组件
            box.isdown = true;//箱子开始下降
            box.move.stop("move");//停止播放移动动画
            console.log("点击了相机");
            this.scheduleOnce(function() {
    
    
                this.shengcheng();
            },0.5);//为了防止箱子堆到一块，在0.5秒后生成新的箱子
            this.score += Math.floor(Math.random()*3);//随机加分数
            this.isok = false;
            this.scheduleOnce(function() {
    
    
                this.isok = true;
            },0.5);//0.5秒后才可以继续生成新箱子
        }
    }

    shengcheng(){
    
    //生成新箱子
        let node = cc.instantiate(this.box)//你要复制的节点名称
        node.parent = this.boxParent;//复制节点的父节点是什么
        node.setPosition(cc.v2(0,(this.xiangji.y+this.xiangji.height/2)-this.box_self.height-50));//复制的节点的位置

        let pos : cc.Vec2[] = [];
        pos.push(cc.v2(this.xiangji.position));
        pos.push(cc.v2(0,this.xiangji.y+this.box_self.height));

        this.xiangji.runAction(cc.sequence(//相机的移动
            cc.cardinalSplineTo(0.8,pos,0.5),
            cc.callFunc(function(){
    
    
               //执行动画时的函数
            })
        ));
       
        console.log("生成了新的箱子");
    }

}

This is the code in the script. Hang the MainController script on the canvas
and start binding the nodes. The


game scene should now look like this

Fourth, add obstacles

In the new camera (Main Camera) two monochromatic sprite
arranged such size
and the Y coordinates are changed to 0, and then one of the X-coordinate change -250, further into the X-coordinate 250

and should be done
in Add a box collision component to the two obstacles

and set the size,
and then write a script, named CollisionCallback

const {
    
    ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    
    

    onCollisionEnter(other,self){
    
    //当碰撞产生的时候调用//other 产生碰撞的另一个碰撞组件self  产生碰撞的自身的碰撞组件
        console.log('onCollisionEnter')
        if(other.node.name == "box"){
    
    //如果碰撞的节点是box游戏就结束
            this.GameOver();
        }
    }

    GameOver(){
    
    
        console.log("游戏结束了");
        cc.director.loadScene("Finish");//游戏结束场景跳转
    }

}

Then hang the CollisionCallback script on two obstacles

Five, the game is over

Create a new scene named Finish, then create a Label, write GameOver on the String of the Label, then create a
new script named Back, write an onbtn method, and then hang it on the canvas

onbtn(){
    
    
        cc.director.loadScene("Main");
    }

Then create a button in the scene and bind the onbtn function just written to the button

The game is almost complete

Cocos technical exchange Q group: 1130122408
welcome to group chat, technical exchanges are welcome

The source code is in the group

It is not easy to make, thank you for watching
Thank You~~