HTML5 Top Down Racing Game

[Stubsz]

I am creating an HTML5 based top down racing game and in order to get the cars around the track, I've looked into using two potential solutions (which I have working to an extent):

1. Paper JS
   
2. Pathanimator
   

I have got these both working individually in the sense that I can get objects moving around a path but the stumbling block I have is that each car will have its own starting position on either side of the race track (so won't always start at the same point within the path). The cars will also need to go single file after the first corner.

Another factor is overtaking. I have managed to use some Javascript to work out when two objects intersect, but need to make the object behind effectively "go around" the one in front and then back onto the racing line.

Quite a lot to work out here but wondered if anybody has some cunning ideas to make any of the above work?

Your help would be most appreciated!!

Thanks

[vcarluer]

Just a quick thought maybe it's not a good solution. I do not know the framework you talk about.

They seam to works well for what you try to do, I give you here an other way to look at your problem.

 

What I would do is divide the track in cells / tiles and I won't use a path but key target cells (after each corner).

 

After that in code I would create a subset of track's cells as a bounding box between car and next track target cell (var to keep for each car).

You add other cars in this subset too as walls.

Then you resolve this with a A* for the car to go to target cell.

You do that for each car in a regular basis and/or event based (contact / target cell region reached).

 

There is of course certainly more complex and accurate solutions with dynamic pathfinding.

There are special case (no solution for instance) which must be handled and can be tricky.

 

I hope it will help you.