【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));

 

 

 

就這樣跳到了下一個界面，那之后呢？游戲是怎么實現的？下篇再見~

請提建議

第一次寫博文，真不知道應該怎么才能寫的通俗易懂，希望大家能夠提出意見和建議，比如多加點圖，或者哪里沒寫清楚的。

由於上課和一些其他的項目，還有自己那么一點點（很大！）的惰性，導致總是下不了決心來寫這些東西，希望大家多多的回復，給我動力，嘻嘻。