【Cocos2d-html5】解析例子中的飞机游戏（一）

解析例子中的飞机游戏（一）

飞机游戏

这个飞机游戏不用讲的太详细，只需要按照流程过一遍，然后把重要的类分析分析，我们就可以开始上手写简单的游戏了。我们可以看看游戏的效果。飞机游戏的源代码是在sample/games/MoonWarriors中的，有的同学可能发现，打开了index.html却只看到一个黑色方块。这个游戏是需要服务器容器的，我用的是tomcat，要将文件部署了之后就能看到了。

 

开始开始

跟以前一样，模板文件基本上是不怎么变化的。首先我们要先看的是MoonWarriors-html5.js，这个文件和HelloWorld的cocos2d.js是一样的作用，在闭包中对程序进行一系列的配置，但是这次多定义了一个MW全局变量，我们以后会常用到这个全局变量，他用来存储游戏里要用到的很多对象。

再就是看main.js了，这个文件是程序的入口，我们的游戏必须有一个main.js，为什么？我们就要看源代码了，在MoonWarriors-html5.js中我们给window加了一个DOMContentLoaded事件回调函数，里面加载了jsloader.js，我们要看的代码就是它了，打开platform/jsloader.js，看到这句代码，在队列中自动会加入main.js。所以我们的程序入口就要在这个文件中写了，如果你想更改你的程序入口文件，你改这句源代码就可以了。

main.js中的代码前面一部分跟模板中的一样，后面一部分我们直接无视，因为基本没有用到。我们需要关注的只有这一句：

var myApp = new cocos2dApp(SysMenu.scene);

我们看到src中的SysMenu.js，这是系统菜单界面，采用工厂模式获取对象，在最后我们看到两个函数，一个是create，它创建了一个SysMenu并且调用初始化函数init，这样写的好处是保证创建的对象完整；一个是scene，将SysMenu封装到一个cc.Scene中。为什么要封装到Scene中呢？因为cc.Director只能运行一个cc.Scene，而我们看SysMenu的定义是集成的cc.Layer，所以用工厂模式来生产对象能够有效的对对象进行预处理。

SysMenu的构造方法中有一句cc.associateWithNative( this, cc.Layer );在源代码中，我们可以看到其实这个函数什么都没有做，而注释上面也写了，html5版本不需要这个代码。我也不知道为什么代码里要有这句，还是按照我们一贯的作风，无视它。

我们看init中的代码，首先通过导演获取到游戏窗口的大小保存到成员变量中，这是一个很有用的技巧，因为很多地方都要用到游戏窗口的大小。

接下来创建很多的精灵，不多说了，只是提提Sprite的create方法，它可以单独传一个文件路径，也可以传一个文件路径后再指定一个方块，这个精灵就会用指定的那个方块来初始化，这也是网页或者游戏制作常用的手段。如下图：

 

我们来说说后面创建的cc.MenuItemSprite，它的create方法最多支持5个参数：

一、如果传入三个参数及以内，对应的就是菜单按钮的三个状态（正常，点击，不可用）；

二、四个参数则对应的是；1.按钮正常和点击状态，以及回调函数和调用目标；2.按钮正常、点击、不可用状态图片以及回调函数。

三、五个参数则对应按钮三个状态及回调函数和调用目标。

这个方法能快速的帮我们创建一个菜单的按钮，简化了很多的步骤，当然，这个创建的还是按钮，要合并成一个菜单我们还要学习一个类：cc.Menu。它的create方法可以传入菜单item对象，合并成一个菜单，我们再调用场景的addChild方法就能将菜单加入了，addChild有三个参数，第一个是我们要加入的对象，第二个是层级（显示的优先级），第三个是对象的标识（类似id）。cc.Menu中有一些自动调节菜单item位置的方法，可以帮助我们快捷的调节好item的位置，比如alignItemsVerticallyWithPadding方法，就是通过传入padding的值来竖向的调节item位置。

关于cocos2d-html5的位置，我觉得有必要说一下，它的原点在左下角，默认的对象的锚点都是对象的中心点，所以我们设置对象坐标的时候是针对对象的中心点，我们经常需要设置锚点在(0,0)来方便我们调整对象的位置。

继续看，它调用了schedule方法，这个方法是一个定时器，传入的第一个参数是定时调用的函数，第二个参数是调用时间间隔。这是个很实用的函数，帮助我们刷新界面。再接下来是背景里飞船飞来飞去的实现和声音的播放，不是我们这次的重点，以后会讲，就不多说了。最后返回一个成功标识，保证界面初始化成功。

我们注意到，创建三个菜单item的时候传入了三个回调函数，这三个函数分别对应的跳转到三个界面：游戏界面，设置界面，关于界面。我们拿出其中一段来讲讲：

 

　　　　 var scene = cc.Scene.create();//创建一个场景容器

　　　　 //加入自己写的两个界面

        scene.addChild(GameLayer.create());

        scene.addChild(GameControlMenu.create());

　　　　 //使用我们的大导演~来跳转界面，并且调用了一个渐变隐藏的效果

        cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));

 

 

 

就这样跳到了下一个界面，那之后呢？游戏是怎么实现的？下篇再见~

请提建议

第一次写博文，真不知道应该怎么才能写的通俗易懂，希望大家能够提出意见和建议，比如多加点图，或者哪里没写清楚的。

由于上课和一些其他的项目，还有自己那么一点点（很大！）的惰性，导致总是下不了决心来写这些东西，希望大家多多的回复，给我动力，嘻嘻。