//Setting the canvas and context

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

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

​

//Uploading car

var car = new Image();

car.src = "http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png";

​

//Setting properties of car

var x = 450;

var y = 730;

var speed = 10;

var angle = 990;

var mod = 0;

​

//Event listeners for keys

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

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

​

//Interval for animation

var moveInterval = setInterval(function () {

    draw();

}, 30);

​

//Drawing the car turning and changing speed

function draw() {

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

​

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

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

​

    context.save();

    context.translate(x, y);

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

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

    context.restore();

}

​

//Setting the keys

function keyup_handler(event) {

    if (event.keyCode == 38 || event.keyCode == 40) {

        mod = 0;

    }

}

​

//Setting all of the keys

function keypress_handler(event) {

    console.log(x, y);

    if (event.keyCode == 38) {

        mod = 1;

    }

    if (event.keyCode == 40) {

        mod = -1;

    }

    if (event.keyCode == 37) {

        angle -= 5;

    }

    if (event.keyCode == 39) {

        angle += 5;

    }

}

//=============================================================================other car======================================================================================================================

​

//Uploading car

var car1 = new Image();

car1.src = "http://www.i2clipart.com/cliparts/f/e/3/a/128135fe3a51f073730a8d561282d05b4f35ab.png";

​

//Setting properties of car

var x1 = 450;

var y1 = 400;

var speed1 = 10;

var angle1 = 990;

var mod1 = 0;

​

//Event listeners for keys

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

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

​

//Interval for animation

var moveInterval = setInterval(function () {

    drawCar();

}, 30);

​

//Drawing the car turning and changing speed

function drawCar() {

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

​

    x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);

    y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

​

    context.save();

    context.translate(x, y);

    context.rotate(Math.PI / 180 * angle1);

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

}

​

//Setting the keys

function keyup_handler1(event) {

    if (event.keyCode == 38 || event.keyCode == 40) {

        mod1 = 0;

    }

}

​

//Setting all of the keys

function keypress_handler1(event) {

    console.log(x, y);

    if (event.keyCode == 87) {

        mod1 = 1;

    }

    if (event.keyCode == 83) {

        mod1 = -1;

    }

    if (event.keyCode == 65) {

        angle1 -= 5;

    }

    if (event.keyCode == 68) {

        angle1 += 5;

    }

}