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