0

So basically i had some code of a car that has speed and everything, now i want another one with the same properties. So i duplicated the whole code and changed the other cars url and all of the variables for it. I get 2 cars on my canvas but they keep blinking. I dont know why that is happening.

You can see it for yourself on JsBin:

http://jsbin.com/fekutakime/3/edit

The car code that i duplicated is:

//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;
    }
} 
Aldwoni
  • 1,168
  • 10
  • 24
The Good Guy
  • 31
  • 1
  • 2
  • 11
  • You have 2 timers that are clearing the canvas, one in `drawCar()` and the other in `draw()`. Do all the drawing in one timer and clear the screen once per update. http://jsbin.com/toyomufixi/2/edit – tigrang Nov 25 '14 at 01:40
  • Really good point! I wont make that mistake again thank you so much man! – The Good Guy Nov 25 '14 at 01:46

0 Answers0