从《围住神经猫》看cocos2d-js
如果你是个微信迷，那么你一定对上面的游戏截图十分熟悉。是的，它就是一夜之间爆红微信朋友圈的《围住神经猫》网页小游戏。“无心插柳”是泥巴怪公司给《围住神经猫》大热现象的总结，这个原本只为“拉点用户”而花一天功夫做的HTML5小游戏，两天之内就成为了微信朋友圈最流行的娱乐。如果你是个普通读者，也许你对此并不会有太多深层次的感知，但如果你是一名程序猿，更或者你是一名游戏开发者，那么我想你和我一样将看到更多美好的事物。
作为一名游戏开发者，我在PC和手游行业周转已久却忽略了WEB游戏的价值。没错，《围住神经猫》就是一个典型的WEB小游戏。相比各大手游，如果你能在两天的时间里开发出一款类似的小游戏，然后收货超出你得想象你是否会为此惊讶！如果我说我们可以使用cocos2d-js游戏引擎一天开发出这样一个微信游戏你是否会更加吃惊！
今天我们来介绍一下如何使用Cocos2d-JS引擎快速模仿开发一个微信游戏《围住神经猫》。
Cocos2d-JS引擎
Cocos2d-JS引擎是Cocos2d-x的JS版本，它极大简化与整合的API设计使得游戏开发变得前所未有地轻松。依托Web平台使Cocos2d-JS享有高效的开发测试环境，命令行工具提供三步就可以搞定Web与Native全平台部署的便捷功能。
我们使用Lite版本进行快速开发
官方下载地址：http://cn.cocos2d-x.org/download/#anchor3
下载下来后打开文件目录如下：
2.其中cocos2d-js-v3.5-lite.js是我们coocs2d-js游戏引擎SDK，之后在我们的代码里引入它便可以使用引擎代码了。
3.双击HelloWorld.html使用浏览器打开运行Demo。
4.HelloWorld.html是一个标准的网页格式代码。我们将在&head&标签里引入SDK：
5.在&body&标签设置画布大小：
6.在&script&标签里开始我们的游戏代码：
7.cc.game.onStart = function()是我们游戏的入口。
8.cc.LoaderScene.preload()预加载我们游戏中使用的资源。
9.我们在资源加载后创建一个自己的游戏场景 MyScene开始我们的web游戏开发之旅。
初步了解cocos2d-js开发web游戏后，我们将在之后的文章中详细介绍开发一个完整的微信游戏。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。用Cocos2d-JS制作类神经猫的游戏《你是我的小羊驼》-android100学习网
用Cocos2d-JS制作类神经猫的游戏《你是我的小羊驼》
（via:Cocos 引擎中文站） 一夜之间，微信上一款叫《围住神经猫》的小游戏火了。它的玩法很简单，用最少的步数把一只神经兮兮的猫围死。 7月22号上线以来，3天、500万用户和1亿访问，想...
498)this.width=498;" onmousewheel="javascript:return big(this)" alt="" src="/uploadfile/_0.gif" border="0" height="356" width="480">
（via:Cocos 引擎中文站）
一夜之间，微信上一款叫《围住神经猫》的小游戏火了。它的玩法很简单，用最少的步数把一只神经兮兮的猫围死。 7月22号上线以来，3天、500万用户和1亿访问，想必各位程序猿都按耐不住了，想实现自己的神经猫游戏。
在这篇教程里，我会教大家如何用Cocos2d-JS来实现一个神经猫这样的游戏。 让我们先看下游戏最后完成了的效果图:
498)this.width=498;" onmousewheel="javascript:return big(this)" alt="" src="/uploadfile/_1.gif" border="0" height="242" width="480">
你可能注意到了，神经猫换成了可爱的小羊驼：）
在线游戏地址：http://app9./xyt/?from=singlemessage&isappinstalled=0
源码地址：/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，直到羊驼被围堵在一个圈里面（游戏成功），或羊驼到达地图边界（游戏失败）
整个游戏的思路理清楚了，接下来我们开始进入编码阶段。
开发环境与新建项目
本教程开发基于当前最新的Download v3.0RC1. &（其他版本下载地址：http://cn.cocos2d-x.org/download/）
下载引擎并解压到磁盘的某个目录。
打开控制台，输入下面的命令来新建项目。
环境搭建并不是这篇文章的重点，更详细的信息可以参考：《搭建 Cocos2d-JS 开发环境》
主界面实现
游戏的入口代码在main.js中，用编辑器打开并修改为下面的代码。
关键点解析如下：
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的初始化代码如下：
由引擎提供的cc.Scene.extend方法，让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this._super();来确保Scene被正确的初始化。
整个游戏的设计只有一个scene，界面之间的切换由layer来实现，这可能不是一个最优的设计，但也提供另一种思路。 为了用layer来实现切换，全局变量layers存储了各层的一个实例。
GameLayer我们在下一章节中详细讲解。
StartUI的实现如下：
cc.Layer.extend作用同cc.Scene.extend一样，只不过是一个扩展Scene，一个扩展Layer。ctor是Cocos2d-JS中的构造函数，在ctor中必须调用this._super();以确保正确的初始化。
在onEnter中，我们为StartUI层绑定事件监听，判断触摸点的位置坐标来触发scene切换。
细心的读者可能要问，为什么不用Menu控件？ 当前的Cocos2d-JS版本已实现模块化，可以选择只加载游戏中用到的模块，已减少最终打包size。 为了不加入Menu模块，这里使用了最简单的触摸点坐标判断来实现通用的事情。
游戏界面的实现
橙色块的初始化
游戏地图区域是由9*9的六边形方块组成的，首先用InActive的图片初始化一边矩阵。相关代码如下：
每次循环odd改变，已实现上下错位的排布。 attr是Node基类的新方法，可以方便的一次性设置多个属性。
橙色方块的初始化是由initGame函数来完成。 先来看initGame的实现：
要点解析如下：
1.为了方便逻辑处理，这里用了active_nodes和active_blocks来记录被激活的方块。在初始化矩阵前，需要清理上一次游戏已生成的橙色方块。active_nodes存储精灵实例，active_blocks记录精灵的矩阵坐标。
2.randomBlocks函数生成随机橙色砖块。 首先产生一个7-20的随机数，也就是确定橙色块的数量。然后循环确定每一个块的位置坐标，当然位置坐标也是随机确定的。
3.复位小羊驼的位置以及动画。
响应触摸事件
按照我们之前的分析，游戏界面初始化完成后，需要等待用户指令才能进行下一步的游戏。
相关代码如下：
1. cc.eventManager.addListener加入新的事件监听。
2. 设置事件监听模式为TOUCH_ALL_AT_ONCE。
3. 重写onTouchesBegan方法，判断触摸点的坐标，确定是哪个块被点击，并做响应的处理。 activateBlock方法在对应的矩阵位置加入橙色块，并更新状态数组。然后调用movePlayer移动小羊驼。
羊驼的移动
整个逻辑的关键是AI.js中的getDistance函数，
getDistance有6个参数：
1.羊驼所在行号
2.羊驼所在列号
3.前进方向，l_choices、r_choices、t_choices或b_choices
4.激活块的记录数组
5.辅助记录表，记录在寻路算法中某个节点是不是已经被访问过。
6.最短路径
返回值有三种情况：
1.羊驼到达地图边界，返回羊驼坐标和最短路径0
2.羊驼还在地图中，返回羊驼的下一个坐标值和最短路径cost
3. -1表示羊驼被圈住了，但可能可以移动。
getDistance的代码实现如下：
在羊驼移动函数movePlayer中，首先通过getDistance来判断上下左右4个方向，来寻找最佳移动方向。根据getDistance的返回结果做相应的逻辑处理。
游戏结束界面
游戏结束的两种情况，玩家胜利或失败。
在ResultUI的构造函数中，加入参数win，用来标识是否胜利。而胜利和失败仅仅是显示文字的区别，下方的两个按钮均一样。
在ctor中，根据是否胜利加载不同的图片来显示：
在onEnter中，根据是否胜利加载不同的文字描述：
"通知好友"按钮加载shareUI层，这个层其实是一个帮助指导界面，指示用户点击微信右上角的分享按钮进行分享。
"再来一次"实现很简单，调用initGame重新初始化矩阵，并移除ResultUI层。
分享指导界面
在游戏结束界面我们加入了分享按钮。现在我们就来实现分享界面。
分享界面由分享图标和分享说明组成。这和前面的layer创建一样。很简单，唯一的区别是，分享界面是cc.LayerColor(cc.LayerColor支持设置层的颜色)的子类。下面是实现代码：
加入touch事件用于移除分享界面：
我们需要的功能：
1.分享到微信朋友圈
2.分享给微信好友
3.分享到腾讯微博
4.关注指定用户
本功能已经有大神提供了完整的库，地址是：/zxlie/WeixinApi ，以下我们做一个简单的使用分析。
注：除特殊说明外，本小节实现均在文件 WeixinApi.js中。
现在我们实现的分享有，发给指定朋友，分享到朋友圈，分享到腾讯微博。对于不同的分享方式，实现方式大同小异，我们主要以分享到朋友圈为例。
我们分享的时候需要的数据有：appid，图片，链接，标题，文字内容，例如：
498)this.width=498;" onmousewheel="javascript:return big(this)" alt="" src="/uploadfile/_2.gif" border="0" height="291" width="328">
对应在代码中就需要以下数据：
为了得到数据，我们需要在GameScene.js中实现ResultUI的时候，将以上数据生成出来。 比如胜利时，我们需要显示：
完成数据后，我们需要判断胜利或失败，并传回ui中显示：
为了监测分享的状态，无论分享成功与否我们回调都会上报状态，以便程序处理，我们需要的状态有：
1.用户取消分享
2.分享失败
3.分享成功 所以我们需要以下实现：
WeixinJSBridge
在微信上，通过公众平台推送给用户的文章，是在微信内部直接打开的，用的无外乎就是一个UIWebView控件（IOS上，Android上也 差不多）。但特殊的是，微信官方在这里面加了一个默认的Js API--WeixinJSBridge，通过它，能直接在该页面上做分享操作。
以下代码，拿去玩吧：
最后，赶紧写点诱惑的东东，让用户分享出去吧，这是微信病毒传播的乐趣！
498)this.width=498;" onmousewheel="javascript:return big(this)" alt="" src="/uploadfile/_3.gif" border="0" height="568" width="320">
你可以在这里获取本教程的全部 &源码 。
【编辑推荐】傻瓜式游戏开发工具 门外汉也能开发神经猫
来源：笨手机
作者：埋坑
扫描二维码随身看资讯
使用手机 二维码应用 扫描右侧二维码，您可以
1.在手机上细细品读~
2.分享给你的微信好友或朋友圈~
微信扫一扫免费秒领礼包
扫二维码或添加微信号：benshouji关注“小笨评游戏”
回复“刀塔传奇礼包”即可免费领取刀塔传奇最新礼包！
回复“刀塔传奇”即可查看刀塔传奇最新资讯！
赶快扫一扫吧~
表羞涩嘛~喜欢就点我
分享吧~提高逼格：
剩余：182/200
有效日期：
剩余：181/200
有效日期：
剩余：186/200
有效日期：
剩余：181/199
有效日期：
剩余：45/50
有效日期：
剩余：194/200
有效日期：
剩余：495/500
有效日期：
剩余：185/200
有效日期：
剩余：981/1000
有效日期：
剩余：295/300
有效日期：
蜗牛手机游戏合集
网易手机游戏合集
童年手机游戏合集
体育类手机游戏合集
腾讯棋牌游戏合集
赛车类手机游戏合集
高智商手机游戏合集
夏日解暑必玩手游合集
僵尸手机游戏大全
小笨评游戏
Copyright (C)
笨手机 , All Rights Reserved.沪ICP备号-2客服精灵 竞价推广必备软件
增值电信业务经营许可证：苏B2-
编辑热线：6-808
A5创业网 版权所有
扫一扫关注最新创业资讯cocos2d-js除了做native游戏外，还可以用来做HTML5游戏/动画，那么它跟adobe的createjs框架比较会怎么样呢？
（背景知识：createjs是adobe支持的HTML5框架，沿用了Flash的思想，实现了最基本的显示列表和事件机制，是一个非常轻量的框架。createjs暂时只有canvas 2d版本，webgl版本还没完成。）
1背景，上排5个小人播放SpriteSheet动画（14帧位图轮播），下排5个小人不断做旋转和缩放。其中小人是带透明的png，尺寸为85*121px。
在PC的chrome运行，cocos2d-js和createjs都能满帧60fps，轻松搞掂无压力。
cocos2d-js：
for (var i = 0; i & 5; i++) {
var man = new cc.Sprite("res/grossini.png");
man.runAction(cc.spawn(cc.rotateBy(1, 360, 360), cc.sequence(cc.scaleTo(1, 2), cc.scaleTo(1, 1))).repeatForever());
this.addChild(man, 2);
man.x = size.width/6*(i+1);
man.y = size.height/5;
for (var j = 0; j & 5; j++) {
var man = new cc.Sprite();
var animation = new cc.Animation();
for (var i = 1; i &= 14; i++) {
animation.addSpriteFrameWithFile("res/grossini_dance_" + (i & 10 ? ("0" + i) : i) + ".png");
animation.setDelayPerUnit(1 / 7);
man.runAction(cc.animate(animation).repeatForever());
man.x = size.width/6*(j+1);
man.y = size.height / 3 * 2;
this.addChild(man, 3);
createjs：
for (var i = 0; i & 5; i++) {
var man = new createjs.Bitmap("../res/grossini.png");
man.regX = 42;
man.regY = 60;
man.x = canvas.width/6*(i+1);
man.y = canvas.height/5*4;
man.scaleX = man.scaleY = 1;
stage.addChild(man);
createjs.Tween.get(man, {loop: true}, true)
.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);
var images = [];
for (var i = 1; i &= 14; i++) {
images.push("../res/grossini_dance_" + (i&10?("0"+i):i) + ".png");
for (var j = 0; j & 5; j++) {
var sheet = new createjs.SpriteSheet({
images: images,
frames: {width: 85, height: 121, regX: 42, regY: 60}
}); //需要设置每帧的宽高，注册点信息
var man = new createjs.Sprite(sheet);
man.framerate = 60/7;
man.x = canvas.width/6*(j+1);
man.y = canvas.height / 3;
man.play();
stage.addChild(man);
由于播放帧动画都需要不断的替换贴图，是否使用GPU加速差别不大，所以接下来只使用旋转放缩来测试两个框架的效率区别。
基于实验一，改为使用2个图，每个图新建2000个实例放到舞台上，分别做旋转放缩的缓动变化。实验二继续在PC的chrome中运行。
cocos2d-js：使用webGL，帧频不断变化，最高有55fps，最低只有29fps。
如果让cocos2d-js强制在canvas 2d模式下渲染，帧频只有26fps左右。
createjs：使用canvas 2d渲染，保持在28fps。
在这个实验中，两者差异的原因主要是cocos2d-js使用了webgl渲染，可以让部分矩阵计算放到GPU，而createjs使用纯canvas 2d渲染，只能依赖CPU计算矩阵变换，导致每帧的计算超过了重绘时间间隔，导致了帧频降低。
接着，我们再做一个手机canvas的实验，测试机是小米1 Android 2.3，可谓是低端情况的canvas 2d，代表了一大批山寨机水平吧。
判断当前帧频，如果帧频大于30，则添加20个运动的小人到舞台上，直到帧频低于30才停止。
cocos2d-js在UC浏览器上运行，勉强支撑40个小人，帧频13到23fps之间波动。
createjs情况就没有在PC chrome那么风光了，运行20个小人就已经卡得掉牙了，只有10到15fps。
通过这个实验可以发现，手机的canvas性能真心不行，包括UC浏览器和微信内嵌的浏览器。这可能是手机CPU性能带来的主要瓶颈吧，所以在手机上只能多依赖GPU，要么发布为native，要么只给iOS 8（带webgl）的高帅富使用。
有兴趣的朋友，可以拿起手机扫一下，看看你的手机测试情况如何，跟个贴。
cocos2d-js：
createjs：
总体来说，由于cocos2d-js可以在webgl上渲染，所以性能会比createjs要好。单纯比较在canvas 2d上的渲染来说，createjs和cocos2d-js不相伯仲，没太大区别，尤其在手机（Android）上基本都是废物，手机的canvas2d游戏/动画只能尽量避免全屏重绘，减少每帧的变化。
再考虑框架的附加能力方面，cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等，都是createjs这个轻量级选手不具备的，createjs只能从零开始，一切都得靠开发者自行实现。因此，cocos2d-js更适合做中大型游戏（大型指的是游戏画面复杂程度，而不是渲染要求高），而createjs更适合做小游戏，例如神经猫级别。
本文的代码可以在/kenkozheng/cocos/cocos_vs_createjs中找到。
阅读(...) 评论()