我正在使用crafty.js(用于游戏的HTML5引擎),但不会加载。我只有一个白屏!
一切都设置正确,我正在使用Chrome。我检查了所有文件名是否都正确。有谁可以帮助我吗?
我的代码:



<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>
	<div onload="Load();" id="game"></div>
	<script type="text/javascript">
	function Load()
	{
  		Crafty.init(400, 320);
  		Crafty.audio.add("bgm", "Ambler.mp3");
  		Crafty.audio.play("bgm", -1);

  		Crafty.scene("TitleScene", function()
  		{
  			Crafty.background("#000");
  			Crafty.sprite("banner.png", {introbanner:[0,0,320,105]});
  			var banner=Crafty.e("2D, DOM, introbanner");
  			banner.x=30;
  			banner.y=200;
  			banner.bind('KeyDown', function(e)
  			{
  				if(e.key==Crafty.keys.RIGHT_ARROW)
  				{
  					Crafty.enterScene("GameScene");
  				}
  			});
  		});
  	}



  			Crafty.c("PaddleControls",
  			{
				init: function()
				{
					this.requires("Keyboard");
				},
				paddleControls: function()
				{
					this.bind("EnterFrame", function()
					{


					if (this.isDown("D"))
					{
						var myVal=this.body.GetPosition();
						return this.body.SetPositionAndAngle(new b2Vec2(myVal.x+0.1, myVal.y), this.body.GetAngle());
					}
					if (this.isDown("A"))
					{
						var myVal=this.body.GetPosition();
						return this.body.SetPositionAndAngle(new b2Vec2(myVal.x-0.1, myVal.y), this.body.GetAngle());
					}
					if (this.isDown("W") && window.canJump==true)
					{
						window.canJump=false;
						return this.body.ApplyImpulse(new b2Vec2(0, -20), this.body.GetWorldCenter());
					}
				});
				return this;
				}});

  		Crafty.c("JumpWall", function()
  		{});

  		Crafty.c("LethalEntity", function()
  		{});

  		Crafty.scene("GameScene",function()
  		{
  			Crafty.background("#F0F");
  			//Gravity X, Gravity Y, Pixel to Meter, speed up enabled
  			Crafty.box2D.init(0, 1, 32, false);


			Crafty.sprite("Wall.png", {wallsprite:[0,0,220,12]});

  			Crafty.sprite("Back.png", {backsprite:[0,0,400,320]});
  			var back=Crafty.e("2D, Canvas, backsprite");

  			var wall1=Crafty.e("2D, Canvas, Box2D, wallsprite, JumpWall");
  			wall1.x=13;
  			wall1.y=100;
  			//color("green").attr({x: 13, y: 100, w: 220, h: 12});
  			wall1.box2d({ bodyType: 'static' }); //Must be after positioning
  			var wall2=Crafty.e("2D, Canvas, Box2D, wallsprite, JumpWall");
  			wall2.x=140;
  			wall2.y=200;
  			//wall2.color("green").attr({x: 140, y: 200, w: 220, h: 12});
  			wall2.box2d({ bodyType: 'static' });

  			Crafty.sprite("Knight2.png", {knight:[0,0,30,32]});
  			var knight=Crafty.e("2D, Canvas, knight, Box2D, PaddleControls");
  			knight.y=200;
  			knight.x=30;
  			knight.paddleControls();
  			knight.box2d({ bodyType: 'dynamic' });
  			knight.body.SetFixedRotation(true);
  			knight.onContact("JumpWall", function()
  			{
  				window.canJump=true;
  			});


  			Crafty.e("2D, Canvas, Color, Box2D").attr({x: 1, y: 1, w: 10, h: 320}).box2d({ bodyType: 'static' });
  			Crafty.e("2D, Canvas, Color, Box2D").attr({x: 390, y:1, w: 10, h: 320}).box2d({ bodyType: 'static' });
  			Crafty.e("2D, Canvas, Color, Box2D, JumpWall").attr({x: 1, y: 1, w: 400, h: 10}).box2d({ bodyType: 'static' });
  			Crafty.e("2D, Canvas, Color, Box2D, JumpWall").attr({x: 1, y: 310, w: 400, h: 10}).box2d({ bodyType: 'static' });

  			Crafty.sprite("ninjas.png", {redninja:[0,0,32,30], blueninja:[32,0,43,30]});

  			window.redninja=Crafty.e("2D, Canvas, redninja, Box2D, LethalEntity");
  			window.redninja.y=50;
  			window.redninja.x=150;
  			window.redninja.box2d({ bodyType: 'kinematic' });
  			window.redninja.body.SetLinearVelocity(new b2Vec2(0.33, 0));
  			knight.onContact("LethalEntity", function()
  			{
  				if(this.isDown("S")==false)
  					Crafty.enterScene("TitleScene");
  			});

  			window.redninja.bind("EnterFrame", function()
				{
					var myVal=this.body.GetPosition();
					if(myVal.x>400/32) //convert pixels to meters
					{
					 	this.body.SetPositionAndAngle(new b2Vec2(0,50/32), this.body.GetAngle());
					}
				});

			window.blueninja=Crafty.e("2D, Canvas, blueninja, Box2D, LethalEntity");
			window.blueninja.y=50;
  			window.blueninja.x=30;
			window.blueninja.box2d({ bodyType: 'dynamic' });
			window.blueninja.bind("EnterFrame", function()
					{
						var myVal=this.body.GetPosition();
						return this.body.SetPositionAndAngle(new b2Vec2(myVal.x+0.1, myVal.y), this.body.GetAngle());
					});


  		});
  		Crafty.enterScene("TitleScene");

	};
	</script>

</body>
</html>

最佳答案

我在做同样的事情。我更改了顶部的javascript链接。

<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty.js"></script>

分阶段执行,以便您可以避免编写代码。

关于javascript - Crafty.js显示白屏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26467698/

10-12 13:00