Question

I’m having a play with HTML5 canvas, and for my first experiment I decided to try make a simple car animation with basic user input. I think I’m most of the way there with basic input and movement, but I just wanted to see if I could take it a bit further.

Demo: http://jsfiddle.net/mpxML/20/
(use arrow keys)

I have an image loading in, you can also see a black square which moves, that is the translate point, or where the car is steering from. I wanted to somehow create a drift effect which can be achieved at higher speeds etc. It also can turn when it’s not moving, that isn’t right.

Anyway, I just don’t know what logic I need to make the car feel more semi-realistic.

Thanks

Answer 1

To fix the turning you have to do something like this:

car.angle = car.angle - (car.handeling * car.speed/car.topSpeed);

this will prevent from turning when speed is 0 and will fix the reverse turning

To get drift effects you should move the car’s rotation center forward and allow the car to rotate over it self without really turning