# JavaScript - 2D Top-down Tile Collision Detection

I am developing a small Top-down Game (Much like the old Zelda Games) and I'm having an issue in terms of Collision detection (The actual theory itself rather than assigning Tiles as solid, etc.)

I have a function called "checkTileCollision" which takes two parameters, X and Y, and is called through the Player's Move function. X and Y are the location of the player AFTER they have moved, as it's suppose to check the position the player is moving to for a solid Tile(s), and if it finds any, returns true to stop movement.

My Player is larger than a Tile (For examples sake, let's say each Tile is 32x32 and the Player is 26x60) and I need to know an efficient way to detect whether or not the player is attempting to step on to a Solid tile. The Player doesn't move on the Grid and is free-moving, so X and Y are true positions and not Tile co-ordinates.

Please note; I am aware of things such as Box2D but I'm wanting to do this without the use of third party libraries.

Any help is appreciated!

You need to check each corner of the character sprite to detect if any of them enter a solid tile. Also since your character is larger than your tiles, you'll need to check midpoints as well to prevent the player from straddling a single block.

To turn your true positions into coordinates, divide the true position by the tile width (the ground not the player) and that will give you the tile coordinates.

Also I've found it much easier to check for collisions prior to moving than it is to check after moving. Just a thought. :)

• Thank you for your comment, currently I do check each corner and the problem arose with not having a midpoint. Although; Entity Height and Width are both variables that can always be changed, so can you think of a good way to determine the amount of midpoints to have, and also where they should be?
– oyed
Apr 15, 2013 at 15:34
• I didn't realize this but your character sprite is much taller than your ground tiles, you should be able to get a good effect if you use a 26x26 box at the characters feet for collision detection, that way the top half of the character can overlap tiles (not sure if that's what you are going for). Apr 15, 2013 at 15:40