用Cocos2d-JS快速开发游戏《来自喵星的你》

（via:Cocos引擎中文站）

今天我们来介绍一下如何使用Cocos2d-JS引擎快速开发游戏《来自喵星的你》

游戏地址（建议用手机访问）：http://app8.download.anzhuoshangdian.com/cat/

源码地址：https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/Catnorris-master.zip

1.Cocos2d-JS引擎

Cocos2d-JS引擎是Cocos2d-x的JS版本，它极大简化与整合的API设计使得游戏开发变得前所未有地轻松。依托Web平台使Cocos2d-JS享有高效的开发测试环境，命令行工具提供三步就可以搞定Web与Native全平台部署的便捷功能。

官方下载地址：http://cn.cocos2d-x.org/download/

官方指南：http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/html5/zh.md

2.Cocos Code IDE

Cocos Code IDE是基于 Eclipse的跨平台IDE，可帮助开发者便捷地创建游戏工程、编写调试代码、实时查看修改效果、并最终直接发布成可上架的安装包。

官方下载地址：http://cn.cocos2d-x.org/download/

官方JS指南：http://cn.cocos2d-x.org/tutorial/show?id=1173

3.游戏

《来自喵星的你》主角是一只喵星小喵咪。他的使命是在危险的地球上铲除汪星人（为什么这两个星球的主战场要设置在地球上，我也没想通，不要在意这些细节嘛...），配角就是一群不断产生的汪星人，玩家需要控制喵星人的移动和攻击来躲避或者打败汪星人，打败的越多分数越高，如果喵星人被打败了，游戏结束，这个时候就可以把你的成绩分享给你的好友，比一比谁更牛。

游戏无外乎就是各种游戏内的对象根据你所设定的逻辑或者用户的交互运行一系列动画而已。

我们先简单介绍一下这个游戏的结构：

A.不要主菜单不要一堆乱七八糟的东西，一进游戏就开始玩，越简洁越能抓住用户。

B.游戏的主界面，玩家操作界面和分数标签。

C.喵星人只有一只，汪星人随着时间一直产生。

D.游戏结束显示游戏结束的界面，可以重玩也可以分享。所以这是个单场景游戏。

1）window.onload函数是Cocos2d-JS游戏的入口。

在这里，我们加载了资源后进入到游戏场景。

1. cc.LoaderScene.preload(["catnorrisd.png", "pg.png", "arrow.png","end.png"], function () {//加载资源

2. cc.director.runScene(new MyScene());//加载资源后回调，进入场景

MyScene 就是游戏的主场景了，MyScene从 cc.Scene继承而来。进入游戏后，引擎会调用 onEnter 函数，所以我们可以在 onEnter函数里初始化整个游戏场景UI和处理触摸相关的逻辑。

2）创建分数标签

比如，创建一个分数标签，很简单，只需要初始化标签的属性，并添加到场景中即可。

1. this.scoreLabel =  UI.scoreLabel = new cc.LabelTTF("0","黑体", 24, cc.size(150, 30), cc.TEXT_ALIGNMENT_LEFT);//创建Label

2. this.addChild(this.scoreLabel);//添加到场景

3. this.scoreLabel.attr({ //属性设置

4.    x:30,

5.    y:cc.director.getVisibleSize().height - 25,

6.    strokeStyle: cc.color(0,0,0),

7.    lineWidth: 2,

8.    color: cc.color(255,150,100),

9.    anchorX:0.1

10. });

3）处理触摸逻辑

如何捕获用户的触摸？Cocos2d-JS提供了一个很方便的接口，我们只要在游戏的场景中调用

1. cc.eventManager.addListener

重写下面三个函数就可以了。

1. onTouchBegan:function(touch, event);

2. onTouchMoved:function(touch, event);

3. onTouchEnded:function(touch, event);

从命名就可以看出来这三个函数是处理触摸的三个时间点。这里要注意的是，如果我们根据触摸的时间来判断用户是长按还是点击，如果是长按，喵星人就会移动，如果是点击，喵星人就会进行攻击。目标点坐标怎么获取呢？touch参数暴露咯..

1. touch.getLocation();

4）主角登场

喵星人终于要出来了，为了方便操作喵星人，我们把它封装为一个类Cat，从cc.Sprite 继承而来。ctor 构造函数初始化了喵星人的状态。

1. ctor:function(){

2. this._super("catnorrisd.png",cc.rect(144,148,70,32));//初始化纹理，可以理解为图片

3. this.attr({//属性设置

4.    anchorX:0.5,

5.    anchorY:0

6. });

7. this.scheduleUpdate();

8. this.idle();

9. },

5）状态机

从上面的代码我们可以看到有2个奇怪的函数调用scheduleUpdate()和idle()，又是做什么用的呢？这里我们把喵星人设置为状态机模式。给定了喵星人可能的几个状态，idle，walking，attacking，dieing和dead。

1. this.idle()//设置喵星人进入idle状态

同样的调用walk()，attack()等等也会切换喵星人的状态。那这些只是状态的切换，如何表现这些状态呢？

1. this.scheduleUpdate();//这是个定时器，每帧调用update函数，我们根据不同状态处理喵星人的表现

假如此时是walk的状态，喵星人会有一个左右摇晃的动作。

1. this.runAction(cc.sequence(cc.rotateTo(0.12, -3),cc.rotateTo(0.12,3)).repeatForever());

cc.rotateto 是一个旋转动作。Sequence是一个连续动作，它把2个 rotateTo 连接在一起，按顺序执行。而 repeatForever 表示这个动作循环进行。

同理，2种汪星人Doge和Husky也被封装为状态机的模式，然后后Manager对象统一进行管理，Manager对象主要做的事就是定时产生汪星人。

6）碰撞检测

碰撞检测同样在每帧进行，主角喵星人是一个精灵，在游戏看来它只是一块矩形纹理，汪星人同样也是，即便有的地方是透明的。所以这里采用的方式是检测喵星人的位置和汪星人的位置，一旦距离低于我们设置的值就判定为碰撞。

1. if(cc.pDistance(this.target.getPosition(),this.getPosition())< COLSIZE)

2. ...//碰撞

如果喵星人被打败后，显示游戏界面，即UI对象。在这里可以重新游戏，也可以进行微信分享。

7）分享

这么碉堡的游戏怎么能少得了分享功能呢？分享功能的代码可以在index.html中看到。

1. Api.shareToFriend(wxFriend, wxCallbacks);

2. Api.shareToTimeline(wxData, wxCallbacks);

3. Api.shareToWeibo(wxData, wxCallbacks);

其中wxFriend.desc和wxData.desc表示内容描述，可以在游戏结束的时候会进行修改。其他字段同样也可以在这里进行修改，比如链接，图标等等。

1. document.title = window.wxData.desc ="喵星刷屏！喵获得"+UI.score+"分，在众喵中排名"+(0|(percent*100))+"%，尼能超过喵吗！";

2. document.title = window.wxFriend.desc = "我拿了"+UI.score+"分，战胜了"+UI.pg +"个汪，超越了"+(0|(percent*100))+"％的好友！你能超过我吗";

4.总结

可以看到，《来自喵星的你》只用了一个js文件就搞定了，使用Cocos2d-JS引擎可以高效快速方便地开发一个JS游戏，只要有了Cocos2d-JS和CocosCode IDE，你也能轻松、快速地打造出一款趣味的优秀游戏。

借助Cocos2d-JS和Cocos CodeIDE，从此开发者可以告别繁琐的工序，让开发来得更有效率。

源码下载地址：https://github.com/chukong/cocos-docs/blob/master/tutorial/framework/html5/how-to-make-a-cat-game/res/Catnorris-master.zip

You must Sign up as a member of Effecthub to view the content.