《你是我的小羊驼》游戏ios源码
2015-01-30 10:08
681 查看
![]() ![]() 源码下载:http://code.662p.com/view/8582.html 你可能注意到了,神经猫换成了可爱的小羊驼:) 在线游戏地址:http://app9.download.anzhuoshang ... ge&isappinstalled=0 游戏分析 三个界面基本上就是整个游戏的全部内容: 1.左边的是主界面,展示游戏名称以及主角,让玩家对游戏的整体画风有个大概的印象。 2.中间的是游戏界面,点击空格防止橙色六边形砖块来围堵小羊驼。 3.右边的是游戏成功或失败的界面。 整个游戏的主逻辑都在游戏界面中完成。 玩法是这样: 1.游戏初始化开始,小羊驼始终是站在地图中间,在地图的其他区域随机生产一些位置随机的砖块。 2.玩家点击一个空白区域,放置一个砖块来围堵羊驼。 3.羊驼AI寻路移动一步。 4.循环2和3,直到羊驼被围堵在一个圈里面(游戏成功),或羊驼到达地图边界(游戏失败) 整个游戏的思路理清楚了,接下来我们开始进入编码阶段。 开发环境与新建项目 本教程开发基于当前最新的Download v3.0RC1 . 下载引擎并解压到磁盘的某个目录。 打开控制台,输入下面的命令来新建项目。 $cd cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin $./cocos new -l js --no- native $cd MyJSGame/ $../cocos run -p web 环境搭建并不是这篇文章的重点,更详细的信息可以参考:《搭建 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); else cc.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(); var bg = 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(); var start = 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) { var touch = touches[0]; var pos = 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模块,这里使用了最简单的触摸点坐标判断来实现通用的事情。 游戏界面的实现 橙色块的初始化 游戏地图区域是由9*9的六边形方块组成的,首先用InActive的图片初始化一边矩阵。相关代码如下: var ox = x = y = 0, odd = false , block, tex = this .batch.texture; for ( var r = 0; r < ROW; r++) { y = BLOCK_YREGION * r; ox = odd * OFFSET_ODD; for ( var c = 0; c < COL; c++) { x = ox + BLOCK_XREGION * c; block = new cc.Sprite(tex, BLOCK2_RECT); block.attr({ anchorX : 0, anchorY : 0, x : x, y : y, width : BLOCK_W, height : BLOCK_H }); this .batch.addChild(block); } odd = !odd; } 每次循环odd改变,已实现上下错位的排布。 attr是Node基类的新方法,可以方便的一次性设置多个属性。 橙色方块的初始化是由initGame函数来完成。 先来看initGame的实现: initGame : function () { if ( this .inited) return ; this .player_c = this .player_r = 4; this .step = 0; // 1. for ( var i = 0, l = this .active_nodes.length; i < l; i++) { this .active_nodes.removeFromParent(); } this .active_nodes = []; for ( var r = 0; r < ROW; r++) { for ( var c = 0; c < COL; c++) { this .active_blocks[r][c] = false ; } } // 2. this .randomBlocks(); // 3. this .player.attr({ anchorX : 0.5, anchorY : 0, x : OFFSET_X + BLOCK_XREGION * this .player_c + BLOCK_W/2, y : OFFSET_Y + BLOCK_YREGION * this .player_r - 5 }); this .player.stopAllActions(); this .player.runAction( this .moving_action); this .inited = true ; }, |
相关文章推荐
- 《你是我的小羊驼》游戏ios源码
- 《你是我的小羊驼》游戏ios源码
- 【iOS-Cocos2d游戏开发之二十一 】自定义精灵类并为你的精灵设置攻击帧(指定开始帧)以及扩展Cocos2d源码的CCAnimation简化动画创建!
- 【iOS-Cocos2d游戏开发之二十一 】自定义精灵类并为你的精灵设置攻击帧(指定开始帧)以及扩展Cocos2d源码的CCAnimation简化动画创建!
- 卡通风格的连连看ios游戏源码
- 躲避球游戏ios源码
- 躲避球游戏ios源码
- 【iOS-Cocos2d游戏开发之二】Cocos2D 游戏开发资源贴(教程以及源码)
- 双人对战的球类游戏IOS源码
- ios版弹珠游戏源码
- ios水果风暴游戏源码下载
- IOS游戏源码下载之简易版雷电(2.2.3版本)源码完整下载和简单开发教程
- 【iOS-Cocos2d游戏开发之十五】详解CCProgressTimer 进度条并修改cocos2d源码实现“理想”游戏进度条!
- Cocos2D-HTML5 MoonWarriors游戏Android编译指南(另附iOS编译指南和游戏源码)
- Cocos2D-HTML5 MoonWarriors游戏Android编译指南(另附iOS编译指南和游戏源码)
- ios球体弹跳游戏源码
- 【Himi之Cocos2d-iOS游戏开发】系列博文26篇整合以及Android书籍的源码和样章▃11月10日更新第二十六章
- 卡通投掷游戏ios源码
- 非常好的IOS ,IPHONE 游戏源码,值得下载学习收藏先
- 比较不错的一个ios找茬游戏源码