cocos2d-js 新手入门 3.游戏启动

空项目建立好后，适配做完，现在就是怎么样用代码来实现游戏效果界面了。
首先看几个文件的部分代码

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为屏幕适配和游戏界面入口

cocos2d-js 新手入门 3.游戏启动

相关文章