asteroid wont spawn

// creates a canvas to play on
var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");

/////////////////////////////////////////////////////////////DELTA TIME///////////////////////////////////////////////////////////////////////////////////
var startFrameMillis = Date.now();
var endFrameMillis = Date.now();
function getDeltaTime()                 // Only call this function once per frame
	{
	endFrameMillis = startFrameMillis;
	startFrameMillis = Date.now();
	var deltaTime = (startFrameMillis - endFrameMillis) * 0.001;
	if (deltaTime > 1)                       // validate that the delta is within range
		{
		deltaTime = 1;
		}
	return deltaTime;
	}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


// load the image to use for the tiled background
var grass = document.createElement("img");
grass.src = "grass.png";


// create the tiled background
var background = [];
for(var y = 0; y < 15; y++)
	{
	background[y] = [];
	for(var x = 0; x < 20; x++)
	background[y][x] = grass;
	}

	//draw an awesome spacey background on top of tiles and canvas
var backgroundImage = document.createElement("img");
backgroundImage.src = "space.pic.png";



// set up some event handlers to process keyboard input
window.addEventListener('keydown', function(evt) { onKeyDown(evt); }, false);
window.addEventListener('keyup', function(evt) { onKeyUp(evt); }, false);



var SCREEN_WIDTH = canvas.width;
var SCREEN_HEIGHT = canvas.height;
var ASTEROID_SPEED = 200;
var PLAYER_SPEED = 100;
var PLAYER_TURN_SPEED = 0.05;
var BULLET_SPEED = 200;



// Player image reference & position
// this creates the player object and assigns it some properties
var player = {
	image: document.createElement("img"),
	x:SCREEN_WIDTH/2,
	y:SCREEN_HEIGHT/2,
	width: 93,
	height: 80,
	directionX: 0,
	directionY: 0,
	angularDirection: 0,
	rotation: 0,
	isDead: false
};
// set the image for the player to use
player.image.src = "ship.png";


// create the asteroids array or collection
var asteroids = [];
for(var i=0; i<8; i++)
{
	document.writeln(asteroids[i] + "</BR>")
}

// rand(floor, ceil)
// Return a random number within the range of the two input variables

function rand(floor, ceil)
	{
	return Math.floor( (Math.random()* (ceil-floor)) +floor );
	}


// Create a new random asteroid and add it to our asteroids array.
// We'll give the asteroid a random position (just off screen) and
// set it moving towards the center of the screen

spawnTimer = 0;
function spawnAsteroid()
{
	// make a random variable to specify which asteroid image to use
	// (small, mediam or large)
	var type = rand(0,3);

	// create the new asteroid

	var asteroid = {};
	asteroid.image = document.createElement("img");
	asteroid.image.src = "rock_large.png";
	asteroid.width = 69;
	asteroid.height = 75;

	// to set a random position just off screen, we'll start at the centre of the
	// screen then move in a random direction by the width of the screen

	var x = SCREEN_WIDTH/2;
	var y = SCREEN_HEIGHT/2;
	var dirX = rand(-10,10);
	var dirY = rand(-10,10);
	// 'normalize' the direction (the hypotenuse of the triangle formed
	// by x,y will equal 1)
	var magnitude = (dirX * dirX) + (dirY * dirY);

	if(magnitude != 0)
			{
			var oneOverMag = 1 / Math.sqrt(magnitude);
			dirX *= oneOverMag;
			dirY *= oneOverMag;
			}

	// now we can multiply the dirX/Y by the screen width to move that amount from
	// the centre of the screen

	var movX = dirX * SCREEN_WIDTH;
	var movY = dirY * SCREEN_HEIGHT;

	// add the direction to the original position to get the starting position of the
	// asteroid

	asteroid.x = x + movX;
	asteroid.y = y + movY;

	// now, the easy way to set the velocity so that the asteroid moves towards the
	// centre of the screen is to just reverse the direction we found earlier

	asteroid.velocityX = -dirX * ASTEROID_SPEED;
	asteroid.velocityY = -dirY * ASTEROID_SPEED;

	// finally we can add our new asteroid to the end of our asteroids array

	asteroids.push(asteroid);
}


// Bullet Array or collection & timer
var bullets = [];

var shootTimer = 0;

function playerShoot()
{
var bullet = {
		image: document.createElement("img"),
		x: player.x,
		y: player.y,
		width: 5,
		height: 5,
		velocityX: 0,
		velocityY: 0
	};
	bullet.image.src = "bullet.png";

	var velX = 0;
	var velY = 1;

	var s = Math.sin( player.rotation );
	var c = Math.cos( player.rotation );

	var xVel = ( velX * c ) - ( velY * s );
	var yVel = ( velX * s ) + ( velY * c );

	bullet.velocityX = xVel * BULLET_SPEED;
	bullet.velocityY = yVel * BULLET_SPEED;

	bullets.push ( bullet );
}


// key constants
// Go here for a list of key codes:
// https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent
var KEY_SPACE = 32;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_A = 65;
var KEY_D = 68;


// Key functions
function onKeyDown(event)
{
if(event.keyCode == KEY_UP)
	{
	player.directionY = 1;
	}
if(event.keyCode == KEY_DOWN)
	{
	player.directionY = -1;
	}
if(event.keyCode == KEY_LEFT)
	{
	player.angularDirection = -1;
	}
if(event.keyCode == KEY_RIGHT)
	{
	player.angularDirection = 1;
	}
if(event.keyCode == KEY_A)
	{
	player.directionX = 1;
	}
if(event.keycode == KEY_D)
	{
	player.directionX = -1;
	}
if(event.keyCode == KEY_SPACE && shootTimer <= 0)
	{
	shootTimer += 0.2;
	playerShoot();
	}
}



function onKeyUp(event)
{
if(event.keyCode == KEY_UP)
	{
	player.directionY = 0;
	}
if(event.keyCode == KEY_DOWN)
	{
	player.directionY = 0;
	}
if(event.keyCode == KEY_LEFT)
	{
	player.angularDirection = 0;
	}
if(event.keyCode == KEY_RIGHT)
	{
	player.angularDirection = 0;
	}
if(event.keyCode == KEY_A)
	{
	player.directionX = 0;
	}
if(event.keycode == KEY_D)
	{
	player.directionX = 0;
	}
if(event.keyCode == KEY_SPACE)
	{

	}
}

// tests if two rectangles are intersecting.
// Pass in the x,y coordinates, width and height of each rectangle.
// Returns 'true' if the rectangles are intersecting
function intersects(x1, y1, w1, h1, x2, y2, w2, h2)
{
if( y2 + h2 < y1     ||
    x2 + w2 < x1     ||
    x2 > x1 + w1     ||
    y2 > y1 + h1 )
	{
	return false;
	}
return true;
}


////////////////////////////////////////////////////////////////FUNCTION RUN/////////////////////////////////////////////////////////////////////////////
function run()
{
context.fillStyle = "#ccc";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage ( backgroundImage, 0, 0 )


var deltaTime = getDeltaTime();

// draw the tiled background (make sure you do this first, so everything
// else in the scene will be drawn on top of the tiled background)

for (var y = 0; y < 15; y++)
	{
	for (var x = 0; x < 20; x++)
		{
		context.drawImage(background[y][x], x*32, y*32);
		}
	}
	context.drawImage ( backgroundImage, 0, 0 )
// update the shoot timer

if( shootTimer > 0 )
	{
	shootTimer -= deltaTime;
	}

// update all the bullets

for ( var i=0; i < bullets.length; i++ )
{
bullets[i].x += bullets[i].velocityX * deltaTime;
bullets[i].y += bullets[i].velocityY * deltaTime;
}

// check if the bullet has gone out of the screen boundaries
// and if so kill it
for ( var i = 0; i < bullets.length; i++)
{
if ( bullets[i].x < -bullets[i].width ||
bullets[i].x > SCREEN_WIDTH ||
bullets[i].y < -bullets[i].height ||
bullets[i].y > SCREEN_HEIGHT)
	{
	bullets.splice( i, 1);
	break;
	}
}

// draw all the bullets
for ( var i = 0; i < bullets.length; i++ )
{
context.drawImage( bullets[i].image,
bullets[i].x - bullets[i].width/2,
bullets[i].y - bullets[i].height/2);
}

// update all the asteroids - Spawner

for(var i = 0; i < asteroids.length; i++)
{
var velX = asteroids[i].dirX;
var velY = asteroids[i].dirY;
asteroids[i].posX = asteroids[i].posX + velX * deltaTime;
asteroids[i].posY = asteroids[i].posY + velY * deltaTime;
}
{
	for (var i = 0; i < asteroids.length; i++)
	{
		context.drawImage( asteroids[i].image, asteroids[i].width/2, asteroids[i].height/2);
		context.beginPath();
		context.rect(asteroids[i].posX-(asteroids[i].width/2), asteroids[i].posY-(asteroids[i].height/2),
		asteroids[i].width, asteroids[i].height);
		context.stroke();
	}

	spawnTimer -= deltaTime;

	if (spawnTimer <= 0)
	{
		spawnTimer = 1;
		spawnAsteroid();
	}
}


//////////////////player positions
if (player.isDead == false)
// calculate sin and cos for the player's current rotation
{
var s = Math.sin(player.rotation);
var c = Math.cos(player.rotation);

// figure out what the player's velocity will be based on the current rotation
// (so that if the ship is moving forward, then it will move forward according to its
// rotation. Without this, the ship would just move up the screen when we pressed 'up',
// regardless of which way it was rotated)
// for an explanation of this formula, see http://en.wikipedia.org/wiki/Rotation_matrix
var xDir = (player.directionX * c) - (player.directionY * s);
var yDir = (player.directionX * s) + (player.directionY * c);
var xVel = xDir * PLAYER_SPEED * deltaTime;
var yVel = yDir * PLAYER_SPEED * deltaTime;
player.x += xVel;
player.y += yVel;
player.rotation += player.angularDirection * PLAYER_TURN_SPEED;

context.save();
context.translate(player.x, player.y);
context.rotate(player.rotation);
context.drawImage(
player.image, -player.width/2, -player.height/2);
context.restore();
}

//Wrapping Player Experiments
if (player.x > SCREEN_WIDTH)
	{
		player.x = 0;
	}
if (player.x < 0)
	{
		player.x = SCREEN_WIDTH;
	}
if (player.y > SCREEN_HEIGHT)
	{
		player.y = 0;
	}
if (player.y < 0)
	{
		player.y = SCREEN_HEIGHT;
	}

//Player to Asteroid Collision Checking
for (var i = 0; i < asteroids.length; i++)
{
	if (player.isDead == false)
	{
			if (intersects (player.x, player.y, player.height/2, player.width/2,
			asteroids[i].x, asteroids[i].y, asteroids[i].width, asteroids[i].height) == true)
		{
			asteroids.splice( i, 1);
			player.isDead = true;
			break;
		}
	}
}


//Bullet to Asteroid Collision Checking
for	(var i = 0; i < asteroids.length; i++)
{
	for (var j = 0; j < bullets.length; j++)
	{
		if (intersects (bullets[j].x, bullets[j].y, bullets[j].width, bullets[j].height,
		asteroids[i].x, asteroids[i].y, asteroids[i].width, asteroids[i].height) == true)
		{
			asteroids.splice( i, 1);
			bullets.splice( j, 1);
			break;
		}
	}
}
}
//60FPS framework
(function()
{
var onEachFrame;

if (window.requestAnimationFrame)
{
  onEachFrame = function(cb)
  {
   var _cb = function() { cb(); window.requestAnimationFrame(_cb); }
   _cb();
  };

}
else if (window.mozRequestAnimationFrame)
	{
	onEachFrame = function(cb) {
		var _cb = function() { cb(); window.mozRequestAnimationFrame(_cb); }
		_cb();
	};

}
else
{
	onEachFrame = function(cb)
	{
		setInterval(cb, 1000 / 60);
	}
}

	window.onEachFrame = onEachFrame;
})();

window.onEachFrame(run);