1
我正在使用crafty.js（遊戲的HTML5引擎），但它不會加載。我只是得到一個白色的屏幕！ 一切都設置正確，我使用的是Chrome。我檢查了是否所有的文件名都可以，而且是。有人能幫助我嗎？ 我的代碼：Crafty.js顯示白色屏幕
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://raw.github.com/craftyjs/Crafty/release/dist/crafty.js"></script>
<script type="text/javascript" src="Box2dWeb.js"></script>
<script type="text/javascript" src="box2d.js"></script>
<title>Knights and Ninjas</title>
</head>
<body>
\t <div onload="Load();" id="game"></div>
\t <script type="text/javascript">
\t function Load()
\t {
\t \t Crafty.init(400, 320);
\t \t Crafty.audio.add("bgm", "Ambler.mp3");
\t \t Crafty.audio.play("bgm", -1); \t
\t \t \t
\t \t Crafty.scene("TitleScene", function()
\t \t {
\t \t \t Crafty.background("#000");
\t \t \t Crafty.sprite("banner.png", {introbanner:[0,0,320,105]});
\t \t \t var banner=Crafty.e("2D, DOM, introbanner");
\t \t \t banner.x=30;
\t \t \t banner.y=200;
\t \t \t banner.bind('KeyDown', function(e)
\t \t \t {
\t \t \t \t if(e.key==Crafty.keys.RIGHT_ARROW)
\t \t \t \t {
\t \t \t \t \t Crafty.enterScene("GameScene");
\t \t \t \t }
\t \t \t });
\t \t });
\t }
\t \t
\t \t
\t \t
\t \t \t Crafty.c("PaddleControls",
\t \t \t {
\t \t \t \t init: function()
\t \t \t \t {
\t \t \t \t \t this.requires("Keyboard"); \t
\t \t \t \t },
\t \t \t \t paddleControls: function()
\t \t \t \t { \t
\t \t \t \t \t this.bind("EnterFrame", function()
\t \t \t \t \t { \t
\t \t \t \t \t
\t \t \t \t \t if (this.isDown("D"))
\t \t \t \t \t {
\t \t \t \t \t \t var myVal=this.body.GetPosition();
\t \t \t \t \t \t return this.body.SetPositionAndAngle(new b2Vec2(myVal.x+0.1, myVal.y), this.body.GetAngle()); \t
\t \t \t \t \t }
\t \t \t \t \t if (this.isDown("A"))
\t \t \t \t \t {
\t \t \t \t \t \t var myVal=this.body.GetPosition();
\t \t \t \t \t \t return this.body.SetPositionAndAngle(new b2Vec2(myVal.x-0.1, myVal.y), this.body.GetAngle()); \t
\t \t \t \t \t }
\t \t \t \t \t if (this.isDown("W") && window.canJump==true)
\t \t \t \t \t {
\t \t \t \t \t \t window.canJump=false;
\t \t \t \t \t \t return this.body.ApplyImpulse(new b2Vec2(0, -20), this.body.GetWorldCenter());
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t return this;
\t \t \t \t }});
\t \t
\t \t Crafty.c("JumpWall", function()
\t \t {});
\t \t
\t \t Crafty.c("LethalEntity", function()
\t \t {});
\t \t
\t \t Crafty.scene("GameScene",function()
\t \t {
\t \t \t Crafty.background("#F0F");
\t \t \t //Gravity X, Gravity Y, Pixel to Meter, speed up enabled
\t \t \t Crafty.box2D.init(0, 1, 32, false);
\t \t \t
\t \t \t Crafty.sprite("Wall.png", {wallsprite:[0,0,220,12]});
\t \t \t
\t \t \t Crafty.sprite("Back.png", {backsprite:[0,0,400,320]});
\t \t \t var back=Crafty.e("2D, Canvas, backsprite");
\t \t \t
\t \t \t var wall1=Crafty.e("2D, Canvas, Box2D, wallsprite, JumpWall");
\t \t \t wall1.x=13;
\t \t \t wall1.y=100;
\t \t \t //color("green").attr({x: 13, y: 100, w: 220, h: 12});
\t \t \t wall1.box2d({ bodyType: 'static' }); //Must be after positioning
\t \t \t var wall2=Crafty.e("2D, Canvas, Box2D, wallsprite, JumpWall");
\t \t \t wall2.x=140;
\t \t \t wall2.y=200;
\t \t \t //wall2.color("green").attr({x: 140, y: 200, w: 220, h: 12});
\t \t \t wall2.box2d({ bodyType: 'static' });
\t \t \t
\t \t \t Crafty.sprite("Knight2.png", {knight:[0,0,30,32]});
\t \t \t var knight=Crafty.e("2D, Canvas, knight, Box2D, PaddleControls");
\t \t \t knight.y=200;
\t \t \t knight.x=30;
\t \t \t knight.paddleControls();
\t \t \t knight.box2d({ bodyType: 'dynamic' });
\t \t \t knight.body.SetFixedRotation(true);
\t \t \t knight.onContact("JumpWall", function()
\t \t \t {
\t \t \t \t window.canJump=true;
\t \t \t });
\t \t \t
\t \t \t Crafty.e("2D, Canvas, Color, Box2D").attr({x: 1, y: 1, w: 10, h: 320}).box2d({ bodyType: 'static' });
\t \t \t Crafty.e("2D, Canvas, Color, Box2D").attr({x: 390, y:1, w: 10, h: 320}).box2d({ bodyType: 'static' });
\t \t \t Crafty.e("2D, Canvas, Color, Box2D, JumpWall").attr({x: 1, y: 1, w: 400, h: 10}).box2d({ bodyType: 'static' });
\t \t \t Crafty.e("2D, Canvas, Color, Box2D, JumpWall").attr({x: 1, y: 310, w: 400, h: 10}).box2d({ bodyType: 'static' });
\t \t \t
\t \t \t Crafty.sprite("ninjas.png", {redninja:[0,0,32,30], blueninja:[32,0,43,30]});
\t \t \t
\t \t \t window.redninja=Crafty.e("2D, Canvas, redninja, Box2D, LethalEntity");
\t \t \t window.redninja.y=50;
\t \t \t window.redninja.x=150;
\t \t \t window.redninja.box2d({ bodyType: 'kinematic' });
\t \t \t window.redninja.body.SetLinearVelocity(new b2Vec2(0.33, 0));
\t \t \t knight.onContact("LethalEntity", function()
\t \t \t {
\t \t \t \t if(this.isDown("S")==false)
\t \t \t \t \t Crafty.enterScene("TitleScene");
\t \t \t });
\t \t \t
\t \t \t window.redninja.bind("EnterFrame", function()
\t \t \t \t {
\t \t \t \t \t var myVal=this.body.GetPosition();
\t \t \t \t \t if(myVal.x>400/32) //convert pixels to meters
\t \t \t \t \t {
\t \t \t \t \t \t this.body.SetPositionAndAngle(new b2Vec2(0,50/32), this.body.GetAngle());
\t \t \t \t \t }
\t \t \t \t });
\t \t \t \t
\t \t \t window.blueninja=Crafty.e("2D, Canvas, blueninja, Box2D, LethalEntity");
\t \t \t window.blueninja.y=50;
\t \t \t window.blueninja.x=30;
\t \t \t window.blueninja.box2d({ bodyType: 'dynamic' });
\t \t \t window.blueninja.bind("EnterFrame", function()
\t \t \t \t \t {
\t \t \t \t \t \t var myVal=this.body.GetPosition();
\t \t \t \t \t \t return this.body.SetPositionAndAngle(new b2Vec2(myVal.x+0.1, myVal.y), this.body.GetAngle()); \t
\t \t \t \t \t });
\t \t \t
\t \t \t
\t \t });
\t \t Crafty.enterScene("TitleScene");
\t \t
\t };
\t </script>
</body>
</html>
我通過更改鏈接到craft.js文件修復了它，但現在我只能得到一個粉紅色的屏幕.. – Marco 2014-10-20 14:22:29
請參閱[另一個最小堆棧片段]（http://stackoverflow.com/a/30141258/3041008）那顯示灰色背景 – mucaho 2015-05-09 14:52:01