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

作者: 很前端的前端 | 来源:发表于2017-02-07 10:36 被阅读0次

接上一个教程继续...

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这个项目暂时就到这里了.欢饮拍砖一起学习，源码稍后供上。
期待下一个教程~~~

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

接上一个教程继续...

6. 定义手势动作

7. 卡片合并

8. 添加分数

9. 判断游戏结束和胜利

10. 界面优化

11. 结束

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读