Crafty.js отображает белый экран

Я использую 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 ответ

Решение

Я делаю то же самое. Я поменял ссылку на JavaScript в верхней части.

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

Делайте это поэтапно, чтобы вы могли с трудом снимать код

Источник
Другие вопросы по тегам