<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Follow Mouse</title>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="ball.js"></script>
<style type="text/css">
body{background-color: silver;}
#canvas{background-color: black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea name="" id="log" cols="30" rows="10"></textarea>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas"),
context=canvas.getContext("2d"),
ship=new Ship(),
vr=0,
vx=0,
vy=0,
thrust=0;
ship.x=canvas.width/2;
ship.y=canvas.height/2;
window.addEventListener("keydown", function(event){
switch(event.keyCode){
case 37:
vr=-3;
break;
case 39:
vr=3;
break;
case 38:
thrust=0.05;
ship.showFlame=true;
break;
}
}, false)
window.addEventListener("keyup", function(){
vr=0;
thrust=0;
ship.showFrame=false;
}, false);
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
ship.rotation+=vr*Math.PI/180;
var angle=ship.rotation,
ax=Math.cos(angle)*thrust,
ay=Math.sin(angle)*thrust,
left=0,
right=canvas.width,
top=0,
bottom=canvas.height;
vx+=ax;
vy+=ay;
ship.x+=vx;
ship.y+=vy;
if (ship.x-ship.width/2>right) {
ship.x=ship.width/2;
}else if(ship.x+ship.width/2<left){
ship.x=right+ship.width/2;
}
if (ship.y-ship.height/2>bottom) {
ship.y=top-ship.height/2;
}else if(ship.y<top-ship.height/2){
ship.y=bottom+ship.height/2;
}
ship.draw(context);
}())
}
</script>
</body>
</html>
function Ship(){
this.x=0;
this.y=0;
this.width=25;
this.height=20;
this.rotation=0;
this.showFlame=false;
}
Ship.prototype.draw=function(context){
context.save();
context.translate(this.x,this.y);
context.rotate(this.rotation);
context.lineWidth=1;
context.strokeStyle="white";
context.beginPath();
context.moveTo(10,0);
context.lineTo(-10,10);
context.lineTo(-5,0);
context.lineTo(-10,-10);
context.lineTo(-5,0);
context.lineTo(-10,-10);
context.lineTo(10,0);
context.stroke();
if(this.showFlame){
context.beginPath();
context.moveTo(-7.5,-5);
context.lineTo(-15,0);
context.lineTo(-7.5,5);
context.stroke();
}
context.restore();
}
