一、介绍

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、最终游戏截图

结语

采用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

最新文章

  1. 学习笔记：delphi之TStringGrid
  2. 【原创】Linux常用管理命令总结
  3. csv大文件分割以及添加表头
  4. 【转】CSS（10）盒子模型
  5. 简单的linux命令笔记
  6. lunux下查看文件文件夹大小的命令
  7. 在阿里云的CentOS环境中安装django
  8. Android 性能测试之方向与框架篇
  9. 设计模式六大原则（PHP）
  10. PhpStorm常用的一些快捷键
  11. 清明培训 清北学堂 DAY1
  12. 「BZOJ1251」序列终结者 （splay 区间操作)
  13. 通过全备+relaylog同步恢复被drop的库或表【转】
  14. abc高级bash shell编程
  15. LOJ 2249: 洛谷 P2305: 「NOI2014」购票
  16. ETL面试题
  17. Python: Flask框架简单介绍
  18. onmouseenter和onmouseleave的兼容性问题
  19. clear(), evict(), flush()三种方法的用法实例
  20. 【转】web应用缓慢故障分析

热门文章

  1. JavaScript开发心得--如何传递某行数据给下一页
  2. strong，weak, retain， assign的区别@property的参数
  3. Angular——路由参数
  4. Vue渲染原理
  5. JavaScript 实现页面中录音功能
  6. LeetCode_18 4Sum
  7. zip相关知识梳理(一)
  8. [Algorithm] 9. Two Sum
  9. [USACO] 打井 Watering Hole
  10. UVA - 247 Calling Circles（Floyd求传递闭包）