<!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(); }