CODEWITHSUNDEEP
jqueryhtmlanimationcanvas
Sabai
Sabai

Reputation: 1599

Making a simple car game with HTML5 canvas

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

Upvotes: 12

Views: 13595

Answers (2)

JSantos
JSantos

Reputation: 1708

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

Upvotes: 6

Tom Gullen
Tom Gullen

Reputation: 61727

Great little demo, love it! I don't drive, these are my ideas. I recommend experimenting, you don't have to go for realism - remember you are making a game, you want to go for fun :)

Reversing

I would make reverse work properly, when you reverse it doesn't turn in the direction I expect from traditional car movement.

Drifting

This would be triggered when the speed/angle of turning is at a certain amount. Once these conditions have been met you could do something like prevent any more turning (by locking the current direction) and angle the car ~30o from the direction until the accelerate key is unpressed

Turning

I'm not a driver, but I would think your turning angle would be tighter when you are at a slower speed, perhaps create a simple formula for this, some sort of relationship between speed and turning amount.

Shameless plug

I have to disclose I work for Scirra.com and we have some software Construct 2 (Download), which is a Windows game making program for HTML5 games, it might be worth a look for you (depending on your objectives)! It is extendible with JavaScript, so you can write your own movement behaviours and use others peoples, making car games is a lot more visual and easier (in our opinions any way!)

Upvotes: 4

Related Questions