res文件夾存放資源文件
src文件夾是主要的程序代碼
app.js是實現游戲場景的JavaScript文件
resource.js在src文件夾中，定義資源對應的變量
config.json保存模擬器運行配置信息
project.json是項目的配置信息
index.html是Web工程的首頁
main.js與首頁index.html對應的JavaScript文件，負責啟動游戲場景
index.html代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Cocos2d-html5 Hello World test</title> 6 <link rel="icon" type="image/GIF" href="res/favicon.ico"/> 7 <meta name="apple-mobile-web-app-capable" content="yes"/> 8 <meta name="full-screen" content="yes"/> 9 <meta name="screen-orientation" content="portrait"/> 10 <meta name="x5-fullscreen" content="true"/> 11 <meta name="360-fullscreen" content="true"/> 12 <style> 13 body, canvas, div { 14 -moz-user-select: none; 15 -webkit-user-select: none; 16 -ms-user-select: none; 17 -khtml-user-select: none; 18 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 19 } 20 </style> 21 </head> 22 <body style="padding:0; margin: 0; background: #000;"> 23 <canvas id="gameCanvas" width="800" height="450"></canvas> 24 <script src="frameworks/cocos2d-html5/CCBoot.js"></script> 25 <script src="main.js"></script> 26 </body> 27 </html>
7~11行：meta信息是網頁基本信息，這些設置能夠使得index.html網頁很好地在移動設備上顯示。
23行：Canvas標簽，通過JavaScript 可以在Canvas上繪制 2D 圖形，Cocos2d-JS在網頁運行的游戲場景都是通過Canvas渲染出來的。
24行：導入JavaScript文件CCBoot.js，我們不需要維護該文件。
25行：導入JavaScript文件main.js，我們需要維護該文件
main.js代碼：
1 cc.game.onStart = function(){ 2 cc.view.adjustViewPort(true); 3 cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); 4 cc.view.resizeWithBrowserSize(true); 5 //加載游戲所需資源 6 cc.LoaderScene.preload(g_resources, function () { 7 cc.director.runScene(new HelloWorldScene()); 8 }, this); 9 }; 10 cc.game.run();
1行：啟動游戲
cc.game是一個游戲啟動對象
2~4行：設置游戲視圖屬性
3行：設置游戲視圖大小，涉及到屏幕適配問題，cc.ResolutionPolicy.SHOW_ALL是屏幕適配策略
g_resources參數是加載資源的數組，該數組是在src/resource.js文件中定義的
6行：運行HelloWorldScene場景，cc.director是導演對象
10行：cc.game.run()是運行游戲啟動對象
project.json
1 { 2 "project_type": "javascript", 3 4 "debugMode" : 1, 5 "showFPS" : true, 6 "frameRate" : 60, 7 "id" : "gameCanvas", 8 "renderMode" : 0, 9 "engineDir":"frameworks/cocos2d-html5", 10 11 "modules" : ["cocos2d"], 12 13 "jsList" : [ 14 "src/resource.js", 15 "src/app.js" 16 ] 17 }
5行：是否顯示幀率調試信息，幀率調試就是顯示在左下角文字信息。
6行：設置幀率為60，即屏幕1/60秒刷新一次。
11行：加載游戲引擎的模塊
13~15行：聲明需要加載的JavaScript文件，這里的文件主要是由我們編寫的，我們每次添加一個JavaScript文件到工程中，就需要在此處添加聲明
config.json代碼：
1 { 2 "init_cfg": { 3 "isLandscape": true, 4 "name": "CocosJSGame", 5 "width": 960, 6 "height": 640, 7 "entry": "main.js", 8 "consolePort": 6050, 9 "debugPort": 5086, 10 "forwardConsolePort": 10088, 11 "forwardUploadPort": 10090, 12 "forwardDebugPort": 10086 13 }, 14 ........... 15 ] 16 }
2行：初始配置信息
3行：設置橫屏顯示還是豎屏顯示
4行：設置模擬器上顯示的標題
5、6行：設置屏幕的寬和高
7行：設置文件入口代碼
app.js
1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:null, 3 ctor:function () { 4 ////////////////////////////// 5 // 1. super init first 6 this._super(); 7 //..... 8 9 return true; 10 } 11 }); 12 13 var HelloWorldScene = cc.Scene.extend({ 14 onEnter:function () { 15 this._super(); 16 var layer = new HelloWorldLayer(); 17 this.addChild(layer); 18 } 19 });