I'm using crafty.js(HTML5 Engine for games) but it won't load. I just get a white screen! Everything is set up right and i'm using Chrome. I checked if all the file names are ok, and they are. Can someone help me please? My code:
<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>I am doing then exact samething. I chnaged the javascript link at the top.
<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty.js"></script>
Do it stages so you can trouble shoot your code.