CocosCreator叠箱子游戏（教程 + 源码）TS实现小游戏

CocosCreator叠箱子游戏（教程 + 源码）TS实现小游戏

前言

源码在最下面！！！
游戏完成后的样子

做这个游戏只用单色的精灵就可以，如果想让游戏看起来美观还可以自己换

对于这个游戏来说canvas的宽和高这样设置最佳

1、开启物理和碰撞

首先先新建场景，取名为Game
然后新建脚本取名为Collision

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

onload这么写，作用是打开碰撞引擎

然后再新建一个脚本，取名为Physize

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

onload这么写，作用是打开物理引擎
把两个脚本都挂到canvas上面

二、做箱子

首先先创建一个空节点，取名为BoxParent
然后在BoxParent下面新建一个单色精灵，取名为groud

把属性按照这个调好，给groud添加RigidBody、PhysicsBoxCollider和BoxCollider组件
属性按照图片调好


地面就算做完了
把groud复制粘贴一份，改名为box，把Y坐标改成100，并且把RigidBody的类型设置成动态（box的父节点也是BoxParent）

box光有这些是不够的，我们得给他添加一个移动的动画
在box节点上新建Clip动画文件，取名为move，并且添加Animation组件
在属性列表里面按Add Property添加X属性

分三个关键帧

0:00的时候X是-120
0:10的时候X是120
0:20的时候X是-120
WrapMode选为loop
速度根据自己喜欢选（可以按照我选的速度选）
然后记得在动画组件里面指定动画
接下来就开始写脚本了，新建一个脚本取名为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;//刚体变成动态的
        }
    }

}

把Box脚本挂到box节点上

声明的这些组件都是Box节点本身

一个一个绑定就好了
然后在资源管理器的assets下面创建文件夹Prefabs来存放预制体
把刚刚做好的box节点拖到资源管理器的assets下面的文件夹Prefabs里

三、写主控制器

在写主控制器之前先创建一个Lable，改名为score，用来记分数
把Lable的Y坐标改成300

我们需要一个主控制器来对游戏进行控制
新建一个脚本，取名为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("生成了新的箱子");
    }

}

这是脚本里的代码，把MainController脚本挂到canvas上面
然后开始绑定节点


游戏场景现在应该是这样的

四、添加障碍物

在相机（Main Camera）下新建两个单色精灵
这样设置大小
然后把Y坐标都改成0，然后把其中一个X坐标改成-250，另一个把X坐标改成250

然后应该是这样的
在两个障碍物上添加盒子碰撞组件

并且设置好大小
然后再来写一个脚本，取名为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");//游戏结束场景跳转
    }

}

然后把CollisionCallback脚本挂到两个障碍物上面

五、游戏结束

新建一个场景取名为Finish，然后创建一个Lable，在Lable的String上面写GameOver
再新建一个脚本取名为Back，写一个onbtn方法，然后挂到canvas上面

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

然后在场景里新建一个按钮，把刚刚写的onbtn函数绑定到按钮上

游戏大体基本就完成了

Cocos技术交流Q群：1130122408
欢迎进群闲聊、技术交流都欢迎

源码在群里

制作不易，感谢你的观看
Thank You~~