Javascript Game Level Collision

Question

I am currently in the process of writing my first game and am doing it in Javascript+HTML5 Canvas. The game is a top down point-click action shooter with WASD movement. Anyway, yesterday I finished implementing collision detection using circles and a quad-tree to minimize the comparisons. I throw all the bullets, players, and enemies into the quadtree. Now, that all is working fine, but I am unsure of how to handle the next step which is handling the collision on the actual level. Bullets should be blocked by walls, actors (player and enemies) should be blocked by both fences and walls, etc.

Should I define shapes to represent the walls of my level and include them as a form of object within the quadtree then use the SAT to evaluate each of the elements against anything that it may be colliding with or is there another way like creating a hidden image layer that outlines the path and then test each object's coordinates to make sure it doesn't land on a black pixel (which would indicate that it is colliding with the unmoving terrain)?

Thanks.

Answer 1

From a similar question:

I suggest reading this excellent article about how ghost movement and collision detection works in PacMan.

Then I would suggest logically modeling your Bomberman levels as a collection of tiles. Each tile represents a discrete position in your level, and it is not logically possible to ever be "between" tiles or occupying two tiles at the same time. Each tile can track what sort of terrain feature is currently on it, and whether or not it is a valid destination tile for the player (and the enemies, potentially with different rules for each if the enemies are allowed to traverse terrain that is normally impassable for the player).

Then you don't need a collision detection algorithm for every object in the world. When it comes time for an enemy to move, or when the user tries to move their character, all you have to do is check all the tiles that are adjacent to their current tile (4, or 8 max if you allow diagonal movement), see if each tile represents a valid movement direction, and block the movement if it is not in a valid direction.

And to answer your question, yes, iterating every object in the world on every position update will be very inefficient.