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

来源：互联网发布：php tp框架 c函数编辑：程序博客网时间：2024/06/05 13:22

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

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, 960, cc.ResolutionPolicy.FIXED_HEIGHT);  //横屏游戏    } else {        cc.view.setDesignResolutionSize(640, 960, 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为屏幕适配和游戏界面入口

0 0