我正在尝试这个教程：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了。
答案 0 :(得分：0)
我也试过这个教程但没有成功。
事实上它似乎有点过时了，自编写以来，cocos2d-html5文件夹组织显然发生了一些变化。
我很确定你可以参加cocos2d-html5中提供的template项目，并轻松地将circlechain.js集成到其中。
您还可以查看最近的这个教程：http://2sa-studio.blogspot.com/2013/11/setup-cocos2d-html5-project.html
答案 1 :(得分：0)
我也尝试过一些教程（包括官方教程），但不幸的是他们没有工作，最终我有一个非常简单的“你好世界”。基于此tutorial的页面，希望它对cocos2d-html5的完整初学者有所帮助。（虽然不需要MAMP）
文件夹结构：
cocos2d (you can find this in official downloaded package, I am using v2.2.2)
external (you can find this in official downloaded package, I am using v2.2.2)
helloWorld
--starter.js
--index.html
--main.js
--src
----HelloScene.js
<canvas id="gameCanvas" width="1000px" height="700px"></canvas>
<script src="starter.js"></script>
(function(){
var d = document;
//basic config of cocos2d
var c = {
COCOS2D_DEBUG:2,
showFPS:true,
frameRate:60,
renderMode:0,
tag:'gameCanvas',
engineDir:'../cocos2d/',
// the scene we are going to activate, cocos2d game is built with scenes, which can have multiple layers, for instance, background layer, sprite layer, score layer
appFiles:[
'src/HelloScene.js'
]
};
window.addEventListener('DOMContentLoaded',function(){
var s = d.createElement("script");
//add the js engine to the webpage
s.src = c.engineDir + 'jsloader.js';
d.body.appendChild(s);
document.ccConfig = c;
s.id = 'cocos2d-html5';
})
})()
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.AppController.shareAppController().didFinishLaunchingWithOptions();
},
applicationDidFinishLaunching:function(){
var director = cc.Director.getInstance();
director.setDisplayStats(this.config['showFPS']);
director.setAnimationInterval(1/this.config['frameRate']);
director.runWithScene(new this.startScene);
return true;
}
})
// don't forget to initialize here
var myApp = new cocos2dApp(HelloScene);
var HelloLayer = cc.Layer.extend({
init:function(){
this._super();
var s = cc.Director.getInstance().getWinSize();
//this layer is the background color
var layer1 = cc.LayerColor.create(new cc.Color4B(0,0,0,255), 1280, 720);
//set the position
layer1.setAnchorPoint(new cc.Point(0.5, 0.5));
var helloLabel = cc.LabelTTF.create("hello world", "Arial", 60);
helloLabel.setPosition(new cc.Point(s.width/2 , s.height/2));
helloLabel.setColor(new cc.Color3B(0,255,0))
//add the text to the previous layer1
layer1.addChild(helloLabel);
this.addChild(layer1);
return this;
}
})
var HelloScene = cc.Scene.extend({
onEnter:function(){
this._super();
this.addChild(new HelloLayer().init());
}
})