Full HTML5 Game

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

var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');

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

var canvasHUD = document.getElementById('canvasHUD');
var ctxHUD = canvasHUD.getContext('2d');
ctxHUD.fillStyle = "hsla(0, 0%, 0%, 0.5)";
ctxHUD.font = "bold 20px Arial";

var canvasEnd = document.getElementById('canvasEnd');
var ctxEnd = canvasEnemy.getContext('2d');
ctxEnd.fillStyle = "rgba(0, 0, 0, 100)";

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

var isPlaying = false;
var gameLost = false;

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

var enemies = [];

var newSpawn = 0;
var btnPlay = new Button(265, 540, 220, 330);
var btnEnd = new Button(200, 600, 300, 450);
var fps = 10;
var drawInterval;

var mouseX = 0;
var mouseY = 0;

var shiftKey = false;

var jet1 = new Jet();

var imgSprite = new Image();
imgSprite.src = 'images/spriteMap.png';
imgSprite.addEventListener('load',init,false);

function pause() {
    isPlaying = false;
}
function play() {
    isPlaying = true;
    startLoop();
}
//Initialize the canvas
function init() {
    spawnEnemy(10);
    drawMenu();
    document.addEventListener('click',mouseClicked, false);
}
function playGame() {
    drawBg();
    startLoop();
    updateHUD();
    document.addEventListener('keydown',checkKeyDown,false);
    document.addEventListener('keyup',checkKeyUp,false);
}

function spawnEnemy(n) {
    for(i = 0;i<n;i++) {
        enemies[enemies.length] = new Enemy();
    }
}

function drawAllEnemies() {
    clearEnemy();
    for (var i=0; i<enemies.length;i++) {
        enemies[i].draw();
    }
}

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;
    //console.log('----' + top1, bottom1, left1, right1, top2, bottom2, left2, right2 + '----');

    //console.log('top 1: ' + top1);
    //console.log('bottom 1: ' + bottom1);
    //console.log('top 2: ' + top2);
    //console.log('bottom 2: ' + bottom2);
    //console.log('x1: ' + x1);
    //console.log('x2: ' + x2);
    //console.log('y2: ' + y2);
    //console.log('h2: ' + h2);
    //console.log(x1, y1, w1, h1, x2, y2, h2, w2);
    //console.log('------------------------------------------------')
    if (((left2 >= left1) && (left2 <= right1)) && ((top1 <= top2) && (top2 <= bottom1)) ||
        ((right2 >= left1) && (right2 <= left1)) && ((top1 <= top2) && (top2 <= bottom1)) ||
        ((left2 >= left1) && (left2 <= right1)) && ((bottom2 >= top1) && (bottom2 <= bottom1)) ||
        ((right2 >= left1) && (right2 <= right1)) && ((bottom2 >= top1) && (bottom2 <= bottom1))) {
        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;
}

function loop() {
    if (isPlaying && !gameLost) {
        jet1.checkHitJet();
        jet1.draw();
        updateHUD();
        requestAnimFrame(loop);// MAKE SURE INSIDE HERE
        drawAllEnemies(); // MAKE SURE INSIDE HERE
    } else if (gameLost) {
        ctxEnd.drawImage(imgSprite,0,1100,gameWidth,gameHeight,0,0,gameWidth,gameHeight);
        requestAnimFrame(loop);// MAKE SURE INSIDE HERE
    }
    newSpawn++;
    if(newSpawn == 300) spawnEnemy(2);
}

function startLoop() {
    isPlaying = true;
    loop();
}

function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw, fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}

function Jet() {
    this.srcX = 0;
    this.srcY = 500;
    this.drawX = 200;
    this.drawY = 200;
    this.noseX = this.drawX + 90
    this.noseY = this.drawY + 20;
    this.width = 100;
    this.height = 35;
    this.speed = 3;
    this.isUpKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
    this.isRightKey = false;
    this.isSpacebar = false;
    this.isShooting = false;
    this.bullets = [];
    this.currentBullet = 0;
    for (var i = 0; i < 20; i++) {
        this.bullets[this.bullets.length] = new Bullet();
    }
    this.points = 0;

    this.leftX = this.drawX;
    this.rightX = this.drawX+this.width;
    this.topY = this.drawY;
    this.bottomY = this.drawY + this.height;
}

Jet.prototype.endGame = function() {
    gameLost = true;
    clearEnemy();
    jet1=new Jet();
    points=0;
    enemies = [];
}
Jet.prototype.checkHitJet = function() {
    for(i=0;i<enemies.length;i++) {
        if (rect_collision(this.drawX, this.drawY, this.width, this.height, enemies[i].drawX, enemies[i].drawY, enemies[i].height, enemies[i].width)) {
            Explosion.drawX = enemies[i].drawX - (Explosion.width/2);
            Explosion.drawY = enemies[i].drawY - (Explosion.height/2);
            Explosion.hasHit = true;
            this.endGame();
        }
    }
};

Jet.prototype.draw = function () {
    clearJet();
    this.updateCoors();
    this.checkKeys();
    this.checkShooting();
    this.drawAllBullets();
    ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
};

Jet.prototype.updateCoors = function() {
    this.noseX = this.drawX + 90;
    this.noseY = this.drawY + 20;
    this.leftX = this.drawX;
    this.rightX = this.drawX+this.width;
    this.topY = this.drawY;
    this.bottomY = this.drawY + this.height;
};
Jet.prototype.checkKeys = function() {
    if (this.isUpKey && this.topY > 0) {
        this.drawY -= this.speed;
    }
    if (this.isRightKey && this.rightX < gameWidth) {
        this.drawX += this.speed;
    }
    if (this.isDownKey && this.bottomY < gameHeight) {
        this.drawY += this.speed;
    }
    if (this.isLeftKey && this.leftX > 0) {
        this.drawX -= this.speed;
    }
};

function draw() {
    drawAllEnemies();
    jet1.draw();
}


function drawBg() {
    var srcX = 0;
    var srcY = 0;
    var drawX = 0;
    var drawY = 0;
    ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
}

function clearJet() {
    ctxJet.clearRect(0,0,gameWidth,gameHeight);
}

function clearBg() {
    ctxBg.clearRect(0,0,gameWidth,gameHeight);
}


//Event Functions
function checkKeyDown(e) {
    var keyID = (e.keyCode) ? e.keyCode : e.which;
    if (keyID === 38 || keyID === 87) { //38 is up arrow and 87 is W.
        jet1.isUpKey = true;
        e.preventDefault();

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

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

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

    }
    if (keyID === 32) { //Space Bar
        jet1.isSpacebar = true;
        e.preventDefault();
    }
    if (keyID == 13) { //Shift key
        if(shiftKey == true) {
            play();
            shiftKey = false;
        } else {
            pause();
            shiftKey = true;
        }
    }

}

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

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

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

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

    }
    if (keyID === 32) { //Space Bar
        jet1.isSpacebar = false;

    }
}

function mouseClicked(e) {
    if(!isPlaying) {
        mouseX = e.pageX - canvasBg.offsetLeft;
        mouseY = e.pageY - canvasBg.offsetTop;
        if(btnPlay.checkClicked()) playGame();
    } else if (gameLost) {
        mouseX = e.pageX - canvasBg.offsetLeft;
        mouseY = e.pageY - canvasBg.offsetTop;
        if(btnEnd.checkClicked()) {
            gameLost = false;
            ctxEnd.clearRect(0,0,gameWidth,gameHeight);
            spawnEnemy(10);
            newSpawn = 0;
        }
    }
}
//Enemy Functions
function Enemy() {
    this.srcX = 200;
    this.srcY = 500;
    this.drawX = (Math.random() *1000)+gameWidth;
    this.drawY = (Math.random() * 500)+gameHeight;
    this.width = 100;
    this.height = 40;
    this.speed = 5;
}

Enemy.prototype.checkEscaped = function() {
    if(this.drawX + this.width <= 0) {
        this.recycleEnemy();
    }
};

Enemy.prototype.recycleEnemy = function() {
    this.drawX = (Math.random() *1000)+gameWidth;
    this.drawY = Math.random() * 500;
};
Enemy.prototype.draw = function () {
    ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
    this.drawX-=this.speed;
    this.checkEscaped();
};

function clearEnemy() {
    ctxEnemy.clearRect(0,0,gameWidth,gameHeight);
}

//Bullet functions
function Bullet() {
    this.srcX = 150;
    this.srcY = 500;
    this.drawX = -10;
    this.drawY = 0;
    this.width = 10;
    this.height = 10;
    this.bulletSpeed= 10;
    this.explosion = new Explosion();
}
Bullet.prototype.checkHitEnemy = function() {
    for(i=0;i<enemies.length;i++) {
        if(this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].heigh ||
         this.drawX + this.width  >= enemies[i].drawX && this.drawX + this.width<= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].height ||
         this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY - this.height >= enemies[i].drawY && this.drawY - this.height <= enemies[i].drawY + enemies[i].height ||
         this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].heigh) {
            this.explosion.drawX = enemies[i].drawX - (this.explosion.width/2);
            this.explosion.drawY = enemies[i].drawY - (this.explosion.height/2);
            this.explosion.hasHit = true;
            this.recycle();
            enemies[i].recycleEnemy();
            jet1.points += 10;
        }
    }
};
Bullet.prototype.draw = function () {
    this.drawX += this.bulletSpeed;
    ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
    this.checkHitEnemy();
    if (this.drawX > gameWidth) {
        this.recycle();
    }
};

Jet.prototype.drawAllBullets = function() {
    for (var i = 0; i < this.bullets.length; i++) {
        if(this.bullets[i].drawX >= 0) {
            this.bullets[i].draw();
        }
        if(this.bullets[i].explosion.hasHit) {
            this.bullets[i].explosion.draw();
        }
    }
};
Jet.prototype.checkShooting = function() {
    if(this.isSpacebar && !this.isShooting) {
        this.bullets[this.currentBullet].fire(this.noseX, this.noseY);
        this.isShooting=true;
        this.currentBullet++;
        if (this.currentBullet  >= this.bullets.length) {
            this.currentBullet = 0;
        }
    } else if (!this.isSpacebar) {
        this.isShooting = false;
    }
};

Bullet.prototype.fire = function (startX, startY) {
    this.drawX = startX;
    this.drawY = startY;
};

Bullet.prototype.recycle = function (startX, startY) {
    this.drawX = -20;
};
//end Bullet Functions

//explosion functinos
function Explosion() {
    this.srcX1 = 700;
    this.srcY1 = 500;
    this.srcX2 = 750;
    this.srcY2 = 500;
    this.drawX = 0;
    this.drawY = 0;
    this.width = 50;
    this.height = 50;
    this.currentFrame = 0;
    this.totalFrames = 10;
    this.hasHit = false;
}

Explosion.prototype.draw = function () {
    if (this.currentFrame <= this.totalFrames) {
        if (this.currentFrame < 5) {
            ctxJet.drawImage(imgSprite,this.srcX2, this.srcY2, this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        } else if (this.currentFrame > 5) {
            ctxJet.drawImage(imgSprite,this.srcX1,this.srcY1,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
        }
        this.currentFrame++;
    } else {
        this.hasHit = false;
        this.currentFrame = 0;
    }
};

function drawMenu() {
    var srcX = 0;
    var srcY = 600;
    var drawX = 0;
    var drawY = 0;
    ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
}


//Button Object

function Button(xL, xR, yT, yB) {
    this.xLeft = xL;
    this.xRight = xR;
    this.yTop = yT;
    this.yBottom =yB;
}

Button.prototype.checkClicked = function() {
    if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && this.yBottom >= mouseY) return true;
}


//end of button object

function updateHUD() {
    ctxHUD.clearRect(0,0,gameWidth,gameHeight);
    ctxHUD.fillText("Score: " + jet1.points , 680, 30);
}