空项目建立好后，适配做完，现在就是怎么样用代码来实现游戏效果界面了。
首先看几个文件的部分代码
index.html
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="480" height="720"></canvas>
<script>...</script>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
1.loading.js 为div的加载界面，如果不想要，可以把index.html中loading.js文件删除
2.CCBoot.js 比较核心的代码文件，暂时就当作他是来加载project.json里面 modules 和 jsList 所包含的js文件队列
3.main.js 主要做一些适配，以及游戏入口文件
project.json
{
"project_type": "javascript","debugMode" : 1,"showFPS" : true,"frameRate" : 60,"noCache" : false,"id" : "gameCanvas","renderMode" : 0,"engineDir":"frameworks/cocos2d-html5","modules" : ["cocos2d"],"jsList" : [ "src/resource.js","src/app.js" ] }
modules 为游戏项目需要用到cococs哪些模块，具体模块内容请查看 frameworks/cocos2d-html5/moduleConfig.json
main.js
cc.game.onStart = function(){
if(!cc.sys.isNative && document.getElementById("cocosLoading"))
document.body.removeChild(document.getElementById("cocosLoading"));
cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false); //ios开启retina屏
cc.view.adjustViewPort(true);
if(cc.sys.isMobile) {
cc.view.setDesignResolutionSize(640,960,cc.ResolutionPolicy.FIXED_WIDTH); //竖屏游戏
//cc.view.setDesignResolutionSize(640,cc.ResolutionPolicy.FIXED_HEIGHT); //横屏游戏
} else {
cc.view.setDesignResolutionSize(640,cc.ResolutionPolicy.SHOW_ALL);
}
cc.view.resizeWithBrowserSize(true);
cc.LoaderScene.preload(g_resources,function () {
cc.director.runScene(new HelloWorldScene()); //这里是游戏开始进入的第一个场景
},this);
};
cc.game.run();
简单来讲就是进入index.html界面后，ccboot.js加载完核心代码以及游戏代码资源后，会执行main.js的onStart函数，设置屏幕适配，然后在加载完g_resources后，会打开HelloWorldScene界面。
现在记住几点：
1.游戏图片资源，请放入src/resource.js里面；
2.游戏界面js文件，请放入project.json的jsList里面；
3.main.js为屏幕适配和游戏界面入口
