cocos2d-js 系列教程之2048开发二

接上一个教程继续...

6. 定义手势动作

我们需要通过触摸滑动来操作游戏，所以就需要定义上下左右的手势动作。这就要用到引擎的触摸响应机制，Cocos2d-html5与Cocos2d-x一样，有多点触控和单点触控。默认情况下是多点触控，要使用单点触控，我们要使用addTargetedDelegate()方法设置代理。
那么如何判断上下左右呢？当然是根据起始触摸点和结束触摸点的坐标变化：

loadListener : 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。通过手势动作往一个方向进行合并。我们的思路就是根据手势方向，遍历每一行或每一列，将在这个方向上相邻（中间没有其他数字）且数字相同的卡片合并加倍。

// 向上
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. 添加分数

添加两个变量：

score:0,  // 分数  
scoreLabel:null,  // 显示分数的控件

然后初始化分数显示：

 // 显示分数
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);

卡片合并的时候要增加分数，然后更新分数显示：

 // 更新分数
 setScore:function(s){
      this.scoreLabel.setString(s);
 }

9. 判断游戏结束和胜利

每一次卡片合并操作后，我们都需要判断游戏是否胜利或者结束。利用五个条件判断游戏是否还能够继续：（1）还有空卡片（2）还可以向右滑（3）还可以向左滑（4）还可以向上滑（5）还可以向下滑。只要以上条件满足一个，游戏就可以再继续。否则，游戏不能再继续了。判断胜利则是看卡片中有没有数字达到2048。

// 判断游戏是否结束*******************************
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方法中添加代码：

setNumber: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. 结束

最后奉上最终效果

image

在线浏览地址：https://zhongdz.github.io/openSource/game_2048/startup.html
源码地址(欢迎star)：https://github.com/zhongDZ/openSource

项目总结：
在这个项目开发的过程中，不乏会遇到或这或那的小问题，但总不能让这些成为我们完成项目的理由。这个项目是用cocos2d-js 3.1开发的。
<strong> 问题一：在CC.Layer 添加事件的时候，总会发现只有在屏幕的右上角1/4部分有事件触发到。
原因：调试了一会，发现是Layer的锚点所致。
解决方法：利用框架所提供的的这个方法this.ignoreAnchorPointForPosition(false);忽略锚点。</strong>

<strong>问题二：在初始化卡片的时候每个卡片上需显示数字用到cc.LabelTTF生成文本精灵。当初始化为空的文本精灵的时候，可以成功创建，并且控制台不报错，但是当数字重新set的时候没有任何效果。
原因：框架内部容错处理导致。
解决方法：当cc.LabelTTF('', 'font-family', font-size)第一个参数为空的时候应该" "（中间有空格）。</strong>

结束语：2048这个项目暂时就到这里了.欢饮拍砖一起学习，源码稍后供上。
期待下一个教程~~~

最后编辑于：2017.12.05 13:42:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350