cocos2d-js 2048游戏开发教程一
序
(这是本人第一次教程写作之旅,没有什么乱七八糟的套路,就是为了将自己的技术写出来,让大家一同来学习,得以提高自己的水平。由于水平有限,如在过程中发现错误的或者有更好的方法不吝贵读者的评论。2017 撸起袖子干!联系方式:qq: 785861210. )
一、介绍
cocos2d-JS是cocos2d-x (官网 :http://cocos2d-x.org/) 的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,一个用于简化项目创建和不同目标平台编译发布流程的终端工具。
二、2048游戏开发
1. 创建项目 (默认读者已经搭建好一系列的开发环境)
通过如下命令创建一个名为game2048的工程
1 | cocos new game2048 -l js |
其中,-l表示采用的语言,可选值为cpp、lua以及js。运行命令之后,便可在所在目录看到game2048文件夹。
图1-1为game2048工程的创建过程
除创建命令外,cocos console还为工程提供了运行、编译等命令,具体如下:
a. cocos run -p web|ios|android|mac|win32 //运行在指定平台
b. cocos compile -p web|ios|android|mac|win32 -m release//将项目工程打包到指定平台上
2. 项目game2048的目录结构
打开刚刚创建好的game2048工程,可以看到其目录结构图如图1-2所示。
3. 创建游戏场景
由于2048游戏相对简单,它只需要一个场景,下面我们来创建一个场景:
1 | //层 |
很简单吧!我们只需要创建一个Layer类,然后将它的一个实例加入Scene中,程序运行时main.js会创建一个Scene的实例作为程序入口。
4. 创建卡牌类
我们把2048游戏中的每一个方格看作一个卡片,上面的数字是它的属性。也就是说我们需要4x4=16个卡片类的对象。新建一个CardSprite.js文件:
1 | var CardSprite = cc.Layer.extend({ |
这里将CardSprite类继承自Layer,然后初始化卡片背景和上面的数字,还定义了number的set/get方法。这里需要注意几点:
新建.js文件以后需要在project.json相关位置添加文件路径。
继承都需要有 this._super();,一般写在构造函数ctor:function()中。
注意静态函数的写法,类名.函数名 = function(){}。
5. 初始化游戏界面
主要是在Layer的init()函数中初始化,我们使用一个4x4的二维组来放置在主界面创建16个卡片:
1 | var gameLayer = cc.Layer.extend({ |
通过调用
this.createCards(size);
初始化所有16个卡片,由于0不显示,所以卡片上都没有数字。然后调用
this.autoCreateCardNumber();
在随机的两个卡片上生成数字,在随机生成的时候我们应该
先判断还有没有空位
,否则有可能会陷入死循环。
初始化的界面如下图:
今天就先到这里啦~~~(下节内容定义手势动作,卡片合并,添加分数,判断游戏结束和顺利,界面优化)下节继续,下节再见!