Take the 2-minute tour ×

Please take a look at the picture below:


It is and attempt in creating a "game" only with the DOM and jQuery.

The blue boxes are "obstacles" and the user can move his pointer (not drawn in screen in the picture", which is a single point, by clicking where he wants it to go.

The problem I am facing now, it to create a collision detection in the DOM itself with jQuery only. I am not using a pathfinding: that means that if a user wants to go across an obstacle, he has to click all the way around it. Now, how do I check if there will be a collision BEFORE the pointer actually collides? Another problem that might arise from this is if a user clicks on the opposite side of the obstacle, the collision would be checked and just walk past by.

Any ideas?

Thanks in advance.

share|improve this question

2 Answers 2

Project the course of the player before enacting it by n step increments and do your boundary checks within this 'test move' function.

share|improve this answer

I think the fact that you're using jQuery and DOM aren't really relevant. It all depends on how you store your data. For example you could store all rectangles (as objects with width, height and x, y) in an array and just use jQuery and DOM to render the objects to screen.

Nothing stops you from implementing a path-finding algorithm such as A* in JavaScript, but you'll need a graph of nodes you can apply the A* search to. To create such a graph you could use a flood-fill algorithm that creates nodes in fixed intervals (eg. every 20 pixels).

If your world looks similar to the image you posted, you could probably skip path-finding entirely and just use steering-behaviors. A combination of obstacle avoidance and arrival should work well (C++ sources of these steering behaviors can be found via opensteer.sourceforge.net).

share|improve this answer

Your Answer


