用 CocosCreator 快速开发推箱子游戏

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

- 开始游戏（menuLayer）

- 关卡选择（levelLayer）

- 游戏（gameLayer）

- 游戏结算（gameOverLayer）

Creator内组件效果如下：

​

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

​

      实现代码如下：

 1 // 开始按钮回调
 2 startBtnCallBack(event, customEventData){
 3     if(this.curLayer == 1){
 4         return;
 5     }
 6     this.curLayer = 1;
 7 
 8     this.playSound(sound.BUTTON);       
 9 
10     this.menuLayer.runAction(cc.sequence(
11         cc.fadeOut(0.1),
12         cc.callFunc(() => {
13             this.startBtn.stopAllActions();
14             this.startBtn.scale = 1.0;
15             this.menuLayer.opacity = 255;
16             this.menuLayer.active = false;
17         }
18     )));
19 
20     this.levelLayer.active = true;
21     this.levelLayer.opacity = 0;
22     this.levelLayer.runAction(cc.sequence(
23         cc.delayTime(0.1), 
24         cc.fadeIn(0.1), 
25         cc.callFunc(() => {
26             this.updateLevelInfo();
27         }
28     )));
29 },

其他功能模块实现类似。以下将分4个模块分别讲述各个模块的实现。

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

1 // 主界面动画
2 menuLayerAni(){
3     this.startBtn.scale = 1.0;
4     this.startBtn.runAction(cc.repeatForever(cc.sequence(
5         cc.scaleTo(0.6, 1.5), 
6         cc.scaleTo(0.6, 1.0)
7     )));
8 },

 

实现后的效果：

​

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

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

 1 // 创建关卡界面子元素
 2 createLavelItem (){
 3     // 进入关卡level
 4     let callfunc = level => {            
 5         this.selectLevelCallBack(level);
 6     };
 7 
 8     for(let i = 0; i < this.allLevelCount; i++){
 9         let node = cc.instantiate(this.levelItemPrefab);
10         node.parent = this.levelScroll;
11         let levelItem = node.getComponent("levelItem");
12         levelItem.levelFunc(callfunc);
13         this.tabLevel.push(levelItem);
14     }
15     // 设置容器高度
16     this.levelContent.height = Math.ceil(this.allLevelCount / 5) * 135 + 20;
17 },

 

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

​

预制脚本挂在到预制上：

​

2.2 第二步更新关卡
       每一个levelItem预制上挂一个levelItem脚本组件，levelItem脚本组件负责更新信息，主要控制是否可点击、通关星数、关卡等级、点击进入，levelItem脚本组件更新UI代码如下：

 1 /**
 2  * @description: 显示星星数量
 3  * @param {boolean} isOpen 是否开启
 4  * @param {starCount} 星星数量
 5  * @param {cc.SpriteAtlas} levelImgAtlas 纹理图
 6  * @param {number} level 关卡
 7  * @return: 
 8  */
 9 showStar(isOpen, starCount, levelImgAtlas, level){
10     this.itemBg.attr({"_level_" : level});
11     if(isOpen){
12         this.itemBg.getComponent(cc.Sprite).spriteFrame = levelImgAtlas.getSpriteFrame("pass_bg");
13         this.starImg.active = true;
14         this.starImg.getComponent(cc.Sprite).spriteFrame = levelImgAtlas.getSpriteFrame("point" + starCount);
15         this.levelTxt.opacity = 255;
16         this.itemBg.getComponent(cc.Button).interactable = true;
17     }
18     else{
19         this.itemBg.getComponent(cc.Sprite).spriteFrame = levelImgAtlas.getSpriteFrame("lock");
20         this.starImg.active = false;
21         this.levelTxt.opacity = 125;
22         this.itemBg.getComponent(cc.Button).interactable = false;
23     }
24     this.levelTxt.getComponent(cc.Label).string = level;
25 },

 

玩家的通过的信息，通过配置存储文件，保存玩家通关信息，分为已通关、刚开启和未开启三种状态，具体实现如下：

 1 // 刷新关卡上的信息
 2 updateLevelInfo(){
 3     let finishLevel = parseInt(cc.sys.localStorage.getItem("finishLevel") || 0);  //已完成关卡
 4     for(let i = 1; i <= this.allLevelCount; i++){
 5         // 完成的关卡
 6         if(i <= finishLevel){
 7             let data = parseInt(cc.sys.localStorage.getItem("levelStar" + i) || 0);
 8             this.tabLevel[i - 1].showStar(true, data, this.levelImgAtlas, i);
 9         }
10         // 新开的关卡
11         else if(i == (finishLevel + 1)){
12             this.tabLevel[i - 1].showStar(true, 0, this.levelImgAtlas, i);
13         }
14         // 未开启关卡图
15         else{  
16             this.tabLevel[i - 1].showStar(false, 0, this.levelImgAtlas, i);
17         }
18     }
19 },

 

最终的显示效果如下图：

​

3. 游戏 gameLayer
       游戏也分为两步：第一步，显示界面；第二步，游戏操作判断

3.1 显示界面
       游戏内使用levelConfig.json配置每一关卡信息，每个关卡游戏部分由多行多列的方格组成，每一个关卡信息包含content、allRow、allCol、heroRow、heroCol、allBox属性，allRow和allCol记录总共行数和列数，heroRow、heroCol记录英雄所在位置，allBox记录箱子的总数，content是核心，记录每个方格的属性，根据不同的属性显示不同的物体，如墙面、地面、物体、箱子，可以通过修改配置，增加任意关卡。

读取关卡所有数据，并根据每一个位置的属性，显示不同的实物。

根据配置创建关卡信息

 1 // 创建关卡
 2 createLevelLayer(level){
 3     this.gameControlLayer.removeAllChildren();
 4     this.setLevel();
 5     this.setCurNum();
 6     this.setBestNum();
 7 
 8     let levelContent = this.allLevelConfig[level].content;
 9     this.allRow = this.allLevelConfig[level].allRow;
10     this.allCol = this.allLevelConfig[level].allCol;
11     this.heroRow = this.allLevelConfig[level].heroRow;
12     this.heroCol = this.allLevelConfig[level].heroCol;
13 
14     // 计算方块大小
15     this.boxW = this.allWidth / this.allCol;
16     this.boxH = this.boxW;
17 
18     // 计算起始坐标
19     let sPosX = -(this.allWidth / 2) + (this.boxW / 2);
20     let sPosY = (this.allWidth / 2) - (this.boxW / 2);
21 
22     // 计算坐标的偏移量，运算规则（宽铺满，设置高的坐标）
23     let offset = 0;
24     if(this.allRow > this.allCol){
25         offset = ((this.allRow - this.allCol) * this.boxH) / 2;
26     }
27     else{
28         offset = ((this.allRow - this.allCol) * this.boxH) / 2;
29     }
30     this.landArrays = [];   //地图容器
31     this.palace = [];       //初始化地图数据
32     for(let i = 0; i < this.allRow; i++){
33         this.landArrays[i] = [];  
34         this.palace[i] = [];
35     }
36 
37     for(let i = 0; i < this.allRow; i++){    //每行
38         for(let j = 0; j < this.allCol; j++){     //每列
39             let x = sPosX + (this.boxW * j);
40             let y = sPosY - (this.boxH * i) + offset;
41             let node = this.createBoxItem(i, j, levelContent[i * this.allCol + j], cc.v2(x, y));
42             this.landArrays[i][j] = node;
43             node.width = this.boxW;
44             node.height = this.boxH;
45         }
46     }
47 
48     // 显示人物
49     this.setLandFrame(this.heroRow, this.heroCol, boxType.HERO);
50 },

 

根据类型创建元素：

 1 // 创建元素
 2 createBoxItem(row, col, type, pos){
 3     let node = new cc.Node();
 4     let sprite = node.addComponent(cc.Sprite);
 5     let button = node.addComponent(cc.Button);
 6     sprite.spriteFrame = this.itemImgAtlas.getSpriteFrame("p" + type);
 7     node.parent = this.gameControlLayer;
 8     node.position = pos;
 9     if(type == boxType.WALL){  //墙面，//墙面，命名为wall_row_col
10         node.name = "wall_" + row + "_" + col;
11         node.attr({"_type_" : type});
12     }
13     else if(type == boxType.NONE){  //空白区域,//墙面，命名为none_row_col
14         node.name = "none_" + row + "_" + col;
15         node.attr({"_type_" : type});
16     }
17     else{  //游戏界面，命名为land_row_col
18         node.name = "land_" + row + "_" + col;
19         node.attr({"_type_" : type});
20         node.attr({"_row_" : row});
21         node.attr({"_col_" : col});
22         button.interactable = true;
23         button.target = node;
24         button.node.on('click', this.clickCallBack, this);
25         if(type == boxType.ENDBOX){  //在目标点上的箱子，直接将完成的箱子数加1
26             this.finishBoxCount += 1;
27         }
28     }
29     this.palace[row][col] = type;
30 
31     return node;
32 },

 

游戏的所有元素，放置在下图中gameControlLayer的上：

​

游戏开始后，显示的效果如下（第一关，其他关类似）

​

3.2 游戏操作判断

       路线计算好后，玩家移动，若玩家点击的是箱子区域，先检测箱子前方是否有障碍物，若没有则推动箱子，通过切换地图的图片和修改位置类型达到推动箱子的效果。

点击地图位置，获取最优路径，人物跑到指定点，实现如下：

 1 // 点击地图元素
 2 clickCallBack : function(event, customEventData){
 3     let target = event.target;
 4     //最小路径长度
 5     this.minPath = this.allCol * this.allRow + 1;
 6     //最优路线
 7     this.bestMap = [];
 8 
 9     //终点位置
10     this.end = {};
11     this.end.row  = target._row_;
12     this.end.col = target._col_;
13 
14     //起点位置
15     this.start = {};
16     this.start.row = this.heroRow;
17     this.start.col = this.heroCol;
18 
19     //判断终点类型
20     let endType = this.palace[this.end.row][this.end.col];
21     if((endType == boxType.LAND) || (endType == boxType.BODY)){  //是空地或目标点，直接计算运动轨迹
22         this.getPath(this.start, 0, []);
23 
24         if(this.minPath <= this.allCol * this.allRow){
25             cc.log("从起点[", this.start.row, ",", this.start.col, "]到终点[", 
26             this.end.row, ",", this.end.col, "]最短路径长为：", this.minPath, "最短路径为：");
27 
28             cc.log("[", this.start.row, ",", this.start.col, "]");
29             for(let i = 0; i< this.bestMap.length;i++){
30                 cc.log("=>[",this.bestMap[i].row,",",this.bestMap[i].col,"]");
31             }
32             this.bestMap.unshift(this.start);
33             this.runHero();
34         }else{
35             console.log("找不到路径到达");
36         }
37     }
38     else if((endType == boxType.BOX) || (endType == boxType.ENDBOX)){ //是箱子，判断是否可以推动箱子
39         //计算箱子和人物的距离
40         let lr = this.end.row - this.start.row;
41         let lc = this.end.col - this.start.col;
42         if((Math.abs(lr) + Math.abs(lc)) == 1){  //箱子在人物的上下左右方位
43             //计算推动方位是否有障碍物
44             let nextr = this.end.row + lr;
45             let nextc = this.end.col + lc;
46             let t = this.palace[nextr][nextc];
47             if(t && (t != boxType.WALL) && (t != boxType.BOX) && (t != boxType.ENDBOX)){  //前方不是障碍物，也不是墙壁，推动箱子
48                 this.playSound(sound.PUSHBOX);
49                 //人物位置还原
50                 this.setLandFrame(this.start.row, this.start.col, this.palace[this.start.row][this.start.col]);
51 
52                 //箱子位置类型
53                 let bt = this.palace[this.end.row][this.end.col];
54                 if(bt == boxType.ENDBOX){      //有目标物体的箱子类型，还原成目标点
55                     this.palace[this.end.row][this.end.col] = boxType.BODY;
56                     this.finishBoxCount -= 1;
57                 }
58                 else{
59                     this.palace[this.end.row][this.end.col] = boxType.LAND;
60                 }
61                 //箱子位置变成人物图，但类型保存为空地或目标点
62                 this.setLandFrame(this.end.row, this.end.col, boxType.HERO);
63 
64                 //箱子前面位置变成箱子
65                 let nt = this.palace[nextr][nextc];
66                 if(nt == boxType.BODY){  //有目标点，将箱子类型设置成有目标箱子
67                     this.palace[nextr][nextc] = boxType.ENDBOX;
68                     this.finishBoxCount += 1;
69                 }
70                 else {
71                     this.palace[nextr][nextc] = boxType.BOX;
72                 }
73                 this.setLandFrame(nextr, nextc, this.palace[nextr][nextc]);
74 
75                 this.curStepNum += 1;
76                 //刷新步数
77                 this.setCurNum();
78                 
79                 //刷新人物位置
80                 this.heroRow = this.end.row;
81                 this.heroCol = this.end.col;
82 
83                 this.checkGameOver();
84             }
85             else{
86                 this.playSound(sound.WRONG);
87                 console.log("前方有障碍物");
88             }
89         }
90         else{   //目标点错误
91             this.playSound(sound.WRONG);
92             console.log("目标点错误");
93         }
94     }
95 },

 

获取最优路径算法：

 1 //curPos记录当前坐标，step记录步数
 2 getPath : function(curPos, step, result){
 3     //判断是否到达终点
 4     if((curPos.row == this.end.row) && (curPos.col == this.end.col)){
 5         if(step < this.minPath){
 6             this.bestMap = [];
 7             for(let i = 0; i < result.length; i++){
 8                 this.bestMap.push(result[i]);
 9             }
10             this.minPath = step; //如果当前抵达步数比最小值小，则修改最小值
11             result = [];
12         }
13     }
14 
15     //递归
16     for(let i = (curPos.row - 1); i <= (curPos.row + 1); i++){
17         for(let j = (curPos.col - 1); j <= (curPos.col + 1); j++){
18             //越界跳过
19             if((i < 0) || (i >= this.allRow) || (j < 0) || (j >= this.allCol)){
20                 continue;
21             }
22             if((i != curPos.row) && (j != curPos.col)){//忽略斜角
23                 continue;
24             }
25             else if(this.palace[i][j] && ((this.palace[i][j] == boxType.LAND) || (this.palace[i][j] == boxType.BODY))){
26                 let tmp = this.palace[i][j];
27                 this.palace[i][j] = boxType.WALL;  //标记为不可走
28 
29                 //保存路线
30                 let r = {};
31                 r.row = i;
32                 r.col = j;
33                 result.push(r);
34 
35                 this.getPath(r, step + 1, result);
36                 this.palace[i][j] = tmp;  //尝试结束，取消标记
37                 result.pop();
38             }
39         }
40     }
41 },

 

4. 游戏结算 gameOverLayer
       游戏结束后，根据成功推到箱子数，判断游戏是否成功，游戏成功以后，更新关卡信息即可。

判断逻辑如下：

 1 // 游戏结束检测
 2 checkGameOver(){
 3     let count = this.allLevelConfig[this.curLevel].allBox;
 4     // 全部推到了指定位置
 5     if(this.finishBoxCount == count){   
 6         this.gameOverLayer.active = true;
 7         this.gameOverLayer.opacity = 1; 
 8         this.gameOverLayer.runAction(cc.sequence(
 9             cc.delayTime(0.5), 
10             cc.fadeIn(0.1)
11         ));
12 
13         // 刷新完成的关卡数
14         let finishLevel = parseInt(cc.sys.localStorage.getItem("finishLevel") || 0);
15         if(this.curLevel > finishLevel){
16             cc.sys.localStorage.setItem("finishLevel", this.curLevel);
17         }
18 
19         // 刷新星星等级
20         cc.sys.localStorage.setItem("levelStar" + this.curLevel, 3);
21 
22         // 刷新最优步数
23         let best = parseInt(cc.sys.localStorage.getItem("levelBest" + this.curLevel) || 0);
24         if((this.curStepNum < best) || (best == 0)){
25             cc.sys.localStorage.setItem("levelBest" + this.curLevel, this.curStepNum);
26         }
27         this.playSound(sound.GAMEWIN);
28         this.clearGameData();
29     }
30 },

Creator组件布局如下：

​

本游戏免费提供游戏源码，需要源码请关注公众号『一枚小工』获取

​

​