<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title> Ship </title>
<style>
#c { border: 1px solid black; }
</style>
</head>
<body>
<canvas id='c' width=1024 height=768></canvas>
<script>
var ship = {
x : 10,
y : 10,
dx : .5,
dy : .2,
angle : 0,
da : 1,
draw : function() {
var ctx = document.getElementById("c").getContext("2d");
ctx.clearRect(0,0,1024,768);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.save();
ctx.translate(this.x,this.y);
ctx.scale(.5,.5);
ctx.rotate(this.angle*Math.PI/180);
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(-100,50);
ctx.lineTo(-100,-50);
ctx.closePath();
ctx.stroke();
ctx.restore();
},
update : function() {
this.x = this.x + this.dx;
this.y = this.y + this.dy;
this.angle = this.angle + this.da;
}
};
function update() {
ship.draw();
ship.update();
setTimeout(update, 33);
}
setTimeout(update, 33);
</script>
</body>
</html>