Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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

share|improve this answer

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.