【cocos2d-js 3.0】制作2048
2048：在一个4X4的方阵中，玩家需要滑动上面的数字，如果俩个数字相邻并且相等，则相加，需要达到2048，方可胜利。
因为在浏览器操作，所以此例的操作方法为：键盘上的w,s,a,d代表上下左右，也可用小键盘左边的上下左右键。
下面给一张游戏截图，也可以点击这里进行试玩:)
IDE:webstorm
好，现在开始讲解我的制作过程。
首先，新建一个项目，名字叫mini2048。我是用终端cocos new Project出来的，所以要删除一些不必要的代码，并且添加一些游戏相关的资源。
因为这个游戏主要是用做demo并且分享制作过程，所以美术啥的也没好好搞，就一个标题的2048字体用了外部的fnt资源。大家粗略看看就行～
添加游戏背景
/*一个灰色的背景和白色的线组成的方格*/ var background = new cc.LayerColor(cc.color(180,170,160,255),size.width,size.height); //灰色背景 this.addChild(background,0); var draw = cc.DrawNode.create(); this.addChild(draw, 1); for(var index=0; index<5; index++){ draw.drawSegment(cc.p(40+index*60, 20), cc.p(40+index*60, 260), 1, cc.color(255, 255, 255, 255)); //竖线 draw.drawSegment(cc.p(40, 20+index*60), cc.p(280, 20+index*60), 1, cc.color(255, 255, 255, 255)); //横线 }
再继续添加一些界面元素，标题，得分，重新游戏什么的
//标题 var title = cc.LabelBMFont.create("2 0 4 8", res.LabelFont_Fnt); title.x = size.width/2; title.y = size.height-40; this.addChild(title,1); //得分 var scoreLabelText = cc.LabelTTF.create("score","Scissor Cuts",20); scoreLabelText.x = 60; scoreLabelText.y = size.height*4/5; scoreLabelText.setColor(cc.color(0,0,0,255)); this.addChild(scoreLabelText,1); this.scoreLabel = cc.LabelTTF.create("0","Scissor Cuts",20); this.scoreLabel.x = 60; this.scoreLabel.y = size.height*4/5-25; this.scoreLabel.setColor(cc.color(0,0,0)); this.addChild(this.scoreLabel,1); //重新游戏 cc.MenuItemFont.setFontName("Arial"); var restartItem = cc.MenuItemFont.create("restart", this.restartGame, this); restartItem.setColor(cc.color(22,100,255)); restartItem.x = size.width - 60; restartItem.y = size.height*4/5-12.5; var restartMenu = cc.Menu.create(restartItem); restartMenu.x = 0; restartMenu.y = 0; this.addChild(restartMenu,1); //结束label var gameOverLabel = cc.LabelTTF.create(" 游戏结束！ ","Scissor Cuts",50); gameOverLabel.setColor(cc.color(255,0,255)); gameOverLabel.x = size.width/2; gameOverLabel.y = size.height/2+60; gameOverLabel.visible = false; this.addChild(gameOverLabel,11,5); //通关label var passTheGameLabel = cc.LabelTTF.create(" 恭喜通关！","Scissor Cuts",50); passTheGameLabel.setColor(cc.color(255,255,0)); passTheGameLabel.x = size.width/2; passTheGameLabel.y = size.height/2+60; passTheGameLabel.visible = false; this.addChild(passTheGameLabel,11,6);
随后添加键盘事件来相应w,s,a,d和小键盘旁上下左右键的操作。
if (cc.sys.capabilities.hasOwnProperty('keyboard')) cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyReleased:function (key, event) { if(key==[cc.KEY.w] || key==[cc.KEY.up] ){ event.getCurrentTarget().slideUp(); //向上滑 } else if(key==[cc.KEY.a] || key==[cc.KEY.left] ){ event.getCurrentTarget().slideLeft(); //向左滑 } else if(key==[cc.KEY.d] || key==[cc.KEY.right] ){ event.getCurrentTarget().slideRight(); //向右滑 } else if(key==[cc.KEY.s] || key==[cc.KEY.down] ){ event.getCurrentTarget().slideDown(); //向下滑 } } }, this);
然后制作Card类，继承cc.Sprite，用来做游戏中的卡片。我这里的逻辑是这样的，游戏开始前，初始化4X4的16张卡片，并且每张卡片在对应的位置，并且卡片数字都设置为0，
当游戏运作的时候，不移动卡片，只改变对应卡片上的数字，并且对改变后的数字进行判断，如果是0，则隐藏数字，如果是>0的值，则显示数字并根据值来对数字进行美化。
this.backgroundPic = new cc.LayerColor(cc.color(0, 0, 255, 111), 50, 50); //卡片底色 this.labelText = cc.LabelTTF.create("0", "Trebuchet MS", 21); //卡片数字 this.backgroundPic.ignoreAnchorPointForPosition(false); this.addChild(this.backgroundPic, 0); this.addChild(this.labelText,1);
并且给Card类添加一些方法，如设置卡片数字，获取卡片数字的值，对卡片数字大小和卡片背景进行美化等等，因为这些比较简单，所以就不贴码了，尽量避免此博文显得过于冗长。
下面介绍下2048的算法，我觉得也是这部游戏唯一的难点～
因为游戏是上下左右进行滑动，所以只要知道一个方向上是如何运作的，那么也就可以举一反三了，譬如向左滑动这个操作，再对其进行剖析，
我们会发现算法对4排上的数字都是进行同样的操作，所以我们只研究一行数字的算法就可以了。其他的只要循环3次就行。
/*因为算法比较简单，所以我就用注释解释下*/ for(var y=0; y<4; y++){ for(var x=0; x<4; x++){ for(var xRight=x+1; xRight<4; xRight++){ if(game2048array[xRight][y].getCardNumber() != 0){ //game2048array是存放16张卡片的数组，y代表某一行，如果对应卡片右边的卡片数值为0，则对下一个右边的卡片进行循环判断 if(game2048array[x][y].getCardNumber() == 0){ //如果对应卡片右边的值不为0，并且对应卡片的值为0，则将对应卡片的值改为其右边卡片的值 game2048array[x][y].setCardNumber(game2048array[xRight][y].getCardNumber()); game2048array[xRight][y].setCardNumber(0); //然后设置其右边卡片的值为0 this.zeroCardIndex.removeZeroCard(x,y); //this.zeroCardIndex是一个存放值为0的卡片的数组，后面会用到 this.zeroCardIndex.push({coordX:xRight,coordY:y}); x--; } else if(game2048array[x][y].getCardNumber() == game2048array[xRight][y].getCardNumber()){ game2048array[x][y].setCardNumber(game2048array[x][y].getCardNumber()*2); //如果对应卡片右边的值不为0，并且对应卡片的值和其右边卡片的值相等，则对应卡片的值位置为原来的两倍 game2048array[xRight][y].setCardNumber(0); //同样设置其右边卡片的值为0 if(game2048array[x][y].getCardNumber()==2048){ //进行判断，如果对应卡片的值达到2048，则游戏通关 this.gameStop = true; this.passGameLabelAppear(); //通关 } else{ this.zeroCardIndex.push({coordX:xRight,coordY:y}); } } break; //如果对应卡片其右边的卡片值非0，并且对应卡片的值和其右边卡片的值不相等，那么跳出此轮循环，继续判断下一个卡片 } } } }
OK，2048的核心算法已经充分展示，接着，每滑动一次就需要添加一张值为2或者4的卡片。我是这么做的，把游戏中非0卡片的位置都记录到一个数组this.zeroCardIndex中，然后每一次滑动后在此数组中随机取一个元素，
并且在元素上对应的位置信息上添加2或者4的数字。看代码
addOneCard:function(){ var cardIndex = parseInt(Math.random()*this.zeroCardIndex.length); //随机获取一张值为0的卡片 var card = game2048array[this.zeroCardIndex[cardIndex].coordX][this.zeroCardIndex[cardIndex].coordY]; //获取对应位置信息上的卡片 card.setCardNumber(Math.random()<0.2?4:2); //给卡片设置数字 20%的几率会随机到4的卡片 this.zeroCardIndex.splice(cardIndex, 1); //从数组中删除此张卡片 },
最后，对游戏“死亡”进行判定，首先对卡片0的数组的长度（this.zeroCardIndex.lenght）进行判断，如果为0，则判断横向或者竖向的数字，俩俩是不是都不相同，如果是，则表示游戏结束。
isGameOver:function(){ for(var x=0;x<4;x++){ for(var y=0;y<4;y++){ if(x<3 && (game2048array[x][y].getCardNumber()==game2048array[x+1][y].getCardNumber())){ //横向俩俩判断 return false; } if(y<3 && (game2048array[x][y].getCardNumber()==game2048array[x][y+1].getCardNumber())){ //竖向俩俩判断 return false; } } } return true; }
OK！至此，2048的基本游戏逻辑都介绍完毕，剩下的譬如分数累加什么的简单逻辑就不罗列了，第一次写博客教程，大家多多包涵，有不合适的地方尽管吐槽砸墙！
希望每一个游戏人都能实现自己的游戏梦！:)
