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