Code

var gameWidth  = canvasShip.width;
var gameHeight = canvasShip.height;

var canFire = true;
var canFireInterval = 20;
var canFireTimer = 20;

var bgY1 = 0;
var bgY2 = gameHeight * -1;
var enemy1SpawnInterval = 10;
var enemy1SpawnTimer = 10;
var canSpawn = true;

var missileSpawnInterval = 15;
var missileSpawnTimer = 15;

var playerDead = false;

var blink = true;
var blinkTimer = 20;
var blinkInterval = 20;

var points = 0;
var lives = 3;

var paused = false;

var hasSelected  = false;
var startSelect = 1;

var player = new ship();
var enemies1 = [];
var missiles = [];
var bulletsGreen = [];
var comets1 = [];
var comets2 = [];

var inLoop1 = false;

var inStart = true;

var sprites = new Image();
sprites.src = 'images/spriteSheet.png';
var startScreen = new Image();
startScreen.src = 'images/start_screen.png';
var pauseScreen = new Image();
pauseScreen.src = 'images/pause_screen.png';
var deathScreen = new Image();
deathScreen.src = 'images/death_screen.png';
var background1 = new Image();
background1.src = 'images/background1.png';

var canvasPlayer = document.getElementById('canvasShip');
var ctxPlayer = canvasPlayer.getContext('2d');

var canvasPause = document.getElementById('canvasPause');
var ctxPause = canvasPause.getContext('2d');

var canvasEnemy = document.getElementById('canvasEnemy');
var ctxEnemy = canvasEnemy.getContext('2d');

var canvasBullets = document.getElementById('canvasBullets');
var ctxBullets = canvasBullets.getContext('2d');

var canvasStart = document.getElementById('canvasStart');
var ctxStart = canvasStart.getContext('2d');

var canvasHUD = document.getElementById('canvasHUD');
var ctxHUD = canvasHUD.getContext('2d');

var canvasMissile = document.getElementById('canvasMissile');
var ctxMissile = canvasMissile.getContext('2d');

var canvasEnd = document.getElementById('canvasEnd');
var ctxEnd = canvasHUD.getContext('2d');

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var canvasComets = document.getElementById('canvasComets');
var ctxComets = canvasComets.getContext('2d');


window.requestAnimationFrame = function(){
    return (
        window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(/* function */ callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();

function init() {
	window.requestAnimationFrame(startingLoop);
}

onload = init();

//Check if a key is pressed
document.addEventListener('keydown',checkKeyDown,false);
document.addEventListener('keyup',checkKeyUp,false);

//Is a key down variables
var isRightKey = false;
var isLeftKey = false;
var isUpKey = false;
var isDownKey = false;
var isSpacebar = false;
var isEnterKey = false;
var isEscKey = false;

//Clear any canvas
function clearCtx(canvas) {
	canvas.clearRect(0,0,gameWidth,gameHeight);
}

//Check collision of two rectangles
function rect_collision(x1, y1, w1, h1, x2, y2, h2, w2) {
    //var top1 = y1;
    //var bottom1 = y1 + h1;
    //var left1 = x1;
    //var right1 = x1 + w1;
    //var top2 = y2;
    //var bottom2 = y2 + h2;
    //var left2 = x2;
    //var right2 = x2 + w2;
	if (!(x1 + w1 -25 < x2) &&
           !(x2 + w2 < x1) &&
           !(y1 + h1 < y2) &&
           !(y2 + h2 < y1)) {
		//console.log("Top 1 " + top1 + " Bottom 1 " + bottom1 + " Top 2 " + top2 + " Bottom 2 " + bottom2 + " Left 1 " + left1 + " Right 1 " + right1 + " Left 2 " + left2 + " Right2 " + right2);
		return true;

	}

    return false;
}


//Ship object, the player
function ship() {
	this.speed = 7;
	this.width = 100;
	this.height = 75;
	this.drawX = gameWidth/2 - this.width/2;
	this.drawY = gameHeight - this.height - 5;
	this.inGame = true;
}

ship.prototype.draw = function() {
	if(this.inGame) {
		clearCtx(ctxPlayer);
		var srcX;
		var srcY;
		if(isRightKey && !isLeftKey) {
			srcX = 0;
			srcY = 75;
		} else if (isLeftKey && !isRightKey) {
			srcX = 0;
			srcY = 153;
		} else {
			srcX= 0;
			srcY = 0;
		}
	var translateX= this.drawX+(this.width/2);
	var translateY= this.drawY+(this.height/2);

	ctxPlayer.drawImage(sprites,srcX,srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
	} else {
		clearCtx(ctxPlayer);
	}
};


function Enemy1() {
	this.height = 50;
	this.width = 100;
	this.inGame = true;
	this.drawX = (Math.random() * (gameWidth - this.width));
	this.drawY = this.height * -1;
	this.srcX = 100;
	this.srcY = 0;

}

function drawEnemies1() {
	clearCtx(ctxEnemy);
	for (i=0;i<enemies1.length;i++) {
		if(enemies1[i].inGame) {
			if(enemies1[i].drawY > gameHeight) {
				enemies1[i].inGame = false;
			}
			ctxEnemy.drawImage(sprites,100,0,enemies1[i].width,enemies1[i].height,enemies1[i].drawX,enemies1[i].drawY, enemies1[i].width, enemies1[i].height);
			enemies1[i].drawY += 5;
		}
	}
}

function showEnemy1(x) {
	var spawned = 0;
	for(i=0;i<enemies1.length;i++) {
		if(!enemies1[i].inGame) {
			if(spawned<x) {
				enemies1[i] = new Enemy1();
				spawned++;
			}
		}
	}
	spawnEnemies1(x-spawned);
}

function spawnEnemies1(x) {
	for (i=0;i<x;i++) {
		enemies1[enemies1.length] = new Enemy1();

	}
}

//Functions that execute things every frame.
function pausedLoop(time) {
	if (isEscKey) {
		ctxPause.drawImage(pauseScreen,0,0);
		setTimeout(function () {
    		window.requestAnimationFrame(pausedLoop);
    	}, 10);
    	return;
	} else {
		clearCtx(ctxPause);
		setTimeout(function () {
    		if(inLoop1) window.requestAnimationFrame(loop1);
    	}, 10);
    	return;
	}
	setTimeout(function () {
    	if(inLoop1) window.requestAnimationFrame(loop1);
    }, 10);
}
function loop1(time) {
	drawBg();
    if (isRightKey) {
    	if(player.drawX + player.width <= gameWidth) {
    		player.drawX+=player.speed;
    	}
    }
    if (isLeftKey) {
    	if(player.drawX >= 0) {
    		player.drawX-=player.speed;
    	}
    }
    if (isEscKey) {
    	paused = true;
    }

    //Timer to check if you can fire or not.
    if(!canFire) {
    	canFireTimer++;
    	if(canFireTimer >= canFireInterval) {
    		canFire = true;
    	}
    }
    //End timer

    if (isSpacebar) {
    	if(canFire) {
    		if(player.inGame) {
	    		showBulletGreen();
	   			canFire = false;
	   			canFireTimer = 0;
	   		}
    	}
    }

    //Timer to know when to try to spawn an enemy
    enemy1SpawnTimer++;
    missileSpawnTimer++;
    if(enemy1SpawnTimer > enemy1SpawnInterval) {
    	if(canSpawn) {
	    	checkSpawnEnemy1();
	    	enemy1SpawnTimer = 0;
	    }
    }
     if(missileSpawnTimer > missileSpawnInterval) {
    	if(canSpawn) {
	    	checkSpawnMissile();
	    	missileSpawnTimer = 0;
	    }
    }
    if(!canSpawn) {
    	var outs = 0;
    	for(i=0;i<enemies1.length;i++) {
    		if(!enemies1[i].inGame) outs++;
    	}
    	if(outs === enemies1.length){
    		canSpawn = true;
    		if(lives>=1) {
    			player = new ship();
    		} else {
    			playerDead = true;
    		}
    	}
    }
    drawHUD();
    checkPlayerHit();
    player.draw();
    drawBulletsGreen();
    drawEnemies1();
    drawMissiles();
    checkBulletGreenHit();
    setTimeout(function () {
    	if(isEscKey){
    		window.requestAnimationFrame(pausedLoop);
    		//Only layers above pause
    		clearCtx(ctxMissiles);
    		return;
    	}
    	if(playerDead) {
    		window.requestAnimationFrame(endLoop);
    		clearCtx(ctxHUD);
    		clearCtx(ctxEnemy);
    		clearCtx(ctxPlayer);
    		clearCtx(ctxBullets);
    		clearCtx(ctxMissile);
    		return;
    	} else if(inLoop1) window.requestAnimationFrame(loop1);

    }, 10);
}

function endLoop(time) {
	if(isEnterKey) playerDead = false;
	if (playerDead) {
		clearCtx(ctxEnd);
		ctxEnd.drawImage(deathScreen,0,0);
		ctxEnd.fillStyle = "black";
		ctxEnd.font = "bold 60px Arial";
		var textX = 200;
		if(points > 9 && points < 100) {
			textX -= 15;
		} else if (points > 99 && points < 1000) {
			textX -= 35;
		}
		ctxEnd.fillText("You Scored: " + points, textX, 320);
		blinkTimer++;
		if(blinkTimer > blinkInterval) {
			if(blink) blink = false;
			else if(!blink) blink = true;
			blinkTimer = 0;
		}
		if(blink){
			ctxEnd.drawImage(sprites, 110, 70, 90, 60, 150, 383, 70, 45);
		}
		setTimeout(function () {
    		window.requestAnimationFrame(endLoop);
    	}, 10);
    	return;
	} else {
		clearCtx(ctxEnd);
		resetData();
		setTimeout(function () {
    		window.requestAnimationFrame(loop1);
    	}, 10);
    	return;
	}
	setTimeout(function () {
    	if(inLoop1) window.requestAnimationFrame(loop1);
    }, 10);
}

function startingLoop(time) {
	ctxStart.drawImage(startScreen, 0,0);
	if(isEnterKey) {
		if(startSelect === 1) {
			clearCtx(ctxStart);
			inStart = false;
			inLoop1 = true;
		} else if (startSelect === 2) {
			window.location='jackscode.99k.org';
		}
	}
	if(isUpKey) {
		if(!hasSelected) {
			if(startSelect === 1) startSelect = 2;
			else if(startSelect === 2) startSelect = 1;
			hasSelected = true;
		}
	} else if (isDownKey) {
		if(!hasSelected) {
			if(startSelect === 1) startSelect = 2;
			else if(startSelect === 2) startSelect = 1;
			hasSelected = true;
		}
	}
	drawStartArrow();
	 setTimeout(function () {
	 	if(inStart) window.requestAnimationFrame(startingLoop);
    	if(inLoop1) {
    		window.requestAnimationFrame(loop1);
    		clearCtx(ctxStart);
    	}
    }, 10);
}

//Draw the HUD
function drawHUD() {
	clearCtx(ctxHUD);
	ctxHUD.fillStyle = "white";
	ctxHUD.font = "bold 20px Arial";
	ctxHUD.fillText("Score: " + points , 680, 30);
	var liveX = 5;
	for(i=0;i<lives - 1;i++) {
		ctxHUD.drawImage(sprites, 0, 0, player.width, player.height, liveX, gameHeight - 50, 50, 40);
		liveX+=55;
	}
}
function checkSpawnEnemy1() {
	var randNum = Math.floor(Math.random()*2)
	if(randNum < 1) {
		showEnemy1(1);
	}
}

function checkKeyDown(e) {
	var keyID = (e.keyCode) ? e.keyCode : e.which;
	if (keyID === 38 || keyID === 87) { //38 is up arrow and 87 is W.
		isUpKey = true;
		e.preventDefault();
	}
	if (keyID === 39 || keyID === 68) { //39 is right arrow and 68 is D.
		isRightKey = true;
		e.preventDefault();

	}
	if (keyID === 40 || keyID === 83) { //40 is down arrow and 83 is S.
		isDownKey = true;
		e.preventDefault();

	}
	if (keyID === 37 || keyID === 65) { //37 is left arrow and 65 is A.
		isLeftKey = true;
		e.preventDefault();

	}
	if (keyID === 32) { //Space Bar
		isSpacebar = true;
		e.preventDefault();
	}
	if (keyID === 13) { //Enter key
		isEnterKey = true;
		e.preventDefault();
	}
	if (keyID === 27) {
		if(isEscKey) isEscKey = false;
		else if(!isEscKey) isEscKey = true;
		e.preventDefault();
	}
}

function checkKeyUp(e) {
	var keyID = (e.keyCode) ? e.keyCode : e.which;
	if (keyID === 38 || keyID === 87) { //38 is up arrow and 87 is W.
		isUpKey = false;
		e.preventDefault();

	}
	if (keyID === 39 || keyID === 68) { //39 is right arrow and 68 is D.
		isRightKey = false;
		e.preventDefault();

	}
	if (keyID === 40 || keyID === 83) { //40 is down arrow and 83 is S.
		isDownKey = false;
		e.preventDefault();

	}
	if (keyID === 37 || keyID === 65) { //37 is left arrow and 65 is A.
		isLeftKey = false;
		e.preventDefault();

	}
	if (keyID === 32) { //Space Bar
		isSpacebar = false;
		e.preventDefault();
	}
	if (keyID === 13) { ///Enter Key
		isEnterKey = false;
		e.preventDefault();
	}
	hasSelected = false;
}

function drawStartArrow() {
	blinkTimer++;
	if(blinkTimer > blinkInterval) {
		if(blink) blink = false;
		else if(!blink) blink = true;
		blinkTimer = 0;
	}
	if(blink) {
		if(startSelect === 1) {
			ctxStart.drawImage(sprites, 110, 70, 90, 60, 200, 200, 90, 60);
		} else if (startSelect === 2) {
			ctxStart.drawImage(sprites, 110, 70, 90, 60, 200, 340, 90, 60);
		}
	}
}
function bulletGreen() {
	inGame = false;
	this.width = 9;
	this.height = 34;
	this.srcX = 350;
	this.srcY= 0;
	this.drawX = player.drawX + player.width/2 - 5;
	this.drawY = player.drawY - this.height;
}

function showBulletGreen() {
	for(i=0;i<bulletsGreen.length;i++) {
		if(!bulletsGreen[i].inGame) {
			bulletsGreen[i] = new bulletGreen();
			bulletsGreen[i].inGame = true;
			return;
		}
	}
	spawnBulletGreen();
}

function spawnBulletGreen() {
	var i = bulletsGreen.length;
	bulletsGreen[i] = new bulletGreen;
	bulletsGreen[i].inGame = true;

}

function drawBulletsGreen() {
	clearCtx(ctxBullets);
	for(i=0;i<bulletsGreen.length;i++) {
		if(bulletsGreen[i].inGame) {
			bulletsGreen[i].draw();
			bulletsGreen[i].drawY -= 10;
			if(bulletsGreen[i].drawY + bulletsGreen[i].height < 0) {
				bulletsGreen[i].inGame = false;
			}
		}
	}
}

function checkPlayerHit() {
	for(i=0;i<enemies1.length;i++) {
		if(enemies1[i].inGame && player.inGame){
			var x = enemies1[i];
			var y = player;
			if(rect_collision(x.drawX, x.drawY, x.width, x.height, y.drawX, y.drawY, y.height, y.width)) {
				enemies1[i].inGame = false;
				lives-=1;
				player.inGame = false;
				if(lives >= 0) canSpawn = false;
			}
		}
	}
	for(i=0;i<missiles.length;i++) {
		if(missiles[i].inGame && player.inGame){
			var x = missiles[i];
			var y = player;
			if(rect_collision(x.drawX, x.drawY, x.width, x.height, y.drawX, y.drawY, y.height, y.width)) {
				missiles[i].inGame = false;
				lives-=1;
				player.inGame = false;
				if(lives >= 0) canSpawn = false;
			}
		}
	}
}

function checkBulletGreenHit() {
	for(i=0;i<bulletsGreen.length;i++) {
		if(bulletsGreen[i].inGame) {
			for(e=0;e<enemies1.length;e++){
				if(enemies1[e].inGame) {
					var x = bulletsGreen[i];
					var y = enemies1[e];
					//console.log(x);
					//console.log(y);
					if(rect_collision(x.drawX, x.drawY, x.width, x.height, y.drawX, y.drawY, y.height, y.width)) {
						enemies1[e].inGame = false;
						bulletsGreen[i].inGame = false;
						points += 10;
					}
				}
			}
		}
	}
}

bulletGreen.prototype.draw = function() {
	ctxBullets.drawImage(sprites,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

function missile() {
	this.height = 50;
	this.width = 20;
	this.inGame = true;
	this.drawX = (Math.random() * (gameWidth - this.width));
	this.drawY = this.height * -1;
	this.srcX = 150;
	this.srcY = 150;
}

function checkSpawnMissile() {
	var randNum = Math.floor(Math.random()*2)
	if(randNum < 1) {
		showMissile();
	}
}

function spawnMissile() {
	var i = missiles.length;
	missiles[i] = new missile;
	missiles[i].inGame = true;

}

function showMissile() {
	for(i=0;i<missiles.length;i++) {
		if(!missiles[i].inGame) {
			missiles[i] = new missile();
			missiles[i].inGame = true;
			return;
		}
	}
	spawnMissile();
}

function drawMissiles() {
	clearCtx(ctxMissile);
	for(i=0;i<missiles.length;i++) {
		if(missiles[i].inGame) {
			missiles[i].draw();
			missiles[i].drawY += 10;
			if(missiles[i].drawY > gameHeight) {
				missiles[i].inGame = false;
			}
		}
	}
}

missile.prototype.draw = function() {
	ctxMissile.drawImage(sprites,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

function resetData() {
	points = 0;
	playerDead = false;
	lives = 3
	player = new ship();
	enemies1 = [];
	missiles=[];
	inLoop1 = true;
	bgY1 = 0;
	bgY2 = gameHeight * -1;
}

function drawBg() {
	clearCtx(ctxBg);

	ctxBg.drawImage(background1, 0, bgY1);

	ctxBg.drawImage(background1, 0, bgY2);
	if(bgY1 >= gameHeight) bgY1 = gameHeight * -1;
	if(bgY2 >= gameHeight) bgY2 = gameHeight * -1;
	bgY1+= 2;
	bgY2+= 2;

}

function comet1() {
	this.height = 70;
	this.width = 75;
	this.srcX = 200;
	this.srcY = 100;
	this.inGame = true;
	this.drawX = (Math.random() * (gameWidth - this.width));
	this.drawY = this.height * -1;
}

function comet2() {
	this.srcX = 300;
	this.srcY = 100;
	this.height = 42
	this.width = 44;
	this.inGame = true;
	this.drawX = (Math.random() * (gameWidth - this.width));
	this.drawY = this.height * -1;
}

//50/50 chance of spawning either comet
function checkSpawnComet() {
	var randNum = Math.floor(Math.random()*2);
	if(randNum < 1) {
		var randNum2 = Math.floor(Math.random()*2);
		if(randNum < 1) showComet1();
		else showComet2();
	}
}

function checkSpawnComet1() {
	var randNum = Math.floor(Math.random()*2)
	if(randNum < 1) {
		showComet1();
	}
}

function checkSpawnComet2() {
	var randNum = Math.floor(Math.random()*2)
	if(randNum < 1) {
		showComet2();
	}
}

function spawnComet1() {
	var i = comets1.length;
	comets1[i] = new comet1;
	comet1[i].inGame = true;

}

function spawnComet2() {
	var i = comets2.length;
	comets2[i] = new missile;
	comets2[i].inGame = true;

}

function showComet1() {
	for(i=0;i<missiles.length;i++) {
		if(!missiles[i].inGame) {
			missiles[i] = new missile();
			missiles[i].inGame = true;
			return;
		}
	}
	spawnMissile();
}

function showComet2() {
	for(i=0;i<missiles.length;i++) {
		if(!missiles[i].inGame) {
			missiles[i] = new missile();
			missiles[i].inGame = true;
			return;
		}
	}
	spawnMissile();
}

function drawComets() {
	clearCtx(ctxMissile);
	for(i=0;i<missiles.length;i++) {
		if(missiles[i].inGame) {
			missiles[i].draw();
			missiles[i].drawY += 10;
			if(missiles[i].drawY > gameHeight) {
				missiles[i].inGame = false;
			}
		}
	}
}

comet1.prototype.draw = function() {
	ctxMissile.drawImage(sprites,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

comet2.prototype.draw = function() {
	ctxMissile.drawImage(sprites,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}