cocos2d-js 2048游戏开发教程二
接上一个教程继续…
6. 定义手势动作
我们需要通过触摸滑动来操作游戏，所以就需要定义上下左右的手势动作。这就要用到引擎的触摸响应机制，Cocos2d-html5与Cocos2d-x一样，有多点触控 和单点触控。默认情况下是多点触控，要使用单点触控，我们要使用addTargetedDelegate()方法设置代理。
那么如何判断上下左右呢？当然是根据起始触摸点和结束触摸点的坐标变化：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62loadListener : function(){
var listener = cc.EventListener.create({
event : cc.EventListener.TOUCH_ONE_BY_ONE,
target : this,
swallowTouches : true,
onTouchBegan : this.onTouchBegan,
onTouchMoved : this.onTouchMoved,
onTouchEnded : this.onTouchEnded
});
cc.eventManager.addListener(listener, this);
},
onTouchBegan: function (touch, event) {
var self = this.target;
var touchPoint = touch.getLocation();
self.firstX = touchPoint.x;
self.firstY = touchPoint.y;
var locationInNode = self.convertToNodeSpace(touchPoint);
var size = self.getContentSize();
var rect = cc.rect(0, 0, size.width, size.height);
if (!cc.rectContainsPoint(rect, locationInNode)) {
return false;
}
// 触摸处理
// self.onTouchDispose();
return true;
},
onTouchMoved : function (touch, event) {
var self = this.target;
var pos = touch.getLocation();
},
onTouchEnded : function (touch, event) {
var self = this.target;
var touchPoint = touch.getLocation();
var offsetX = self.firstX - touchPoint.x;
var offsetY = self.firstY - touchPoint.y;
self.onTouchDispose(offsetX, offsetY);
// console.log(Math.ceil(self.x), Math.ceil(self.y));
},
onTouchDispose : function(offsetX, offsetY){
if(Math.abs(offsetX) > Math.abs(offsetY)){
if(offsetX > 5){
this.doLeft();
this.doCheckGameOver();
this.setScore(this.score);
}else if(offsetX < -5){
this.doRight();
this.doCheckGameOver();
this.setScore(this.score);
}
}else{
if(offsetY > 5){
this.doDown();
this.doCheckGameOver();
this.setScore(this.score);
}else if(offsetY < -5){
this.doUp();
this.doCheckGameOver();
this.setScore(this.score);
}
}
}
7. 卡片合并
游戏2048主要玩法就是通过合并相同数字的卡片以达到2048。通过手势动作往一个方向进行合并。我们的思路就是根据手势方向，遍历每一行或每一列，将在这个方向上相邻（中间没有其他数字）且数字相同的卡片合并加倍。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100// 向上
doUp:function(){
var isdo = false;
for (var x=0; x<4; ++x){
for (var y=3; y>=0; --y){
for (var y1=y-1; y1>=0; --y1){
if (this.cardArr[x][y1].getNumber() > 0){
if (this.cardArr[x][y].getNumber() <= 0){
this.cardArr[x][y].setNumber(this.cardArr[x][y1].getNumber());
this.cardArr[x][y1].setNumber(0);
++y;
isdo = true;
}else if(this.cardArr[x][y].getNumber() == this.cardArr[x][y1].getNumber()){
this.cardArr[x][y].setNumber(this.cardArr[x][y].getNumber()*2);
this.cardArr[x][y1].setNumber(0);
this.score += this.cardArr[x][y].getNumber(); //增加分数
isdo = true;
}
break;
}
}
}
}
return isdo;
},
// 向下
doDown:function(){
var isdo = false;
for (var x=0; x<4; ++x){
for (var y=0; y<4; ++y){
for (var y1=y+1; y1<4; ++y1){
if (this.cardArr[x][y1].getNumber() > 0){
if (this.cardArr[x][y].getNumber() <= 0){
this.cardArr[x][y].setNumber(this.cardArr[x][y1].getNumber());
this.cardArr[x][y1].setNumber(0);
--y;
isdo = true;
}else if(this.cardArr[x][y].getNumber() == this.cardArr[x][y1].getNumber()){
this.cardArr[x][y].setNumber(this.cardArr[x][y].getNumber()*2);
this.cardArr[x][y1].setNumber(0);
this.score += this.cardArr[x][y].getNumber(); //增加分数
isdo = true;
}
break;
}
}
}
}
return isdo;
},
// 向左
doLeft:function(){
var isdo = false;
for (var y=0; y<4; ++y){
for(var x=0; x<4; ++x){
for(var x1=x+1; x1<4; ++x1){
if(this.cardArr[x1][y].getNumber() > 0){
if(this.cardArr[x][y].getNumber() <= 0){
this.cardArr[x][y].setNumber(this.cardArr[x1][y].getNumber());
this.cardArr[x1][y].setNumber(0);
--x;
isdo = true;
}else if(this.cardArr[x][y].getNumber() == this.cardArr[x1][y].getNumber()){
this.cardArr[x][y].setNumber(this.cardArr[x][y].getNumber()*2);
this.cardArr[x1][y].setNumber(0);
this.score += this.cardArr[x][y].getNumber(); //增加分数
isdo = true;
}
break;
}
}
}
}
return isdo;
},
// 向右
doRight:function(){
var isdo = false;
for (var y = 0; y < 4; ++y){
for (var x = 3; x >= 0; --x){
for (var x1 = x - 1; x1 >= 0; --x1){
if (this.cardArr[x1][y].getNumber() > 0){
if (this.cardArr[x][y].getNumber() <= 0){
this.cardArr[x][y].setNumber(this.cardArr[x1][y].getNumber());
this.cardArr[x1][y].setNumber(0);
++x;
isdo = true;
}else if(this.cardArr[x][y].getNumber() == this.cardArr[x1][y].getNumber()){
this.cardArr[x][y].setNumber(this.cardArr[x][y].getNumber()*2);
this.cardArr[x1][y].setNumber(0);
this.score += this.cardArr[x][y].getNumber(); //增加分数
isdo = true;
}
break;
}
}
}
}
return isdo;
}
8. 添加分数
添加两个变量：1
2score:0, // 分数
scoreLabel:null, // 显示分数的控件
然后初始化分数显示：1
2
3
4
5
6
7
8
9
10
11
12 // 显示分数
var label = new cc.LabelTTF("Score : ", "Arial", 32);
label.fillStyle = cc.color.RED;
label.setAnchorPoint(0,0);
label.x = 100;
label.y = size.height - 100;
this.addChild(label, 10);
this.scoreLabel = new cc.LabelTTF("0", "Arial", 32);
this.scoreLabel.setAnchorPoint(0,0);
this.scoreLabel.x = 100 + 120;
this.scoreLabel.y = size.height - 100;
this.addChild(this.scoreLabel, 10);
卡片合并的时候要增加分数，然后更新分数显示：1
2
3
4// 更新分数
setScore:function(s){
this.scoreLabel.setString(s);
}
9. 判断游戏结束和胜利
每一次卡片合并操作后，我们都需要判断游戏是否胜利或者结束。利用五个条件判断游戏是否还能够继续：（1）还有空卡片 （2）还可以向右滑 （3）还可以向左滑 （4）还可以向上滑 （5）还可以向下滑。只要以上条件满足一个，游戏就可以再继续。否则，游戏不能再继续了。判断胜利则是看卡片中有没有数字达到2048。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61// 判断游戏是否结束*******************************
doCheckGameOver:function(){
var size = cc.director.getWinSize();
var isGameOver = true;
for(var y=0; y<4; ++y){
for(var x=0; x<4; ++x){
if(this.cardArr[x][y].getNumber() == 0 ||
(x>0&&(this.cardArr[x][y].getNumber() == this.cardArr[x-1][y].getNumber())) ||
(x<3&&(this.cardArr[x][y].getNumber() == this.cardArr[x+1][y].getNumber())) ||
(y>0&&(this.cardArr[x][y].getNumber() == this.cardArr[x][y-1].getNumber())) ||
(y<3&&(this.cardArr[x][y].getNumber() == this.cardArr[x][y+1].getNumber())))
{
isGameOver = false;
}
}
}
if(isGameOver){//游戏结束
this.gameOverLayer = new cc.LayerColor(new cc.color(0,0,0,100), null, null);
var labelGameOver = new cc.LabelTTF("Game Over!!!", "Arial", 60);
labelGameOver.setPosition(size.width/2, size.height/2);
this.gameOverLayer.addChild(labelGameOver);
this.getParent().addChild(this.gameOverLayer, 1);
this.scheduleOnce(this.removeGameOverLayer, 2);
}else{
if (this.shouldCreateCardNumber()){
this.autoCreateCardNumber();
}
}
if(this.isWin()){// if win
this.gameWinLayer = new cc.LayerColor(new cc.color(0,0,0,100), null, null);
var labelGameWin = new cc.LabelTTF("You Win!!!", "Arial", 60);
labelGameWin.setPosition(size.width/2, size.height/2 + 30);
var text = new cc.LabelTTF("Your Score : ", "Arial", 30);
text.setPosition(size.width/2 - 50, size.height/2 - 30);
var labelScore = new cc.LabelTTF(this.score, "Arial", 30);
labelScore.setPosition(size.width/2 + 75, size.height/2 - 30);
this.gameWinLayer.addChild(labelGameWin);
this.gameWinLayer.addChild(text);
this.gameWinLayer.addChild(labelScore);
this.getParent().addChild(this.gameWinLayer, 1);
this.scheduleOnce(this.removeGameWinLayer, 4);
}
},
// 判断是否胜利
isWin:function(){
var Win = false;
for (var i=0; i<4; ++i){
for(var j=0; j<4; ++j){
if (this.cardArr[i][j].getNumber() == 2048){
Win = true;
break;
}
}
}
return Win;
}
10. 界面优化
在一个卡片里面，当数字变成两位数、三位数的时候，就需要调整一下数字的大小，在CardSprite的setNumber方法中添加代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58setNumber:function(num){
this.number = num;
if(this.number > 0){
this.labelCardNumber.setString(this.number);
}else{
this.labelCardNumber.setString("");
}
// 设置数字大小
if(num >= 0){
this.labelCardNumber.setFontSize(60);
}
if(num >= 16){
this.labelCardNumber.setFontSize(55);
}
if(num >= 128){
this.labelCardNumber.setFontSize(40);
}
if(num >= 1024){
this.labelCardNumber.setFontSize(30)
}
//判断数字的大小来调整颜色
if(this.number == 0){
this.cardColorBG.setColor(new cc.color(200,190,180));
}
if (this.number == 2) {
this.cardColorBG.setColor(new cc.color(240,230,220));
}
if (this.number == 4) {
this.cardColorBG.setColor(new cc.color(240,220,200));
}
if (this.number == 8) {
this.cardColorBG.setColor(new cc.color(240,180,120));
}
if (this.number == 16) {
this.cardColorBG.setColor(new cc.color(240,140,90));
}
if (this.number == 32) {
this.cardColorBG.setColor(new cc.color(240,120,90));
}
if (this.number == 64) {
this.cardColorBG.setColor(new cc.color(240,90,60));
}
if (this.number == 128) {
this.cardColorBG.setColor(new cc.color(240,90,60));
}
if (this.number == 256) {
this.cardColorBG.setColor(new cc.color(240,200,70));
}
if (this.number == 512) {
this.cardColorBG.setColor(new cc.color(240,200,70));
}
if (this.number == 1024) {
this.cardColorBG.setColor(new cc.color(0,130,0));
}
if (this.number == 2048) {
this.cardColorBG.setColor(new cc.color(0,130,0));
}
}
11. 结束
最后奉上 最终效果
在线浏览地址：https://zhongdz.github.io/openSource/game_2048/startup.html
源码地址(欢迎star)：https://github.com/zhongDZ/openSource
项目总结：
在这个项目开发的过程中，不乏会遇到或这或那的小问题，但总不能让这些成为我们完成项目的理由。这个项目是用cocos2d-js 3.1开发的。
问题一：在CC.Layer 添加事件的时候，总会发现只有在屏幕的右上角1/4部分有事件触发到。
原因：调试了一会，发现是Layer的锚点所致。
解决方法：利用框架所提供的的这个方法this.ignoreAnchorPointForPosition(false);忽略锚点。
问题二：在初始化卡片的时候每个卡片上需显示数字 用到cc.LabelTTF生成文本精灵。当初始化为空的文本精灵的时候，可以成功创建，并且控制台不报错，但是当数字重新set的时候没有任何效果。
原因：框架内部容错处理导致。
解决方法：当cc.LabelTTF(‘’, ‘font-family’, font-size)第一个参数为空的时候应该” “（中间有空格）。
结束语：2048这个项目暂时就到这里了.欢饮拍砖一起学习，源码稍后供上。
期待下一个教程~~~