用Cocos2d-JS制作一个类神经猫游戏《你是我的小羊驼》

一夜之间，《围住神经猫》的小游戏火了。它的玩法很简单，用最少的步数把一只神经兮兮的猫围死。7月22号上线以来，3天、500万用户和1亿访问，想必各位程序猿都按耐不住了，想实现自己的神经猫游戏。

在这篇教程里，我会教大家如何用Cocos2d-JS来实现一个神经猫这样的游戏。 让我们先看下游戏最后完成了的效果图:

你可能注意到了，神经猫换成了可爱的小羊驼：）

在线游戏地址：http://app9.download.anzhuoshangdian.com/xyt/?from=singlemessage&isappinstalled=0

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

游戏分析

三个界面基本上就是整个游戏的全部内容：

1.左边的是主界面，展示游戏名称以及主角，让玩家对游戏的整体画风有个大概的印象。

2.中间的是游戏界面，点击空格防止橙色六边形砖块来围堵小羊驼。

3.右边的是游戏成功或失败的界面。

整个游戏的主逻辑都在游戏界面中完成。

玩法是这样：

1.游戏初始化开始，小羊驼始终是站在地图中间，在地图的其他区域随机生产一些位置随机的砖块。

2.玩家点击一个空白区域，放置一个砖块来围堵羊驼。

3.羊驼AI寻路移动一步。

4.循环2和3，直到羊驼被围堵在一个圈里面（游戏成功），或羊驼到达地图边界（游戏失败）

整个游戏的思路理清楚了，接下来我们开始进入编码阶段。

开发环境与新建项目

本教程开发基于当前最新的Downloadv3.0RC1.

下载引擎并解压到磁盘的某个目录。

打开控制台，输入下面的命令来新建项目。

1. $cdcocos2d-js-v3.0-rc1/tools/cocos2d-console/bin

2. $./cocosnew -l js--no-native

3. $cdMyJSGame/

4. $../cocos run -pweb

环境搭建并不是这篇文章的重点，更详细的信息可以参考：《搭建Cocos2d-JS 开发环境》

主界面实现

游戏的入口代码在main.js中，用编辑器打开并修改为下面的代码。

1. cc.game.onStart=function(){

2. //1.

3. cc.view.adjustViewPort(true);

4. //2.

5. if(cc.sys.isMobile)

6. cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);

7. elsecc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);

8. cc.view.resizeWithBrowserSize(true);

9. //3.

10. cc.LoaderScene.preload(resources,function (){

11. //4.

12. gameScene =new GameScene();

13. cc.director.runScene(gameScene);

14. }, this);

15. };

16. cc.game.run();

关键点解析如下：

1.设置浏览器meta来适配屏幕，引擎内部会根据屏幕大小来设置meta的viewport值，会达到更好的屏幕适配效果。

2.针对手机浏览器和PC浏览器启用不同的分辨率适配策略。

3.预加载图片声音等资源。 cc.LoaderScene.preload会生成一个“加载中x％”的界面，等待资源加载结束后，调用第二个参数传入的匿名函数。对于基于html的游戏，页面是放在服务器端供浏览器下载的，为了获得流畅的用户体验，cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。

4.启动游戏的第一个场景。

主界面的由两个层实现:

1.GameLayer层，游戏主逻辑层，在未初始化地图矩阵时，它只显示背景地图。

2.StartUI层，显示logo图片和开始游戏按钮。

GameScene的初始化代码如下：

1. var GameScene =cc.Scene.extend({

2. onEnter :function (){

3. this._super();

4. varbg= new cc.Sprite(res.bg);

5. bg.attr({

6.    anchorX : 0.5,

7.    anchorY : 0.5,

8.     x: cc.winSize.width/2,

9.     y: cc.winSize.height/2

10. });

11. this.addChild(bg);

12. layers.game =new GameLayer();

13. this.addChild(layers.game);

14. layers.startUI =new StartUI();

15. this.addChild(layers.startUI);

16. layers.winUI =new ResultUI(true);

17. layers.loseUI =new ResultUI(false);

18. layers.shareUI =new ShareUI();

19. }

20. });

由引擎提供的cc.Scene.extend方法，让js能实现高级面向对象语言的继承特性。onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this._super();来确保Scene被正确的初始化。

整个游戏的设计只有一个scene，界面之间的切换由layer来实现，这可能不是一个最优的设计，但也提供另一种思路。为了用layer来实现切换，全局变量layers存储了各层的一个实例。

GameLayer我们在下一章节中详细讲解。

StartUI的实现如下：

1. var StartUI= cc.Layer.extend({

2. ctor :function (){

3. this._super();

4. varstart= new cc.Sprite(res.start);

5. start.x =cc.winSize.width/2;

6. start.y =cc.winSize.height/2 + 20;

7. this.addChild(start);

8. },

9. onEnter :function (){

10. this._super();

11. cc.eventManager.addListener({

12.    event: cc.EventListener.TOUCH_ALL_AT_ONCE,

13.    onTouchesEnded: function (touches, event){

14.        vartouch =touches[0];

15.        varpos =touch.getLocation();

16.        if(pos.y< cc.winSize.height/3) {

17.        layers.game.initGame();

18.      layers.startUI.removeFromParent();

19.        }

20.    }

21.   },this);

22. }

23. });

cc.Layer.extend作用同cc.Scene.extend一样，只不过是一个扩展Scene，一个扩展Layer。ctor是Cocos2d-JS中的构造函数，在ctor中必须调用this._super();以确保正确的初始化。

在onEnter中，我们为StartUI层绑定事件监听，判断触摸点的位置坐标来触发scene切换。

细心的读者可能要问，为什么不用Menu控件？当前的Cocos2d-JS版本已实现模块化，可以选择只加载游戏中用到的模块，已减少最终打包size。为了不加入Menu模块，这里使用了最简单的触摸点坐标判断来实现通用的事情。

游戏界面的实现

详见：http://www.cocoachina.com/gamedev/cocos/2014/0725/9250.html

点击下方原文链接玩此小游戏~~~