用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.
下载引擎并解压到磁盘的某个目录。
打开控制台,输入下面的命令来新建项目。
$cdcocos2d-js-v3.0-rc1/tools/cocos2d-console/bin
$./cocosnew -l js--no-native
$cdMyJSGame/
$../cocos run -pweb
环境搭建并不是这篇文章的重点,更详细的信息可以参考:《搭建Cocos2d-JS 开发环境》
主界面实现
游戏的入口代码在main.js中,用编辑器打开并修改为下面的代码。
cc.game.onStart=function(){
//1.
cc.view.adjustViewPort(true);
//2.
if(cc.sys.isMobile)
cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);
elsecc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
//3.
cc.LoaderScene.preload(resources,function (){
//4.
gameScene =new GameScene();
cc.director.runScene(gameScene);
}, this);
};
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的初始化代码如下:
var GameScene =cc.Scene.extend({
onEnter :function (){
this._super();
varbg= new cc.Sprite(res.bg);
bg.attr({
anchorX : 0.5,
anchorY : 0.5,
x: cc.winSize.width/2,
y: cc.winSize.height/2
});
this.addChild(bg);
layers.game =new GameLayer();
this.addChild(layers.game);
layers.startUI =new StartUI();
this.addChild(layers.startUI);
layers.winUI =new ResultUI(true);
layers.loseUI =new ResultUI(false);
layers.shareUI =new ShareUI();
}
});
由引擎提供的cc.Scene.extend方法,让js能实现高级面向对象语言的继承特性。onEnter方法是场景初始化完成即将展示的消息回调,在onEnter中必须调用this._super();来确保Scene被正确的初始化。
整个游戏的设计只有一个scene,界面之间的切换由layer来实现,这可能不是一个最优的设计,但也提供另一种思路。为了用layer来实现切换,全局变量layers存储了各层的一个实例。
GameLayer我们在下一章节中详细讲解。
StartUI的实现如下:
var StartUI= cc.Layer.extend({
ctor :function (){
this._super();
varstart= new cc.Sprite(res.start);
start.x =cc.winSize.width/2;
start.y =cc.winSize.height/2 + 20;
this.addChild(start);
},
onEnter :function (){
this._super();
cc.eventManager.addListener({
event: cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesEnded: function (touches, event){
vartouch =touches[0];
varpos =touch.getLocation();
if(pos.y< cc.winSize.height/3) {
layers.game.initGame();
layers.startUI.removeFromParent();
}
}
},this);
}
});
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
点击下方原文链接玩此小游戏~~~
用Cocos2d-JS制作一个类神经猫游戏《你是我的小羊驼》相关推荐
- (译)如何使用cocos2d来制作一个打地鼠的游戏:第一部分
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
- 14. 如何使用cocos2d来制作一个打地鼠的游戏:第一部分
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
- 如何制作一个塔防游戏 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文实践 ...
- (译)如何使用cocos2d制作一个塔防游戏:引子
原文链接地址:http://www.iphonegametutorials.com/2011/04/11/cocos2d-game-tutorial-how-to-build-a-tower-defe ...
- (译)如何使用cocos2d来制作简单的iphone游戏:更猛的怪物和更多的关卡。(第三部分。完!)...
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
- 如何制作一个塔防游戏 Cocos2d-x 3.0alpha0
本文实践自 Pablo Ruiz 的文章<How To Make a Tower Defense Game>,文中使用Cocos2D,我在这里使用Cocos2d-x 3.0alpha0进行 ...
- 如何制作一个塔防游戏 Cocos2d-x 2.0.4
本文实践自 Pablo Ruiz 的文章<How To Make a Tower Defense Game>,文中使用Cocos2D,我在这里使用Cocos2D-x 2.0.4进行学习和移 ...
- python连连看小游戏_利用Python制作一个连连看小游戏,边学边玩!
导语 今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块 环境搭建 安装Python并添加到环 ...
- 基于小程序制作一个猜拳小游戏
在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小程序游戏吧. 创建小程序 功能实现 界面优化 代码块 创建小程序 访问微信公众平台,点击账号注册. 选择小程序,并在表单填 ...
最新文章
- pythonclass全局变量_Python-多处理全局变量更新未返回给父级
- plsql develop怎么停止job_Kotlin协程实现原理:CoroutineScopeamp;Job
- Cisco WLAN 控制器的配置
- Java计时器Timer和TimerTask用法总结(源码)
- 数据结构之【树形结构】复习题
- Java 8 - 收集器Collectors_归约和汇总
- 干货 | 我如何考察面试者的机器学习水平
- 4k视频分辨率的码流_4k分辨率普通码率和蓝光1080p高码率视频,到底哪个体验好?...
- 穿过已知点画平滑曲线-lua
- vagrant up 时提示错误 cound not open file
- 贪吃蛇c加加代码_C语言编写简单贪吃蛇游戏源代码
- 简单粗暴识别工作室Android识别模拟器
- 2023年度流行色,带来信心的活力洋红色
- STM32F1XX的GPIO的8种工作模式以及GPIO的寄存器简介
- 嵌入式 IIC(I2C)协议
- C语言提取gpgga例子
- NOC大赛2022NOC软件创意编程初赛图形化小低组(小学低年级组)
- 企业入职测试题目及答案_公司新员工入职三级安全教育测试题(附答案)
- 推荐学习课程: 职场写作训练
- 重庆阿尔克CEO、CIO、CFO、COO、CTO、CKO,这些职位都是在做什么的?