今天我們來介紹一下如何使用Cocos2d-JS引擎快速開發一個微信遊戲《來自喵星的你》 1.Cocos2d-JS引擎 Cocos2d-JS引擎是Cocos2d-x的JS版本，它極大簡化與整合的API設計使得遊戲開發變得前所未有地輕鬆。依託Web平臺使Cocos2d-JS享有高效的開發測試環境，命令列工具提供三步就可以搞定Web與Native全平臺部署的便捷功能。 2.Cocos Code IDE Cocos Code IDE是基於 Eclipse的跨平臺 IDE，可幫助開發者便捷地建立遊戲工程、編寫除錯程式碼、實時檢視修改效果、並最終直接釋出成可上架的安裝包。 3.遊戲 《來自喵星的你》主角是一隻喵星小喵咪。他的使命是在危險的地球上剷除汪星人（為什麼這兩個星球的主戰場要設定在地球上，我也沒想通，不要在意這些細節嘛...），配角就是一群不斷產生的汪星人，玩家需要控制喵星人的移動和攻擊來躲避或者打敗汪星人，打敗的越多分數越高，如果喵星人被打敗了，遊戲結束，這個時候就可以把你的成績分享給你的好友，比一比誰更牛。 遊戲無外乎就是各種遊戲內的物件根據你所設定的邏輯或者使用者的互動執行一系列動畫而已。明白了這一點，我們就開始動手來開發一個已經在微信上刷屏刷的一塌糊塗的《來自喵星的你》，想想是不是有點小激動。 我們先簡單介紹一下這個遊戲的結構： A.不要主選單不要一堆亂七八糟的東西，一進遊戲就開始玩，越簡潔越能抓住使用者。 B.遊戲的主介面，玩家操作介面和分數標籤。 C.喵星人只有一隻，汪星人隨著時間一直產生。 D.遊戲結束顯示遊戲結束的介面，可以重玩也可以分享。所以這是個單場景遊戲。 1）window.onload函式是Cocos2d-JS遊戲的入口。 在這裡，我們載入了資源後進入到遊戲場景。

1. cc.LoaderScene.preload(["catnorrisd.png", "pg.png", "arrow.png", "end.png"], function () {//載入資源
2. cc.director.runScene(new MyScene());//載入資源後回撥，進入場景

MyScene 就是遊戲的主場景了，MyScene從 cc.Scene 繼承而來。進入遊戲後，引擎會呼叫 onEnter 函式，所以我們可以在 onEnter 函式裡初始化整個遊戲場景UI和處理觸控相關的邏輯。 2）建立分數標籤 比如，建立一個分數標籤，很簡單，只需要初始化標籤的屬性，並新增到場景中即可。

1. this
   .scoreLabel =  UI.scoreLabel = new cc.LabelTTF("0", "黑體", 24, cc.size(150, 30), cc.TEXT_ALIGNMENT_LEFT);//建立Label
2.     this.addChild(this.scoreLabel);//新增到場景
3.     this.scoreLabel.attr({ //屬性設定
4.         x:30, 
5.         y:cc.director.getVisibleSize().height - 25, 
6.         strokeStyle: cc.color(0,0,0), 
7.         lineWidth: 2, 
8.         color: cc.color(255,150,100), 
9.         anchorX:0.1 
10.     }); 

3）處理觸控邏輯 如何捕獲使用者的觸控？Cocos2d-JS提供了一個很方便的介面，我們只要在遊戲的場景中呼叫

1. cc.eventManager.addListener 

重寫下面三個函式就可以了。

1. onTouchBegan:function(touch, event); 
2. onTouchMoved:function(touch, event); 
3. onTouchEnded:function(touch, event); 

 從命名就可以看出來這三個函式是處理觸控的三個時間點。這裡要注意的是，如果我們根據觸控的時間來判斷使用者是長按還是點選，如果是長按，喵星人就會移動，如果是點選，喵星人就會進行攻擊。目標點座標怎麼獲取呢？touch引數暴露咯..

1. touch.getLocation(); 

4）主角登場 喵星人終於要出來了，為了方便操作喵星人，我們把它封裝為一個類Cat，從 cc.Sprite 繼承而來。ctor 建構函式初始化了喵星人的狀態。

1. ctor:function(){ 
2.     this._super("catnorrisd.png", cc.rect(144,148,70,32));//初始化紋理，可以理解為圖片
3.     this.attr({//屬性設定
4.         anchorX:0.5, 
5.         anchorY:0 
6.     }); 
7.     this.scheduleUpdate(); 
8.     this.idle(); 
9. }, 

5）狀態機 從上面的程式碼我們可以看到有2個奇怪的函式呼叫scheduleUpdate()和idle()，又是做什麼用的呢？這裡我們把喵星人設定為狀態機模式。給定了喵星人可能的幾個狀態，idle，walking，attacking，dieing和dead。

1. this.idle()//設定喵星人進入idle狀態

同樣的呼叫walk()，attack()等等也會切換喵星人的狀態。那這些只是狀態的切換，如何表現這些狀態呢？

1. this.scheduleUpdate();//這是個定時器，每幀呼叫update函式，我們根據不同狀態處理喵星人的表現

假如此時是walk的狀態，喵星人會有一個左右搖晃的動作。

1. this.runAction(cc.sequence(cc.rotateTo(0.12, -3), cc.rotateTo(0.12,3)).repeatForever()); 

 cc.rotateto 是一個旋轉動作。Sequence 是一個連續動作，它把2個 rotateTo 連線在一起，按順序執行。而 repeatForever 表示這個動作迴圈進行。 同理，2種汪星人Doge和Husky也被封裝為狀態機的模式，然後後Manager物件統一進行管理，Manager物件主要做的事就是定時產生汪星人。 6）碰撞檢測 碰撞檢測同樣在每幀進行，主角喵星人是一個精靈，在遊戲看來它只是一塊矩形紋理，汪星人同樣也是，即便有的地方是透明的。所以這裡採用的方式是檢測喵星人的位置和汪星人的位置，一旦距離低於我們設定的值就判定為碰撞。

1. if(cc.pDistance(this.target.getPosition(),this.getPosition()) < COLSIZE) 
2.     ...//碰撞

如果喵星人被打敗後，顯示遊戲介面，即UI物件。在這裡可以重新遊戲，也可以進行微信分享。 7）微信分享 這麼碉堡的遊戲怎麼能少得了微信分享功能呢？分享功能的程式碼可以在index.html中看到。

1. Api.shareToFriend(wxFriend, wxCallbacks); 
2. Api.shareToTimeline(wxData, wxCallbacks); 
3. Api.shareToWeibo(wxData, wxCallbacks); 

其中wxFriend.desc和wxData.desc表示內容描述，可以在遊戲結束的時候會進行修改。其他欄位同樣也可以在這裡進行修改，比如連結，圖示等等。

1. document.title = window.wxData.desc = "喵星刷屏！喵獲得"+UI.score+"分，在眾喵中排名"+(0|(percent*100))+"%，尼能超過喵嗎！"; 
2. document.title = window.wxFriend.desc = "我拿了"+UI.score+"分，戰勝了"+ UI.pg +"個汪，超越了"+(0|(percent*100))+"％的好友！你能超過我嗎"; 

4.總結 可以看到，《來自喵星的你》只用了一個js檔案就搞定了，使用Cocos2d-JS引擎可以高效快速方便地開發一個JS遊戲，只要有了Cocos2d-JS和Cocos Code IDE，你也能輕鬆、快速地打造出一款趣味的優秀遊戲。 目前微信遊戲平臺已成為國內最高人氣的平臺之一，並且誕生出了許多成功作品。藉助Cocos2d-JS和Cocos Code IDE，從此開發者可以告別繁瑣的工序，讓開發來得更有效率。也許下款微信大熱之作就屬於你哦！