CocosCreator下JavaScript 快速开发推箱子游戏，附代码

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

- 开始游戏（menuLayer）

- 关卡选择（levelLayer）

- 游戏（gameLayer）

- 游戏结算（gameOverLayer）

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 (){
    // 进入关卡level
    let 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;
},

下图即是所有关卡预制的父节点：

预制脚本挂在到预制上：

<