个人中心
gpt4 book ai didi

javascript - Crafty.js 显示白屏

转载 作者：行者123 更新时间：2023-11-28 07:53:27 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： javascript - Selenium WebDriver - 通过 Javascript 或 onclick 查找元素
文章推荐： c++ - 段错误 : gdb
文章推荐： c++ - WinAPI - 如何组织大量的 HWND 对象？
文章推荐： c++ - 仅在单击按钮时检查事件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com