Cocos2d-html5入门之2048游戏

一、介绍

Cocos2d-JS是Cocos2d-x的Javascript版本，它的前身是Cocos2d-html5。在3.0版本以前叫做Cocos2d-html5，从3.0版本开始叫做Cocos2d-JS。我们知道Cocos2d-x支持使用C++、Lua、Javascript来进行程序开发，其所内置的是一个Javascript引擎，通过用C++解析Javascript去执行；而Cocos2d-html5是使用Javascript进行开发，最终运行在浏览器里的。那么在v3.0的时候，Cocos2d-html5和Cocos2d-x JSBinding被合到了一起，称作Cocos2d-JS。

和Cocos2d-html5不同的是，Cocos2d-JS开发的程序不仅可以运行在浏览器里，还可以编译运行在Mac OSX, Windows, iOS, Android的原生平台上，真正做到“一次开发，全平台运行”。Cocos2d-JS支持Cocos2d-x的所有特性并提供更简单易用的Javascript风格API，它还自带了Cocos Console，一个用于简化项目创建和不同目标平台编译发布流程的终端工具。

二、Cocos2d-html5目录结构

为了快速入门，所以决定开发一个最近比较热门的2048小游戏。当然，首先需要去Cocos2d-x官网下载Cocos2d-html5-v2.2.3引擎，下载后解压就行了。Cocos2d-html5的目录结构如下：

• cocos2d：游戏引擎的主要文件
• extensions：包含一些扩展的功能，且支持自定义扩展
• external：包含box2d和chipmunk这两个物理引擎
• HelloHTML5World：一个最简单的HelloWorld项目
• samples：官网例子和几款小游戏
• template：项目模板

我们可以通过拷贝 HelloHTML5World 或 template中的项目模板，然后基于它编写自己的代码程序。

这里使用WebStorm作为IDE进行游戏开发，WebStorm有非常强大的智能补全功能，提高了开发效率。还能与 Google Chrome 浏览器配合，完成实时编辑和调试。只需要下载WebStorm然后载入引擎目录稍微配置一下就可以了，不知道怎么做的可以看看快速搭建 Cocos2d-HTML5 开发调试环境这篇博文。

三、2048游戏开发

1、创建项目

Cocos2d-html5中创建项目很简单，只需要拷贝HelloHTML5World项目（当然你也可以复制template下的文件夹），然后重命名就行了。

• res：资源文件夹（图片、音频等）
• src：js脚本存放目录(我们自己的项目源码目录)
• index.html：主页面
• build.xml：文件的引用，包括引擎库文件和自己写的文件
• cocos2d.js：定义了程序运行需要的一些参数，如 是否显示FPS，是否加载扩展库等
• main.js：定义程序的入口，初始化导演类等等。

我们需要在src文件夹里编写我们自己的代码，首先我们删除myApp.js中的所有代码，开始写我们自己的2048游戏。

2、创建游戏场景

由于2048游戏很简单，它只需要一个场景，下面我们来创建一个场景：

// 层var Helloworld = cc.Layer.extend({    init:function () {        this._super();        return true;    }});// 场景var HelloWorldScene = cc.Scene.extend({    onEnter:function () {        this._super();        var layer = new Helloworld();        layer.init();        this.addChild(layer);    }});

很简单吧！我们只需要创建一个Layer类，然后将它的一个实例加入Scene中，程序运行时main.js会创建一个Scene的实例作为程序入口。

3、创建卡片类

我们把2048游戏中的每一个方格看作一个卡片，上面的数字是它的属性。也就是说我们需要4x4=16个卡片类的对象。新建一个CardSprite.js文件：

var CardSprite = cc.Layer.extend({    // 全局变量    number:0,    labelCardNumber:null,    cardColorBG:null,    // 构造函数    ctor:function()    {        this._super();    },    // 初始化卡牌    initCard:function(num, width, height, positionX, positionY)    {        this.number = num;        // 背景层，也就是一个小正方形        this.cardColorBG = cc.LayerColor.create(new cc.Color4B(200, 190, 180, 255), width-15, height-15);        this.cardColorBG.setPosition(positionX, positionY);        // 添加数字，大于0显示，否则不显示        if(this.number > 0)        {            this.labelCardNumber = cc.LabelTTF.create(this.number,"Arial", 60);            this.labelCardNumber.setPosition(this.cardColorBG.getContentSize().width/2, this.cardColorBG.getContentSize().height/2);            this.labelCardNumber.setTag(8);            this.cardColorBG.addChild(this.labelCardNumber);        }        else        {            this.labelCardNumber = cc.LabelTTF.create("","Arial", 60);            this.labelCardNumber.setPosition(this.cardColorBG.getContentSize().width/2, this.cardColorBG.getContentSize().height/2);            this.labelCardNumber.setTag(8);            this.cardColorBG.addChild(this.labelCardNumber);        }        this.addChild(this.cardColorBG);    },    // 获取数字    getNumber:function()    {        return this.number;    },    // 重置卡片数字    setNumber:function(num)    {        this.number = num;        if(this.number > 0)        {            this.labelCardNumber.setString(this.number);        }        else        {            this.labelCardNumber.setString("");        }    }});// 静态函数CardSprite.createCardSprite = function(num, width, height, positionX, positionY){    var card = new CardSprite();    if(card)    {        card.initCard(num, width, height, positionX, positionY);        return card;    }    return null;}

这里将CardSprite类继承自Layer，然后初始化卡片背景和上面的数字，还定义了number的set/get方法。这里需要注意几点：

• 新建.js文件以后需要在build.xml和cocos2d.js相关位置添加文件路径。
• 继承都需要有 this._super();，一般写在构造函数ctor:function()中。
• 注意静态函数的写法，类名.函数名 = function(){}。

4、初始化界面

下面我们来初始化游戏界面，主要是在Layer的init()函数中初始化，我们使用一个4x4的二维组来放置在主界面创建16个卡片：

var Helloworld = cc.Layer.extend({    cardArr:null,  // 存放4x4=16个卡片    // 初始化    init:function () {        this._super();        var size = cc.Director.getInstance().getWinSize();        // 主界面背景层->设置颜色        var lazyLayer = cc.LayerColor.create(new cc.Color4B(180, 170, 160, 255) , null, null);        this.addChild(lazyLayer);        // 创建卡片数组        this.cardArr = new Array(4);        for(var i=0; i<4; i++) {            this.cardArr[i] = new Array(4);        }        // 初始化所有卡片，数字为0，不显示        this.createCards(size);        // 开始的时候，随机生成两个数字        this.autoCreateCardNumber();        this.autoCreateCardNumber();        return true;    },    // 初始化卡片数组*******************************    createCards:function(size)    {        var unitSize = (size.height - 80)/4;        for(var i=0; i<4; i++) {            for(var j=0; j<4; j++) {                var card = CardSprite.createCardSprite(0, unitSize, unitSize, unitSize*i + 210, unitSize*j + 30);                this.cardArr[i][j] = card;                this.addChild(card);            }        }    },    // 随机生成新的2或4的卡片****************    autoCreateCardNumber:function()    {        while(1) {            var i = Math.floor(Math.random()*4);  // 随机生成0～3            var j = Math.floor(Math.random()*4);            if (this.cardArr[i][j].getNumber() == 0) {                   // 4与2生成的概率比为1:9                this.cardArr[i][j].setNumber(Math.floor(Math.random()*10) < 1 ? 4 : 2);                break;            }            if (!this.shouldCreateCardNumber()) {                break;            }        }    },    // 判断是否还有空位******************    shouldCreateCardNumber:function()    {        var should = false;        for(var i=0; i<4; ++i) {            for(var j=0; j<4; ++j) {                if (this.cardArr[i][j].getNumber() == 0) {                    should = true;                    break;                }            }        }        return should;    }});

通过调用this.createCards(size);初始化所有16个卡片，由于0不显示，所以卡片上都没有数字。然后调用this.autoCreateCardNumber();在随机的两个卡片上生成数字，在随机生成的时候我们应该先判断还有没有空位，否则有可能会陷入死循环。
初始化的界面如下图：

5、定义手势动作

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

var Helloworld = cc.Layer.extend({    firstX:null,    firstY:null,    cardArr:null,    init:function () {        this._super();        // 设置单点触摸        cc.Director.getInstance().getTouchDispatcher()._addTargetedDelegate(this, 0, true);        ...        // 打开触摸        this.setTouchEnabled(true);        return true;    },    // onTouchBegan函数，需要返回true    onTouchBegan:function (touch, event) {        var touchPoint = touch.getLocation();        this.firstX = touchPoint.x;        this.firstY = touchPoint.y;        return true;    },    // onTouchEnded函数    onTouchEnded:function (touch, event) {        var touchPoint = touch.getLocation();        var offsetX = this.firstX - touchPoint.x;        var offsetY = this.firstY - touchPoint.y;        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);            }        }    },    // ...other methods});

6、卡片合并

游戏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;}

7、添加分数

添加两个变量：

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

然后初始化分数显示：

// 显示分数var label = cc.LabelTTF.create("Score : ", "Arial", 20);label.setAnchorPoint(0,0);label.setPosition(size.width/2 - 50, size.height-50);this.addChild(label);this.scoreLabel = cc.LabelTTF.create("0", "Arial", 20);this.scoreLabel.setAnchorPoint(0,0);this.scoreLabel.setPosition(size.width/2 + 20, size.height-50);this.addChild(this.scoreLabel);

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

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

8、判断游戏结束和胜利

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

// 判断游戏是否结束*******************************doCheckGameOver:function(){var size = cc.Director.getInstance().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)  {     // if the game is over    console.log("The Game Is Over!");    cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1, new HelloWorldScene()));}else {    if (this.shouldCreateCardNumber()) {this.autoCreateCardNumber();    }}if(this.isWin())  {     // if win    cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1, new HelloWorldScene()));}}// 判断是否胜利**********************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;}

9、界面优化

在一个卡片里面，当数字变成两位数、三位数的时候，就需要调整一下数字的大小，在CardSprite的setNumber方法中添加代码：

// 设置数字大小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)}

我们还需要给不同的数字设置不同的卡片颜色，同样在setNumber方法中添加代码：

//判断数字的大小来调整颜色if(this.number == 0){    this.cardColorBG.setColor(new cc.Color3B(200,190,180));}if (this.number == 2) {    this.cardColorBG.setColor(new cc.Color3B(240,230,220));}if (this.number == 4) {    this.cardColorBG.setColor(new cc.Color3B(240,220,200));}if (this.number == 8) {    this.cardColorBG.setColor(new cc.Color3B(240,180,120));}if (this.number == 16) {    this.cardColorBG.setColor(new cc.Color3B(240,140,90));}if (this.number == 32) {    this.cardColorBG.setColor(new cc.Color3B(240,120,90));}if (this.number == 64) {    this.cardColorBG.setColor(new cc.Color3B(240,90,60));}if (this.number == 128) {    this.cardColorBG.setColor(new cc.Color3B(240,90,60));}if (this.number == 256) {    this.cardColorBG.setColor(new cc.Color3B(240,200,70));}if (this.number == 512) {    this.cardColorBG.setColor(new cc.Color3B(240,200,70));}if (this.number == 1024) {    this.cardColorBG.setColor(new cc.Color3B(0,130,0));}if (this.number == 2048) {    this.cardColorBG.setColor(new cc.Color3B(0,130,0));}

10、最终游戏截图

结语

• 源码下载：http://download.csdn.net/detail/lisong694767315/7585745
  

• 在线试玩：http://2048m.sinaapp.com （新浪云）

采用Cocos2D-HTML5引擎进行游戏开发，开发效率更高，加上丰富的工具集支持、实时的各种调试手段和云合作开发手段，更加直接的效果调校方式，完全没有开发环境依赖，各种优势的叠加，可以大幅度降低开发成本，提升游戏的上架速度。

如果觉得这样还不够，我们可以使用Cocos2d-JS-v3.0，同一份JavaScript游戏代码不用修改或者小范围修改，配合Cocos2D-X JavaScript-Binding就能以Hybrid的方式直接作为本地应用发布，也可以编译到Android、iOS等移动平台。

通过Cocos2D-HTML5或Cocos2d-JS，开发者能以一个更快、更惬意的方式实现自己的想法。

---

参考：http://blog.csdn.net/column/details/love2048.html