//Setting the canvas and context

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

​

var canvasWidth = canvas.width;

var canvasHeight = canvas.height;

​

var keys = [];  // contains, for each keyCode, the key status

​

//================

// CAR Class

//================

​

//Uploading obstacle car

var carImage = new Image();

carImage.src = "http://www.i2symbol.com/images/symbols/geometry/black_small_square_u25AA_icon_256x256.png";

​

function Car(x, y, speed, mod, angle) {

    this.x = x; // x center of car

    this.y = y; // y center of car

    this.speed = speed;

    this.mod = mod;

    this.angle = angle;

​

   this.listenInput = function(dt) {

        if (keys[37]) {

            this.x -= this.speed*dt;

        }

        if (keys[39]) {

            this.x += this.speed*dt;

        }

    };

    this.move = function (dt) {

        this.x += dt*(this.speed * this.mod) * Math.cos(Math.PI / 180 * this.angle);

        this.y += dt*(this.speed * this.mod) * Math.sin(Math.PI / 180 * this.angle);

        if (this.y > canvasHeight + 150) {

            this.spawn();

        }

    };

    this.draw = function () {

        context.save();

        context.translate(this.x, this.y);

        context.rotate(this.angle* Math.PI / 180);

        context.drawImage(carImage, -(carImage.width / 2), -(carImage.height / 2));

        context.restore();

        if (this.x > context.canvas.width){

        context.beginPath();

        context.fillStyle = "red";

        context.font = "50px Verdana";

        context.fillText("Out of bounds! Get Back!", 100, 100);

        }

        if (this.x < 0){

        context.beginPath();

        context.fillStyle = "red";

        context.font = "50px Verdana";

        context.fillText("Out of bounds! Get Back!", 100, 100);

        }

    };

  this.testCollision = function(other) {

    dx = (Math.abs(other.x - this.x));

    dy = (Math.abs(other.y - this.y));

    da = (carImage.width / 2);

    db = (carImage.height);

    if (dx < da && dy < db) {

        this.mod = 0;

    }

   };

}

​

//================

//ENTER: USER CAR

//================

var userCar  = new Car(450, canvasHeight - 100, 4/16, -1, -90);

​

//=========================

//Properties for score keep

//=========================

var score;

var startTime;

var gameOver;

var spaceBarPressed = false;

​

//=========================

// Launch the game

//=========================

setupKeys();

setupGame () ;

var gameTime=Date.now();

gameLoop();

//=====================

//ENTER: OBSTACLE CARS

//=====================

​

var obstacleCar1;

var obstacleCar2;

var obstacleCar3;

var obstacleCar4;

var obstacleCar5;

var obstacleCar6;

​

// ================

//Starting game

// ================

​

function setupGame () {

  obstacleCar1 = new Car(100, 10, 5, 2.9, 90);

  obstacleCar2 = new Car(300, 10, 5, 2.9, 90);

  obstacleCar3 = new Car(450, 10, 5, 2.9, 90);

  obstacleCar4 = new Car(600, 10, 5, 2.9, 90);

  obstacleCar5 = new Car(750, 10, 5, 2.9, 90);

  obstacleCar6 = new Car(900, 10, 5, 2.9, 90);

  gameOver = false;

  startTime = Date.now();

  score = 0;

}

​

//=========================

//Properties for score keep

//=========================

var score;

var startTime;

var gameOver;

var spaceBarPressed = false;

​

//=========================

// Launch the game

//=========================

setupGame();

gameLoop();

​

//===========================

//Draw Final and Elasped Time

//===========================

function drawElapsedTime() {

    context.save();

    context.fillStyle = "black";

    context.font = "30px Verdana";

    context.fillText(parseInt((Date.now() - startTime) / 1000) + " secs", canvas.width - 110, 40);

    context.restore();

}

​

function drawFinalScore() {

    context.save();

    context.fillStyle = "black";

    context.font = "30px Verdana";

    context.fillText("Game Over: " + score + " secs", 368, 100);

    context.font = "12px Verdana";

    context.fillText("Press space to restart", 450, 150);

    context.restore();

}

​

//========================

//All game draw properties

//========================

​

function gameLoop() {

     requestAnimationFrame(gameLoop);

    context.clearRect(0, 0, canvas.width, canvas.height);

    var now=Date.now();

    var dt = now-gameTime;

    if (dt>16) dt=16;

    gameTime+=dt;

    if (gameOver) {

      drawFinalScore();

      if (spaceBarPressed) {

         setupGame();

      }

      return;

    }

obstacleCar1.move();

obstacleCar1.draw();

obstacleCar1.testCollision(userCar);

​

​

//Spawn obstacle cars at different times

​

if (parseInt((Date.now() - startTime) / 1000) >= 3){

    obstacleCar2.move();

    obstacleCar2.testCollision(userCar);

    obstacleCar2.draw();

}

if (parseInt((Date.now() - startTime) / 1000) >= 5){ 

    obstacleCar3.move();

    obstacleCar3.testCollision(userCar);

    obstacleCar3.draw();

}

if (parseInt((Date.now() - startTime) / 1000) >= 7){ 

    obstacleCar4.move();

    obstacleCar4.testCollision(userCar);

    obstacleCar4.draw();

}

if (parseInt((Date.now() - startTime) / 1000) >= 10){ 

    obstacleCar5.move();

    obstacleCar5.testCollision(userCar);

    obstacleCar5.draw();

}

if (parseInt((Date.now() - startTime) / 1000) >= 13){ 

    obstacleCar6.move();

    obstacleCar6.testCollision(userCar);

    obstacleCar6.draw();

}

​

//ULTIMATE MODE increase speed for all cars

if (parseInt((Date.now() - startTime) / 1000) >= 15){

    obstacleCar1.speed = 9;

    obstacleCar2.speed = 9;

    obstacleCar3.speed = 9;

    obstacleCar4.speed = 9;

    obstacleCar5.speed = 9;

    obstacleCar6.speed = 9;

}

​

//Display ULTIMATE MODE When it starts

if (parseInt((Date.now() - startTime) / 1000) >= 15 && parseInt((Date.now() - startTime) / 1000) <= 19){

    context.beginPath();

    context.fillStyle = "red";

    context.font = "50px Verdana";

    context.fillText("ULTIMATE MODE!", 100, 100);

}

    if (obstacleCar1.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    if (obstacleCar2.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    if (obstacleCar3.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    if (obstacleCar4.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    if (obstacleCar5.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    if (obstacleCar6.mod === 0) {

       score = parseInt((Date.now() - startTime) / 1000);

       gameOver = true;

       spaceBarPressed = false;

    }

    userCar.draw();

    userCar.listenInput(dt);  

    drawElapsedTime();

}

​

//========================

//  Keys handling

//========================

​

function setupKeys() {

    var listenedKeys = [32, 37, 38, 39, 40];

    function keyUpHandler(event) {

       var keyCode = event.keyCode;

       if (listenedKeys.indexOf(keyCode) == -1) return;

       keys[keyCode] = false;        

    }

​

    function keyDownHandler(event) {

        var keyCode = event.keyCode;

        if (listenedKeys.indexOf(keyCode) == -1) return;

        keys[keyCode] = true;        

        if (keyCode == 32) {

           spaceBarPressed =  true;

        }

       event.preventDefault();

    }

​

    //Event listeners for keys

    window.addEventListener("keydown", keyDownHandler, false);

    window.addEventListener("keyup", keyUpHandler, false);

}

​

​