Question

I’m working on a top down game, and this game is going to contain a lot of collisions simple and complex.

After doing some research, I understand that I have to always compare my character with ‘object’ within my code – and then check for collision calculations.

EG:

CheckCollisions(Player, Object);

Which means I have to add in every single collide-able object within my scene, into my code:

CheckCollisions(Player, Building1);
CheckCollisions(Player, Building2);
CheckCollisions(Player, Trash);
CheckCollisions(Player, Bench1);
CheckCollisions(Player, Bench2);
CheckCollisions(Player, Office1);
CheckCollisions(Player, Office2);

First off, my objects might not even be simple rects, they might be complex shapes. Secondly, some of them might have their own rotation. And thirdly, what happens if I have over tens of thousands of collie-able objects in my scene?

Ins’t there an easier way to check for collisions within a HTML5/JS game?

Is this even possible? I’m really just looking for some advice and pointers.

Thanks

Answer 1

1 – you don’t need to write a line of code for every object in your game. Put them into an array and loop over the array:

var collidableObjects = [Building1, Building2, Trash, Bench1, Bench2,Office1, Office2];
var CheckAllCollisions = function() {
    for (var i=0; i<collidableObjects.length; i++) {
        CheckCollisions(Player, collidableObjects[i]);
    }
}

2 – if you have complicated collision check (ie rotated shape, polygon, etc) you can first check a simple rectangle check (or radius check) and do the more accurate check if the first one returns true.

3 – if you plan to have tens of thousands of objects you should have smarter data collections, for example objects sorted by X coordinate so you can quickly avoid checking everything larger than Player.X+100 and smaller than Player.X-100 (using binary search), or split the objects into a grid and just check the objects in the 3×3 grid cells around the player.