Crafty.js显示白色屏幕

时间:2014-10-20 14:10:31

标签: javascript html5 craftyjs

我正在使用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>

1 个答案:

答案 0 :(得分:0)

我正在做同样的事情。我在顶部打开了javascript链接。

myConditionVariable.wait(myMutexLock, [&] return Stop || haveWorkToDo(); );
if (Stop)
   // Terminate Thread
// continue to work

执行此操作以便您可以解决代码问题。