cocoscreator开发的出名游戏_Cocos Creator：快速开发推箱子游戏

本文首发于公众号： 一枚小工(caizj_cn)

Cocos 已获得转载授权！

作者：蒲公英，开发工程师，7 年 Cocos 引擎使用经验。

---

游戏总共分为 4 个功能模块：

• 开始游戏(menuLayer)

• 关卡选择(levelLayer)

• 游戏(gameLayer)

• 游戏结算(gameOverLayer)

Cocos Creator 内组件效果如下：

游戏开始默认显示 menuLayer，游戏中，通过控制各个层级的显示和隐藏，实现不同模块的切换。例如开始游戏，点击开始以后，触发回调函数，切换到游戏关卡选择界面，绑定关系如下图：

实现代码如下：

// 开始按钮回调startBtnCallBack(event, customEventData){
    if(this.curLayer == 1){
    return;    }this.curLayer = 1;this.playSound(sound.BUTTON);       this.menuLayer.runAction(cc.sequence(        cc.fadeOut(0.1),        cc.callFunc(() => {
    this.startBtn.stopAllActions();this.startBtn.scale = 1.0;this.menuLayer.opacity = 255;this.menuLayer.active = false;        }    )));this.levelLayer.active = true;this.levelLayer.opacity = 0;this.levelLayer.runAction(cc.sequence(        cc.delayTime(0.1),         cc.fadeIn(0.1),         cc.callFunc(() => {
    this.updateLevelInfo();        }    )));},

其他功能模块实现类似，以下将分4个模块分别讲述各个模块的实现。1. 开始游戏 menuLayer 

开始游戏模块，开始游戏后默认显示，其他模块隐藏，功能实现相对简单，界面布局完成以后，开始游戏按钮添加响应事件即可，实现代码如上，在此界面添加了一个小动画，让开始游戏按钮不断的放大缩小，代码如下：

// 主界面动画menuLayerAni(){
    this.startBtn.scale = 1.0;this.startBtn.runAction(cc.repeatForever(cc.sequence(        cc.scaleTo(0.6, 1.5),         cc.scaleTo(0.6, 1.0)    )));},

实现后的效果：

2. 关卡选择 levelLayer

关卡选择分两步：第一步，界面显示，通过配置文件，加载预制文件，显示所有关卡；第二步，根据游戏情况，更新每一关卡信息。2.1 第一步显示关卡

游戏中所有关卡置于 ScrollView 控件上，每一个关卡，使用一个预制文件(levelItem)，通过读取关卡配置文件，加载所有关卡，加载完成后重新计算 ScrollView 内容的高度，加载关卡代码如下：

// 创建关卡界面子元素createLavelItem (){
    // 进入关卡levellet callfunc = level => {            this.selectLevelCallBack(level);    };for(let i = 0; i < this.allLevelCount; i++){
    let node = cc.instantiate(this.levelItemPrefab);        node.parent = this.levelScroll;let levelItem = node.getComponent("levelItem");        levelItem.levelFunc(callfunc);this.tabLevel.push(levelItem);    }// 设置容器高度this.levelContent.height = Math.ceil(this.allLevelCount / 5) * 135 + 20;},