我正在尝试执行本教程:here
这是我的index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Circle Chain Cocos2d HTML5 version</title>
<script src="cocos2d.js"></script>
</head>
<body style="padding:0px;margin:0px;background-color:white">
<canvas id="gameCanvas" width="500" height="500"></canvas>
</body>
</html>
cocos2ds.js:
(function () {
var d = document;
var c = {
menuType:"canvas",
COCOS2D_DEBUG:2, // full debug mode
box2d:false, // no physics in this game
chipmunk: false, // no chipmunk engine
showFPS:true, // let's show the FPS meter
frameRate:60, // 60 frames per second
tag:"gameCanvas", // id of the canvas element
engineDir:"../cocos2d/", // path to your cocos2d installation
appFiles:["circlechain.js"] // path to the main game file
};
window.addEventListener('DOMContentLoaded', function () {
var s = d.createElement("script");
s.src = c.engineDir + "platform/jsloader.js";
d.body.appendChild(s);
s.c = c;
s.id = "cocos2d-html5";
document.ccConfig = c;
});
})();
main.js:
var cocos2dApp = cc.Application.extend({
config:document.ccConfig,
ctor:function (scene) {
this._super();
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config["COCOS2D_DEBUG"];
cc.initDebugSetting();
cc.setup(this.config["tag"]);
cc.Loader.getInstance().onloading = function () {
cc.LoaderScene.shareLoaderScene().draw();
};
cc.Loader.getInstance().onload = function () {
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
};
cc.Loader.getInstance().preload([
]);
},
applicationDidFinishLaunching:function () {
var director = cc.Director.getInstance();
director.setDisplayStats(this.config["showFPS"]);
director.setAnimationInterval(1.0 / this.config["frameRate"]);
director.runWithScene(new this.startScene());
return true;
}
});
var myApp = new cocos2dApp(circlechain);
circlechain.js:
var circlechain = cc.Scene.extend({
onEnter:function(){
this._super();
var layer = new circleChainGame();
layer.init();
this.addChild(layer);
}
})
var circleChainGame = cc.Layer.extend({
init:function(){
this._super();
var circleSpeed = 2;
var s = cc.Director.getInstance().getWinSize();
var gameLayer = cc.LayerColor.create(new cc.Color4B(0, 0, 0, 255), 500, 500)
for(i=0;i<10;i++){
var greenCircle = cc.Sprite.create("greencircle.png");
var randomDir = Math.random()*2*Math.PI;
greenCircle.xSpeed=circleSpeed*Math.cos(randomDir);
greenCircle.ySpeed=circleSpeed*Math.sin(randomDir);
gameLayer.addChild(greenCircle);
greenCircle.setPosition(new cc.Point(Math.random()*500,Math.random()*500));
greenCircle.schedule(function(){
this.setPosition(new cc.Point(this.getPosition().x+this.xSpeed,this.getPosition().y+this.ySpeed));
if(this.getPosition().x>500){
this.setPosition(new cc.Point(this.getPosition().x-500,this.getPosition().y));
}
if(this.getPosition().x<0){
this.setPosition(new cc.Point(this.getPosition().x+500,this.getPosition().y));
}
if(this.getPosition().y>500){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y-500));
}
if(this.getPosition().y<0){
this.setPosition(new cc.Point(this.getPosition().x ,this.getPosition().y+500));
}
})
}
this.addChild(gameLayer);
return true;
}
});
但我看到的只是一张空白页。
我使用的是 Mac，并且我已经在使用 MAMP。
最佳答案
我也尝试过这个教程，但没有成功。
事实上，它似乎有点过时了，而且自编写以来，cocos2d-html5 文件夹组织显然发生了一些变化。
我很确定您可以使用 cocos2d-html5 中提供的 template 项目并轻松地将 circlechain.js 集成到其中。
您还可以看看这个最新的教程:http://2sa-studio.blogspot.com/2013/11/setup-cocos2d-html5-project.html
关于javascript - Cocos2d html5教程返回空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21703651/