Cocos2d-JS实现的2048
一、前言
2048是之前火过一段时间的休闲数字消除类游戏，它的玩法很简单，上手很容易，可是想到要得到高分却很难，看似简单的游戏却有着很多得分的技巧，想当初这个游戏也曾是陪伴我大学课堂的游戏之一。虽然在得分上有着很多的技巧，但对于开发来说，这其实是一件相当容易的事情，仔细分析之后就可能大概理清楚这种消除游戏的逻辑。
二、游戏分析
这款游戏仔细想想就差不多清楚它的大致的思路，游戏中只有方块这一个我们操作的对象，这个对象包含了所在行，所在列，以及方块显示的数字三个属性，这三个属性足以表达游戏中的所有效果。除了方块，其他的就是游戏中必不可少的背景图层，开始及结束场景等。由于游戏中需要将4x4的方块们整齐排列，因此还需要一个四行四列的表格，来呈现我们的游戏效果。
三、滑动逻辑
游戏中最主要的操作就是通过手指触摸屏幕进行滑屏操作，带动场景中的方块整体移动，并且遇到相同数字的方块进行合并。滑动的逻辑就是遍历场景中所有的方块，每一个方块在滑动方向进行移动，如果前方没有方块，方块就一直滑动，如果前方有方块，判断自己的数字与这个方块的数字是否相同，相同进行合并操作，不相同则停在当前位置。
四、游戏实现
在对游戏逻辑进行了分析之后，就可以用代码进行实现了，编码，其实就是一个将游戏逻辑转换为机器语言的过程而已。
1.方块类
首先，我们需要一个类来存储方块的长度和宽度，代码如下：
// 保存方块长度方块
var tile = {
width: 0,
height: 0
};
方块类是对场景中可操的方块的封装，包括所在行，所在列，显示数字三个属性，代码如下：
var Tiled = cc.Node.extend({
num: 0,
col: 0,
row: 0,
ctor: function (num) {
this._super();
return true;
}
}
当然仅仅有以上三个属性是不够的，我们还需要在方块的构造函数中绘制方块的背景、绘制方块显示的数字、以及随机设定方块的行列坐标。
var Tiled = cc.Node.extend({
num: 0,
col: 0,
row: 0,
ctor: function (num) {
this._super();
this.num = num;
var count = 0;
while (true) {
count++;
this.row = Math.floor(Math.random() * 4);
this.col = Math.floor(Math.random() * 4);
if (tiles[this.row][this.col] == null) {
tiles[this.row][this.col] = this;
break;
}
if (count >= 16) {// 格子满了
return true;
}
}
// 绘制背景
var bg = new cc.DrawNode();
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(255, 209, 145, 255), 1, cc.color(255, 209, 145, 255));
this.addChild(bg);
bg.setTag(2);
// 绘制数字
var labelNum = new cc.LabelTTF();
labelNum.setString("" + this.num);
labelNum.setFontSize(60);
// 字体描边效果
// labelNum.enableStroke(cc.color.BLACK, 0);
this.addChild(labelNum);
labelNum.setTag(1);
// 设定字体和坐标
labelNum.setPosition(tile.width / 2, tile.height / 2);
// 移动块
this.newTile(this.row, this.col);
return true;
}
}
除此之外，每个方块应该还要包含一个newTile方法、moveTo方法和updateNum方法，分别封装随机创建方块、移动方块和更新方块数字三个功能。
在updateNum方法中，我们主要做两件事，更新方块显示数字和更新方块背景颜色（在方块的背景色上，我还专门上网搜了几种颜色搭配，恩，感觉很有艺术美，哈哈），代码如下：
updateNum: function () {
this.getChildByTag(1).setString("" + this.num);
var bg = this.getChildByTag(2);
switch (this.num) {
case 2:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(235, 245, 223, 255), 1, cc.color(235, 245, 223, 255));
break;
case 4:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(186, 212, 170, 255), 1, cc.color(186, 212, 170, 255));
break;
case 8:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(212, 212, 170, 255), 1, cc.color(212, 212, 170, 255));
break;
case 16:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(193, 160, 117, 255), 1, cc.color(193, 160, 117, 255));
break;
case 32:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(124, 99, 84, 255), 1, cc.color(124, 99, 84, 255));
break;
case 64:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(218, 227, 224, 255), 1, cc.color(218, 227, 224, 255));
break;
case 128:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(64, 125, 148, 255), 1, cc.color(64, 125, 148, 255));
break;
case 256:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(123, 118, 135, 255), 1, cc.color(123, 118, 135, 255));
break;
case 512:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(172, 173, 172, 255), 1, cc.color(172, 173, 172, 255));
break;
case 1024:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(204, 196, 194, 255), 1, cc.color(204, 196, 194, 255));
break;
case 2048:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(199, 225, 240, 255), 1, cc.color(199, 225, 240, 255));
break;
case 4096:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(150, 196, 230, 255), 1, cc.color(150, 196, 230, 255));
break;
case 8192:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(25, 77, 91, 255), 1, cc.color(25, 77, 91, 255));
break;
case 16384:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(229, 96, 205, 255), 1, cc.color(229, 96, 205, 255));
break;
case 32768:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(250, 174, 78, 255), 1, cc.color(250, 174, 78, 255));
break;
case 65536:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(255, 241, 222, 255), 1, cc.color(255, 241, 222, 255));
break;
default:
bg.drawRect(cc.p(5, 5), cc.p(tile.width - 5, tile.height - 5), cc.color(255, 209, 145, 255), 1, cc.color(255, 209, 145, 255));
break;
}
}
方块的移动方法和创建方法，我在这里先写成一样，因为还没有对方块的创建和移动做区别，如果要做优化，可以在移动时加入移动的动画，在创建加入创建的动画，代码如下：
moveTo: function (row, col) {
this.row = row;
this.col = col;
this.setPositionX((cc.winSize.width - tile.width * 4) / 2 + tile.width * this.col);
this.setPositionY((cc.winSize.height - tile.height * 4) / 2 + tile.height * this.row);
},
newTile: function (row, col) {
this.row = row;
this.col = col;
this.setPositionX((cc.winSize.width - tile.width * 4) / 2 + tile.width * this.col);
this.setPositionY((cc.winSize.height - tile.height * 4) / 2 + tile.height * this.row);
}
2.游戏场景类
所有的游戏操作及操作反馈都在游戏场景类中进行，游戏场景类将封装好的方块类放到游戏逻辑中，通过玩家操作给予一定的操作反馈。游戏场景类中主要接受玩家的滑动操作，并在接收到滑动操作后将所有的方块类进行移动或合并。
游戏场景类中需要isMove，startX，startY，以及tiles四个属性：第一个是控制玩家触摸操作的标识变量，避免重复调用移动方法；中间两个为记录玩家手指滑动的距离，当距离查过一定的长度之后，才判断玩家进行了滑动操作；最后一个变量是一个数组，用于存储在4x4的表格中的方块的信息。
有了以上四个属性之后，就可以在构造函数中进行初始化了，代码如下：
var tiles = null;// 存储方块信息
var GameLayer = cc.Layer.extend({
isMove: false,
startX: 0,
startY: 0,
ctor: function () {
this._super();
this.isMove = false;
this.startX = 0;
this.startY = 0;
//设置块的宽高
if (cc.winSize.width < cc.winSize.height) {
// 竖屏
tile.width = cc.winSize.width / 5;
tile.height = cc.winSize.width / 5;
} else {
// 横屏
tile.width = cc.winSize.height / 5;
tile.height = cc.winSize.height / 5;
}
// 初始化数组
tiles = [
[null, null, null, null],
[null, null, null, null],
[null, null, null, null],
[null, null, null, null]
];
return true;
}
}
在初始化完之后，我们就可以在场景的onEnter方法中绘制场景了，绘制的内容包括游戏背景以及随机初始化两个方块，代码如下：
onEnter: function () {
this._super();
// 绘制背景
this.drawBg();
// 绘制块
var tile1 = new Tiled(2);
var tile2 = new Tiled(2);
this.addChild(tile1);
this.addChild(tile2);
//处理事件
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: this.touchbegan,
onTouchMoved: this.touchmoved
}, this);
return true;
}
其中drawBg方法中，绘制了五条垂直直线以及五条水平直线，来作为方块所在的4x4的表格，代码如下：
drawBg: function () {
//绘制背景
var bgRect = new cc.DrawNode();
bgRect.drawRect(cc.p(0, 0), cc.p(cc.winSize.width, cc.winSize.height), cc.color(173, 140, 61, 255), 1, cc.color(173, 140, 61, 255));
this.addChild(bgRect);
var bg = new cc.DrawNode();
for (var n = 0; n < 5; n++) {
bg.drawSegment(cc.p((cc.winSize.width - tile.width * 4) / 2, (cc.winSize.height - tile.height * 4) / 2 + n * tile.width), cc.p(cc.winSize.width / 2 + tile.width * 2, (cc.winSize.height - tile.height * 4) / 2 + n * tile.width), 5,
cc.color(55, 62, 64, 255));
bg.drawSegment(cc.p((cc.winSize.width - tile.width * 4) / 2 + n * tile.width, (cc.winSize.height - tile.height * 4) / 2), cc.p((cc.winSize.width - tile.width * 4) / 2 + n * tile.width, (cc.winSize.height - tile.height * 4) / 2 + tile.width * 4), 5,
cc.color(55, 62, 64, 255));
}
this.addChild(bg);
}
可以看到，在onEnter中，注册了触摸事件，这个触摸事件就用于接受玩家的操作，在TouchBegan事件中记录触摸开始时的点，在TouchMoved中记录当前移动到的点，当触摸距离超过一定长度时，判定玩家进行了滑动操作，并通过触摸点来判断玩家滑动的举例，代码如下：
touchbegan: function (touch, event) {
this.isMove = true;
this.startX = touch.getLocationX();
this.startY = touch.getLocationY();
return true;
},
touchmoved: function (touch, event) {
if (!this.isMove) {
return;
}
var endX = touch.getLocation().x;
var endY = touch.getLocation().y;
if (Math.abs(endX - this.startX) > 20 ||
Math.abs(endY - this.startY) > 20) {
var dir = "";
if (Math.abs(endX - this.startX) > Math.abs(endY - this.startY)) {//左右
if (endX > this.startX) {
dir = "right";
} else {
dir = "left";
}
} else {
//上下
if (endY > this.startY) {
dir = "up";
} else {
dir = "down";
}
}
this.isMove = false;
event.getCurrentTarget().moveAllTiled(dir);
}
return true;
},
moveAllTiled: function (dir) {
var isMoved = false;
switch (dir) {
case "up":
isMoved = this.moveUp();
break;
case "down":
isMoved = this.moveDown();
break;
case "left":
isMoved = this.moveLeft();
break;
case "right":
isMoved = this.moveRight();
break;
}
if (isMoved) {
//每次移动产生一个新块
this.newTiled();
}
}
触动滑动操作后，开始执行滑动逻辑，每次滑动之后，会随机创建一个新的方块，在newTiled方法中，除了创建新方块之外，还需要判断游戏是否结束，代码如下：
newTiled: function () {
var tile = new Tiled(2);
this.addChild(tile);
// 判断游戏是否结束
var isOver = true;
// 判断是否有空余位置
for (var row = 0; row < 4; row++) {
for (var col = 0; col < 4; col++) {
if (tiles[row][col] == null) {
isOver = false;
}
}
}
if (isOver) {
// 判断四周是否有数字相同方块
for (var row = 0; row < 4; row++) {
for (var col = 0; col < 4; col++) {
if (row < 3 && tiles[row + 1][col].num == tiles[row][col].num) {
isOver = false;
}
if (row > 0 && tiles[row - 1][col].num == tiles[row][col].num) {
isOver = false;
}
if (col < 3 && tiles[row][col + 1].num == tiles[row][col].num) {
isOver = false;
}
if (col > 0 && tiles[row][col - 1].num == tiles[row][col].num) {
isOver = false;
}
}
}
}
if (isOver) {
cc.director.runScene(new cc.TransitionFade(1, new OverScene()));
}
}
方块的滑动，就是2048这款游戏最主要的逻辑了，我们在滑动的时候，需要遍历tiles数组所有不是null的元素，并将这个元素按照滑动方向进行移动，一直遍历到数组的最大长度，也就是将滑动到表格的边缘，如果中途遇到了方块，并且数字与自己相同，就进行合并，合并是将自己删除，将遇到的方块数字乘以2，如果中途遇到的方块的数字与自己不同，此方块的滑动就停止，使其停在当前的位置，滑动分为上下左右四个逻辑，代码分别如下：
moveUp: function () {
var isMoved = false;
for (var col = 0; col < 4; col++) {
for (var row = 3; row >= 0; row--) {
if (tiles[row][col] != null) {// 有方块
for (var row1 = row; row1 < 3; row1++) {
if (tiles[row1 + 1][col] == null)//如果没有向上移动
{
tiles[row1 + 1][col] = tiles[row1][col];
tiles[row1][col] = null;
tiles[row1 + 1][col].moveTo(row1 + 1, col);
isMoved = true;
} else if (tiles[row1 + 1][col].num == tiles[row1][col].num) {// 合并
tiles[row1 + 1][col].num = parseInt(tiles[row1][col].num) * 2;
tiles[row1 + 1][col].updateNum();
tiles[row1][col].removeFromParent();
tiles[row1][col] = null;
isMoved = true;
break;
}
}
}
}
}
return isMoved;
},
moveDown: function () {
var isMoved = false;
for (var col = 0; col < 4; col++) {
for (var row = 0; row < 4; row++) {
if (tiles[row][col] != null) {// 有方块
for (var row1 = row; row1 > 0; row1--) {
if (tiles[row1 - 1][col] == null)//如果没有向下移动
{
tiles[row1 - 1][col] = tiles[row1][col];
tiles[row1][col] = null;
tiles[row1 - 1][col].moveTo(row1 - 1, col);
isMoved = true;
} else if (tiles[row1 - 1][col].num == tiles[row1][col].num) {// 合并
tiles[row1 - 1][col].num = parseInt(tiles[row1][col].num) * 2;
tiles[row1 - 1][col].updateNum();
tiles[row1][col].removeFromParent();
tiles[row1][col] = null;
isMoved = true;
break;
}
}
}
}
}
return isMoved;
},
moveLeft: function () {
var isMoved = false;
for (var row = 0; row < 4; row++) {
for (var col = 0; col < 4; col++) {
if (tiles[row][col] != null) {
for (var col1 = col; col1 > 0; col1--) {
if (tiles[row][col1 - 1] == null) {
tiles[row][col1 - 1] = tiles[row][col1];
tiles[row][col1] = null;
tiles[row][col1 - 1].moveTo(row, col1 - 1);
isMoved = true;
} else if (tiles[row][col1 - 1].num == tiles[row][col1].num) {// 合并
tiles[row][col1 - 1].num = parseInt(tiles[row][col1].num) * 2;
tiles[row][col1 - 1].updateNum();
tiles[row][col1].removeFromParent();
tiles[row][col1] = null;
isMoved = true;
break;
}
}
}
}
}
return isMoved;
},
moveRight: function () {
var isMoved = false;
for (var row = 0; row < 4; row++) {
for (var col = 3; col >= 0; col--) {
if (tiles[row][col] != null) {
for (var col1 = col; col1 < 3; col1++) {
if (tiles[row][col1 + 1] == null) {
tiles[row][col1 + 1] = tiles[row][col1];
tiles[row][col1] = null;
tiles[row][col1 + 1].moveTo(row, col1 + 1);
isMoved = true;
} else if (tiles[row][col1 + 1].num == tiles[row][col1].num) {// 合并
tiles[row][col1 + 1].num = parseInt(tiles[row][col1].num) * 2;
tiles[row][col1 + 1].updateNum();
tiles[row][col1].removeFromParent();
tiles[row][col1] = null;
isMoved = true;
break;
}
}
}
}
}
return isMoved;
}
至此，我们就基本实现了2048游戏的主要逻辑。
3.开始/结束场景类
为了游戏框架的完整，我们还是创建一个开始场景类和结束场景类，代码分别如下：
开始场景类
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
/////////////////////////////
// 2. add a menu item with "X" image, which is clicked to quit the program
// you may modify it.
// ask the window size
var size = cc.winSize;
/////////////////////////////
// 3. add your codes below...
// add a label shows "Hello World"
// create and initialize a label
var helloLabel = new cc.LabelTTF("2048", "Arial", 38);
// position the label on the center of the screen
helloLabel.x = size.width / 2;
helloLabel.y = size.height / 2 + 200;
// add the label as a child to this layer
this.addChild(helloLabel, 5);
// add "HelloWorld" splash screen"
// this.sprite = new cc.Sprite(res.HelloWorld_png);
// this.sprite.attr({
// x: size.width / 2,
// y: size.height / 2
// });
// this.addChild(this.sprite, 0);
var start = new cc.MenuItemFont("开始游戏",function(){
cc.director.runScene(new cc.TransitionFade(1,new GameScene()));
});
var menu = new cc.Menu(start);
this.addChild(menu);
return true;
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});
结束场景类
/**
* Created by Henry on 16/6/19.
*/
var OverLayer = cc.Layer.extend({
ctor: function () {
this._super();
var overText = new cc.LabelTTF("Game Over", "", 50);
overText.setPosition(cc.winSize.width / 2, cc.winSize.height / 2);
var back = new cc.MenuItemFont("再来一次", function () {
cc.director.runScene(new cc.TransitionFade(1, new HelloWorldScene()));
}, this);
var menu = new cc.Menu(back);
this.addChild(menu);
return true;
}
});
var OverScene = cc.Scene.extend({
ctor: function () {
this._super();
var layer = new OverLayer();
this.addChild(layer);
return true;
}
});
五、运行效果
最后的运行效果如下
通过CVP平台的项目托管可看到实际运行效果，地址如下：
http://www.cocoscvp.com/usercode/ea72822aeed0546b537b4226954a11be87a7f152/
六、源代码
所有源代码均上传到github，欢迎交流学习，地址：
https://github.com/hjcenry/2048
