第一步，環境搭建
首先去官網下載cocos2d-x壓縮包：https://cocos2d-x.org/download
這里我選擇的是3.x版本的完整SDK：
解壓到任意目錄運行python setup.py安裝即可，不過這里的python版本是2.x。
新建工程：cocos new -l js 工程名
進入工程目錄運行：cocos run -p web
在瀏覽器上看到如下畫面即可表示程序運行成功：
第二步，cocos2d-js基礎
上面的環境搭建和使用命令行新建工程是一般的流程，不過如果我們想具體了解一下cocos是如何運行一個程序的話，可以手動來創建一個簡單的工程，在下載好的SDK工具包中需要使用的是如下圖所示的web文件夾：
運行cocos需要服務器環境，於是在服務器的www目錄下新建一個game文件夾，將SDK中的web文件夾解壓到此處並重命名為cocos2d-html5，下圖是必要的工程結構：
cocos2d-html5是web游戲引擎應該不需要解釋；
res文件夾用來存放一些音頻或者圖片資源；
src存放游戲的腳本資源，主要在該文件夾下編寫游戲邏輯和加載游戲的媒體資源，包含app.js和resource.js；
index.html是運行游戲的默認web頁面；
main.js是用於開始加載游戲cocos2d-js腳本；
project.json是運行游戲必要的配置文件。
准備好工程目錄以后開始編寫游戲的代碼：
首先是index.html：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <canvas id="gameCanvas"></canvas> 11 <script src="cocos2d-html5/CCBoot.js"></script> 12 <script src="main.js"></script> 13 </body> 14 </html>
canvas節點是運行游戲必要的“舞台”，然后再引入CCBoot.js和main.js文件，html代碼應該不怎么需要解釋吧。
然后是main.js：
1 cc.game.onStart = function() { 2 cc.view.setDesignResolutionSize(1280, 800, cc.ResolutionPolicy.SHOW_ALL); 3 cc.director.runScene(new gameScene()); 4 }; 5 cc.game.run();
cc是cocos2d對象的簡稱，新建的游戲叫做cc.game，首先給游戲開始運行事件設置一些參數：
使用setDesignResolutionSize 方法來設置分辨率，同時設置游戲適應瀏覽器全屏運行；
然后運行gameScene場景，這是我們自己定義的游戲場景，后續會詳細介紹。
接着是project.json配置文件：
1 { 2 "debugMode" : 0, 3 "showFPS" : false, 4 "frameRate" : 60, 5 "id" : "gameCanvas", 6 "renderMode" : 0, 7 "engineDir":"cocos2d-html5", 8 "modules" : ["cocos2d"], 9 "jsList" : [ 10 "src/resource.js", 11 "src/app.js" 12 ] 13 }
debugMode：有0~6共7個等級，用來設置顯示哪些錯誤或警告信息，這里設置為0即不顯示信息；
showFPS ： 是否顯示FPS，玩游戲大家應該都懂吧；
frameRate：設置游戲幀數，24幀人眼就不會感到畫面閃爍了，因此60幀應該算比較流暢的；
id：用來指定哪個DOM節點來運行游戲，還記得前面設置過的id為gameCanvas的canvas節點嗎，你設置了沒有？
renderMode：渲染模式，官方推薦設為0；
engineDir ：引擎目錄，就是前面SDK中解壓的web文件夾，不過改名為cocos2d-html5了；
jsList ：數組，說明需要哪些必要的游戲腳本文件，一般都放置在src文件夾下。
最后，來編寫游戲的基本邏輯src/app.js：
1 var gameScene = cc.Scene.extend({ 2 onEnter: function () { 3 this._super(); 4 console.log("my first game starts here"); 5 } 6 });
這里主要定義gameScene場景方法，將在main.js文件中建立場景而運行。現在打開瀏覽器輸入localhost/game應該可以在控制台看到輸出了“my first game starts here”字樣，到目前為止游戲里還沒有精靈（一般在游戲里將可以與玩家交互的圖片稱為“精靈”），下面將導入圖片資源來創建精靈res/player.png：
這是一只可愛的像素鳥，現在打開src/resource.js文件：
1 var gameResources = [ 2 "res/player.png" 3 ];
然后修改main.js來預加載該圖片資源：
1 cc.game.onStart = function() { 2 cc.view.setDesignResolutionSize(1280, 800, cc.ResolutionPolicy.SHOW_ALL); 3 cc.LoaderScene.preload(gameResources, function () { 4 cc.director.runScene(new gameScene()); 5 }, this); 6 }; 7 cc.game.run();
最后修改src/app.js來顯示精靈：
1 var gameScene = cc.Scene.extend({ 2 onEnter: function () { 3 this._super(); 4 var gameLayer = new game(); 5 gameLayer.init(); 6 this.addChild(gameLayer); 7 } 8 }); 9 10 var game = cc.Layer.extend({ 11 init: function () { 12 this._super(); 13 var target = cc.Sprite.create("res/player.png"); 14 this.addChild(target, 0); 15 } 16 });
這個時候打開瀏覽器，emmm。。。注意屏幕左下角應該可以看到1/4像素鳥：
不是很明顯，這是因為cocos的錨點設置默認在圖片中心，而坐標系原點又在屏幕左下角（一般的程序都是在左上角），引用cocos中文網站的一張圖片加以說明：
注意每張圖片中的紅點，它表示圖片的錨點位置。
現在來修改精靈的顯示位置，由於我這里設置的分辨率為1280x800，所以精靈的顯示位置應該是(640, 400)，修改src/app.js：
1 var gameScene = cc.Scene.extend({ 2 onEnter: function () { 3 // same as before 4 } 5 }); 6 7 var game = cc.Layer.extend({ 8 init: function () { 9 this._super(); 10 var target = cc.Sprite.create("res/player.png"); 11 this.addChild(target, 0); 12 target.setPosition(640, 400); 13 } 14 });
然后重新打開瀏覽器可以看到像素鳥已經在屏幕中間顯示了。有了顯示精靈的基礎，接下來我們可以來制作一些簡單邏輯的小游戲。
第三步，簡單邏輯游戲的開發：Concentration game
Concentration game 是一個和連連看差不多的小游戲，首先准備素材：
在前面的基礎上需要修改的主要是src文件夾下的js文件，這也是模塊化設計的優點。先修改src/resource.js文件導入資源：
1 var gameResources = [ 2 "res/cover.jpg", 3 "res/tile_0.jpg", 4 "res/tile_1.jpg", 5 "res/tile_2.jpg", 6 "res/tile_3.jpg", 7 "res/tile_4.jpg", 8 "res/tile_5.jpg", 9 "res/tile_6.jpg", 10 "res/tile_7.jpg" 11 ];
接下來是修改src/app.js文件，都是一些簡單邏輯，部分函數不太明白的可以去cocos官方查看API手冊，這里不再詳細展開，源碼如下：
1 // 定義瓷磚序列 2 var gameArray = [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7]; 3 // 翻開的瓷磚 4 var pickedTiles = []; 5 // 顯示移動步數 6 var scoreText; 7 var moves = 0; 8 9 // 打亂數組：從數組末端出發，每次與前面隨機一個元素交換 10 var shuffle = function(v) { 11 for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 12 return v; 13 }; 14 15 // 游戲場景方法 16 var gameScene = cc.Scene.extend({ 17 onEnter: function() { 18 gameArray = shuffle(gameArray); 19 this._super(); 20 var gameLayer = new game(); 21 gameLayer.init(); 22 this.addChild(gameLayer); 23 } 24 }); 25 26 // 游戲主要邏輯層 27 var game = cc.Layer.extend({ 28 init: function () { 29 this._super(); 30 // 背景漸變 31 var gradient = cc.LayerGradient.create(cc.color(0, 0, 0, 255), cc.color(0x46, 0x82, 0xB4, 255)); 32 this.addChild(gradient); 33 // 移動步數 34 scoreText = cc.LabelTTF.create("Moves: 0", "Arial", "32", cc.TEXT_ALIGNMENT_CENTER); 35 this.addChild(scoreText); 36 scoreText.setPosition(100, 50); 37 // 4x4瓷磚 38 for (var i = 0; i < 16; i++) { 39 var tile = new MemoryTile(); 40 tile.pictureValue = gameArray[i]; 41 this.addChild(tile, 0); 42 tile.setPosition(440 + 50 + Math.floor(i / 4) * 100, 200 + 50 + i % 4 * 100); 43 } 44 } 45 }); 46 47 // 瓷磚對象 48 var MemoryTile = cc.Sprite.extend({ 49 ctor: function() { 50 this._super(); 51 this.initWithFile("res/cover.jpg"); 52 cc.eventManager.addListener(listener.clone(), this); 53 } 54 }); 55 56 // 響應點擊事件 57 var listener = cc.EventListener.create({ 58 event: cc.EventListener.TOUCH_ONE_BY_ONE, 59 swallowTouches: true, 60 onTouchBegan: function(touch, event) { 61 if(pickedTiles.length < 2) { 62 var target = event.getCurrentTarget(); 63 var location = target.convertToNodeSpace(touch.getLocation()); 64 var targetSize = target.getContentSize(); 65 var targetRectangle = cc.rect(0, 0, targetSize.width, targetSize.height); 66 if (cc.rectContainsPoint(targetRectangle, location)) { 67 if(pickedTiles.indexOf(target) == -1) { 68 target.initWithFile("res/tile_" + target.pictureValue + ".jpg"); 69 pickedTiles.push(target); 70 if(pickedTiles.length == 2) { 71 checkTiles(); 72 } 73 } 74 } 75 } 76 } 77 }); 78 79 // 兩塊瓷磚是否相同 80 function checkTiles() { 81 moves++; 82 scoreText.setString("Moves: " + moves); 83 setTimeout(function() { 84 // 不相同則全部還原 85 if(pickedTiles[0].pictureValue != pickedTiles[1].pictureValue) { 86 pickedTiles[0].initWithFile("res/cover.jpg"); 87 pickedTiles[1].initWithFile("res/cover.jpg"); 88 // 移除相同瓷磚 89 } else { 90 var layer = cc.director.getRunningScene().getChildren()[0]; 91 layer.removeChild(pickedTiles[0]); 92 layer.removeChild(pickedTiles[1]); 93 } 94 pickedTiles = []; 95 }, 1000); 96 }
這里有一個需要注意的是移除瓷磚的編寫方法，剛開始我以為要將gameLayer上面的tile對象移除可以這么寫：
1 gameScene.gameLayer.removeChild(pickedTiles[0]); 2 gameScene.gameLayer.removeChild(pickedTiles[1]);
因為很容易可以看出gameLayer是gameScene的子節點，然而犯的錯誤是gameScene只是一個方法並沒有實例化，gameLayer是已經實例化的，如果將它聲明到全局是可以直接調用gameLayer.removeChild()來移除tile節點的。
