game.js

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var gameStarted = 0;
var gameEnded = 0;
// defining image variable
var meteorpic = new Image();
meteorpic.src = "assets/meteor.png";
// defining image variable
var shippic = new Image();
shippic.src = "assets/ship.png";

function startGame() {
    if (gameStarted == 0 && gameEnded == 0) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        gameStarted = 1;
    }
}


function canvasPreGame() {
    ctx.font = "40px Arial";
    ctx.fillStyle = 'white';
    ctx.textAlign="center";
    ctx.fillText("Click here to start!",canvas.width / 2,canvas.height / 2);
}


function mainLoop() {
    if (gameStarted == 1) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        player.moveShip();
        player.drawShip();
        for (count = 0; count != meteorArray.length; count++) {
            meteorArray[count].moveMeteor();
            meteorArray[count].drawMeteor();

            // collision detect in enemy class as its easier
            meteorArray[count].collisionDetect();
            meteorArray[count].resetMeteor();

        }
    }
window.requestAnimationFrame(mainLoop);
}

// this needs to be fixed to be proportional to game frame rate
setInterval(function(){
    if(gameStarted==1) {
    obj = new Meteor(Math.floor(Math.random() * canvas.width - 50), 0);
    meteorArray.push(obj);
    }
},1500);

mainLoop();