首先介紹幾個概念：
導演：
導演 (Director)是Cocos2d-JS引擎抽象的一個對象，Director是整個Cocos2d-JS引擎的核心，是整個游戲的導航儀，游戲中的一些常用操作就是由Director來控制的，比如OpenGL ES的初始化，場景的轉換，游戲暫停繼續的控制，世界坐標和GL坐標之間的切換，對節點（游戲元素）的控制等，還有一些游戲數據的保存調用，屏幕尺寸的獲取等都要由Director類來管理控制的。
場景：
場景（Scene）是Cocos2d-JS引擎抽象的一個對象，用Cocos2d-JS制作游戲就如同拍電影，事實上所有東西都必須放置到一個場景容器中才能最終被顯示出來。游戲中我們通常需要構建不同的場景（至少一個），游戲里關卡、界面的切換其實就是一個一個場景的切換，就像在電影中變換舞台或場地一樣。
層：
層（Layer）通常包含的是直接在屏幕上呈現的內容，並且可以接受用戶的輸入事件，包括觸摸，加速度計和鍵盤輸入等。每個游戲場景都可以有多個層，每一層都有各自負責的任務，比如專門負責背景顯示的層，或顯示敵人的層，或UI控件的層等等。一個場景至少有一個層(Layer)作為孩子節點。
了解了cocos游戲是由在以上三種概念的基礎上建立后，我們再看源碼：
首先看project.json:
我這里因為引入的是合並壓縮后的cocos文件，所以把不相干的去掉了，功能如下：
這個文件沒什么好說的，就是一些配置，沒有功能控制類的代碼，還有加載loading.js主要是在游戲資源加載完成之前顯示loading的js庫我們，所有主要的文件只有：main.js,resource.js,myApp.js
我們先看resource.js文件，從名字看，顧名思義是加載資源的列表，沒有控制代碼：
之后是main.js:
1 cc.game.onStart = function(){ 2 /** 3 * 判斷資源是否加載完畢 4 * 這里的cc.sys.isNative判斷如果只是寫web端游戲，其實可以去掉，看API說的是判斷時候是Native應用 5 */ 6 if(!cc.sys.isNative && document.getElementById("cocosLoading")) // del: !cc.sys.isNative && 7 document.body.removeChild(document.getElementById("cocosLoading")); 8 9 var designSize = cc.size(480, 800); //輔助功能，創建一個尺寸 10 var screenSize = cc.view.getFrameSize(); //獲取視圖的大小，即畫布的尺寸 11 12 /** 13 * 判斷是PC設備還是移動設備（這里通過視圖尺寸判斷） 14 */ 15 if(!cc.sys.isNative && screenSize.height < 800){ // del: !cc.sys.isNative && 16 designSize = cc.size(320, 480); 17 /** 18 * 此屬性通過官方API沒有找到，可能是還沒有更新 19 * 通過查看源碼可以看出cc.loader返回一個對象，此對象帶有一個resPath屬性，這個屬性即設置資源的加載配置目錄 20 * @type {string} 21 */ 22 cc.loader.resPath = "res/Normal"; 23 }else{ 24 cc.loader.resPath = "res/HD"; 25 } 26 /** 27 *cc.view.setDesignResolutionSize（width, height, resolutionPolicy） 主要用途為設置設計視圖點大小的分辨率策略 28 * width 設計分辨率寬度 29 * height 設計分辨率高度 30 * resolutionPolicy 分辨率策略 31 *分辨率策略包括： 32 *0 ResolutionExactFit 通過拉伸適配填充屏幕：如果設計分辨率的寬高比與屏幕分辨率的寬高比不相同，那么你的游戲視圖將被拉伸 33 *1 ResolutionNoBorder 全屏無黑邊：如果設計分辨率的寬高比與屏幕分辨率的寬高比不相同，那么你的游戲視圖的兩個區域會被裁剪 34 *2 ResolutionShowAll 全屏帶黑邊框：如果設計分辨率的寬高比與屏幕分辨率的寬高比不相同，那么將顯示兩個黑邊框 35 *3 ResolutionFixedHeight 按內容和屏幕的高度比，縮放內容的寬高 36 *4 ResolutionFixedWidth 按內容和屏幕的寬度比，縮放內容的寬高 37 *5 cc.ResolutionPolicy [僅限於Web功能]自定義分辨率策略，通過cc.ResolutionPolicy構建 38 * 39 * 通過源碼可知cc.ResolutionPolicy所有常量屬性代表數為下： 40 * cc.ResolutionPolicy.EXACT_FIT = 0; 41 * cc.ResolutionPolicy.NO_BORDER = 1; 42 * cc.ResolutionPolicy.SHOW_ALL = 2; 43 * cc.ResolutionPolicy.FIXED_HEIGHT = 3; 44 * cc.ResolutionPolicy.FIXED_WIDTH = 4; 45 * cc.ResolutionPolicy.UNKNOWN = 5; 46 */ 47 cc.view.setDesignResolutionSize(designSize.width, designSize.height,cc.ResolutionPolicy.SHOW_ALL); 48 /** 49 * cc.LoaderScene.preload(resources, cb, target) 50 * 加載資源文件，當所有資源都加載完畢后會調用target的 call function函數 51 */ 52 cc.LoaderScene.preload(g_resources, function () { 53 /** 54 * cc.director.runScene(scene) 55 * 運行一個場景。替換一個新的正在運行的場景或者輸入第一個需要顯示的場景。 56 * 這里我們new一個新的場景 57 */ 58 cc.director.runScene(new MyScene()); 59 }, this); 60 }; 61 /** 62 * cc.game.run() 63 * 運行游戲 64 */ 65 cc.game.run();
這里面setDesignResolutionSize()函數的第三個參數的6個效果如下：
還有一個地方要說的是cc.loader.resPath設置的就是resource.js里面加載資源的相對路徑設置。
而第58行new的MyScene()對象就是接下來要說的內容：
myApp.js:
1 var MyLayer = cc.Layer.extend({ 2 helloLabel:null, 3 sprite:null, 4 5 init:function () { 6 7 /** 8 * 首先執行this._super()調用父類（cc.layer）原有的init 9 */ 10 this._super(); 11 12 /** 13 * cc.director.getWinSize() 14 * 返回畫布視圖大小 15 * @type {*|cc.Size} 16 */ 17 var size = cc.director.getWinSize(); 18 19 /** 20 * 添加一個圖片菜單項 21 * cc.MenuItemImage(普通狀態時的圖像, 選中狀態時的圖像, 不可用狀態時的圖像, 回調函數, target) 22 * 此方法返回一個cc.menu對象 23 * 盡量將所有狀態的圖像都控制在同一個尺寸大小 24 */ 25 var closeItem = new cc.MenuItemImage( 26 s_CloseNormal, 27 s_CloseSelected, 28 function () { 29 cc.log("close"); 30 },this); 31 /** 32 * 設置圖片菜單項的描點為中心點 33 * 設置錨點,用百分比表示. 34 * 錨點是所有的轉換和定位操作的基點. 35 * 它就像節點附加到其父節點的大頭針. 36 * 錨點是格式化(normalized)點,就像百分比一樣.。(0,0)表示左下角,(1,1)表示右上角. 37 * 但是你可以使用比(1,1)更大的值或者比(0,0)更小的值. 38 * 默認的錨點是(0.5,0.5),因此它開始於節點的中心位置 39 */ 40 closeItem.setAnchorPoint(0.5, 0.5); 41 42 /** 43 * 創建一個菜單對象 44 */ 45 var menu = new cc.Menu(closeItem); 46 /** 47 * 設置原點(0,0)為左下角.即菜單對象所有子元素對應的的原點為左下角 48 */ 49 menu.setPosition(0, 0); 50 /** 51 * 把圖像菜單項對象添加到菜單對象中，層級設置為1 52 */ 53 this.addChild(menu, 1); 54 /** 55 * 設置按鈕顯示在視圖中的最右下角 56 */ 57 closeItem.setPosition(size.width - 20, 20); 58 59 /** 60 * 添加標簽 61 * cc.LabelTTF(text, fontName, fontSize, dimensions, hAlignment, vAlignment) 62 * cc.LabelTTF是cc.TextureNode的子類，此類可以使用系統字體或者指定的ttf字體文件在游戲中顯示文本。 63 * 所有cc.Sprite的特性都可以在cc.LabelTTF中使用。 64 * cc.LabelTTF對象在使用js-binding方式編譯的移動設備app上運行比較緩慢，可以考慮使用cc.LabelAtlas或者cc.LabelBMFont來代替。 65 * 你在創建cc.LabelTTF的時候可以指定字體名稱、字體對齊方式、字體尺寸和字體大小，或者使用cc.FontDefinition對象來創建。 66 */ 67 this.helloLabel = new cc.LabelTTF("Hello World", "Impact", 38); 68 /** 69 * 設置標簽在視圖中的位置 70 */ 71 this.helloLabel.setPosition(size.width / 2, size.height - 40); 72 /** 73 * 把此標簽作為此層的子元素添加到層中，層級設置為5 74 */ 75 this.addChild(this.helloLabel, 5); 76 77 /** 78 * 添加一個背景精靈 79 * 創建二維一個精靈 80 */ 81 this.sprite = new cc.Sprite(s_HelloWorld); 82 this.sprite.setAnchorPoint(0.5, 0.5); 83 this.sprite.setPosition(size.width / 2, size.height / 2); 84 /** 85 * 設置節點的縮放比例.默認的縮放比例是1.0.該函數可以同時修改X軸跟Y軸的縮放比例. 86 * this.sprite.getContentSize() 87 * 返回一個新的cc.size實例表示節點，為未進行變換之前的大小. 88 * 89 * 即這里以高度為比例因子，說明這里背景圖片永遠顯示完整，不會被剪裁 90 */ 91 this.sprite.setScale(size.height / this.sprite.getContentSize().height); 92 /** 93 * 把此圖片作為此層的子元素添加到層中，層級設置為0 94 */ 95 this.addChild(this.sprite, 0); 96 } 97 }); 98 99 var MyScene = cc.Scene.extend({ 100 onEnter:function () { 101 /** 102 * 首先執行this._super()調用父類（cc.scene）原有的onEnter 103 */ 104 this._super(); 105 /** 106 * 創建一個MyLayer層對象 107 */ 108 var layer = new MyLayer(); 109 /** 110 * 把新建的層對象添加到此場景中 111 */ 112 this.addChild(layer); 113 /** 114 * 執行層對象的init方法 115 */ 116 layer.init(); 117 } 118 });
至此我們對於cocos的template模板就分析完了，這個只是對第一篇入門環境的補充，畢竟光搭建環境不知道運作原理還是無從下手的。此篇意在介紹和增強cocos web端的開發的總體認識，如果上面的模板代碼明白所以然了，我想再通過網上的資料進行自我學習，還是可以寫出一些自娛自樂的小游戲的，只要理解好cocos是面相對象的並且常常翻閱API，寫個微信小游戲還是不成問題的，那么就到這了，大家努力吧，如果以后再cocos上有什么特別的見解，希望也能通過發表博文的形式來幫助更多的人入門，畢竟授人以魚不如授人以漁，還需大家一起學習。