array problem

<!DOCTYPE html>
<html>
<head>
<title>Asteroid Game</title>
<style>
html, body {
  	width:  100%;
  	height: 100%;
  	margin: 0px;
	overflow: hidden;
    	display: block;
}
canvas {
	position:absolute;
	left:0px;
	top:0px;
	padding:0;
    	margin:0;
}
</style>
</head>
<body>
<canvas id="main"></canvas>
<script>


function getMousePos(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
	return {
		x: evt.clientX - rect.left,
		y: evt.clientY - rect.top
	};
}

function Bullet(x,y,rot,vel) {
	this.x = x;
	this.y = y;
	this.rot = rot;
	this.vel = (vel+5);

	this.move = function() {
		this.x += this.vel*Math.cos(this.rot-Math.PI/2);
		this.y += this.vel*Math.sin(this.rot-Math.PI/2);
	}

	this.draw = function() {
		engine.circle(this.x, this.y, 4, "black");

		var c = engine.canvas.getContext('2d');
		c.translate(this.x, this.y);
		c.rotate(this.rot);
		c.beginPath();
		c.strokeStyle="#00FF00";
		c.strokeRect(-5, -5, 10, 10);
		c.closePath();
		c.stroke();
	}
}


var engine = {
	canvas: document.getElementById('main'),
	mousePos: {x:0,y:0},
	mouseDown: false,
	keyDown: {
		w: false,
		s: false,
		a: false,
		d: false,
		sp: false
	},
	bullets: [],

	circle: function(x,y,r,color){
		context = engine.canvas.getContext('2d');
		context.beginPath();
		context.arc(x, y, r, 0, 2*Math.PI);
		context.closePath();
		if(color === undefined) {
			context.stroke();
		} else {
			context.fillStyle=color;
			context.fill();
		}
	},

	player: {
		rot: 0,
		x: 0,
		y: 0,
		velocity: 0,
		maxVelocity: 5,
		accel: 1,
		fire: 20,
		move: function() {
			// obsolete mouse controls
			/*if(engine.mouseDown == true && typeof engine.mousePos.x !== undefined) {
				dX = engine.mousePos.x-this.x;
				dY = engine.mousePos.y-this.y;
				dR = Math.sqrt((dX*dX)+(dY*dY));
				this.rot = Math.asin(dX/dR);
				if(dY >= 0) { this.rot-=Math.PI; this.rot=-this.rot }
			}*/

			if(engine.keyDown.w == true && engine.keyDown.s == false) {
				if(this.velocity<this.maxVelocity){ this.velocity += this.accel; }
			} else if(engine.keyDown.s == true && engine.keyDown.w == false) {
				if(this.velocity>0) { this.velocity -= this.accel; }
			}
			if(engine.keyDown.a == true && engine.keyDown.d == false) {
				this.rot-=Math.PI/24;
			} else if(engine.keyDown.d == true && engine.keyDown.a == false) {
				this.rot+=Math.PI/24;
			}
			this.x += this.velocity*Math.cos(this.rot-Math.PI/2);
			this.y += this.velocity*Math.sin(this.rot-Math.PI/2);
		},
		draw: function() {
			context = engine.canvas.getContext('2d');
			context.save();
			context.translate(this.x,this.y);
			context.rotate(this.rot);
			context.beginPath();
			context.moveTo(-30, 50);
			context.lineTo(30,  50);
			context.lineTo(0,   -50);
			context.lineTo(-30, 50);
			context.closePath();
			context.stroke();
			context.restore();

			// obsolete mouse controls
			/*if(engine.mouseDown == true && typeof engine.mousePos.x !== undefined) {
				context.beginPath();
				context.moveTo(0,0);
				dX = engine.mousePos.x-this.x;
				dY = engine.mousePos.y-this.y;
				dR = Math.sqrt((dX*dX)+(dY*dY));
				context.lineTo(0,-dR);
				context.closePath();
				context.stroke();
			}*/
		},
		shoot: function() {
			if(engine.keyDown.sp == true) {
				if(this.fire > 20) {
					engine.bullets.unshift(new Bullet(this.x, this.y, this.rot, this.velocity));
					this.fire = 0;
				} else {
					this.fire++
				}
			}
			for(i = 0; i < engine.bullets.length; i++) {
				engine.bullets[i].move();
				engine.bullets[i].draw();
				if(engine.bullets[i].x > engine.canvas.width+5 || engine.bullets[i].x < -5
				|| engine.bullets[i].y > engine.canvas.height+5  || engine.bullets[i].y < -5) {
					console.log('bullet gone, '+i);
					engine.bullets.splice(i, 1);
				}
			}
		},
		update: function() {
			this.move();
			this.draw();
			this.shoot();
		}
	},

	draw: function() {
		engine.clear();
		engine.circle(engine.canvas.width/8, engine.canvas.height/2, 50, "black");
		engine.player.update();
	},

	resizeCanvas: function() {
		engine.canvas.width = window.innerWidth;
	        engine.canvas.height = window.innerHeight;
	},

	clear: function() {
		engine.canvas.width = engine.canvas.width;
		engine.canvas.height = engine.canvas.height;
	},

	init: function() {
		engine.resizeCanvas();
		var framerate = 1000/30;
		engine.player.x = engine.canvas.width/2;
		engine.player.y = engine.canvas.height/2;

		window.setInterval(engine.draw,framerate);
		window.addEventListener('resize', engine.resizeCanvas, false);
		engine.canvas.addEventListener('mousemove', function(evt) {
			engine.mousePos = getMousePos(engine.canvas, evt);
		});
		engine.canvas.addEventListener('mousedown', function(evt) {
			engine.mouseDown = true;
		});
		engine.canvas.addEventListener('mouseup', function(evt) {
			engine.mouseDown = false;
		});
		window.addEventListener('keydown', function(evt) {
			if(evt.key == 'w' || evt.key == 'W') { engine.keyDown.w = true; }
			if(evt.key == 'a' || evt.key == 'A') { engine.keyDown.a = true; }
			if(evt.key == 's' || evt.key == 'S') { engine.keyDown.s = true; }
			if(evt.key == 'd' || evt.key == 'D') { engine.keyDown.d = true; }
			if(evt.key == " " || evt.key == " ") { engine.keyDown.sp = true;}
		});
		window.addEventListener('keyup', function(evt) {
			if(evt.key == 'w' || evt.key == 'W') { engine.keyDown.w = false; }
			if(evt.key == 'a' || evt.key == 'A') { engine.keyDown.a = false; }
			if(evt.key == 's' || evt.key == 'S') { engine.keyDown.s = false; }
			if(evt.key == 'd' || evt.key == 'D') { engine.keyDown.d = false; }
			if(evt.key == " " || evt.key == " ") { engine.keyDown.sp = false;}
		});
	}
}

window.onload = engine.init();

</script>
</body>
</html>