Let's build basic collision detection in JavaScript!

By Eric Lewis March 30, 2018

If you're building a game where one character bumps into other characters, you might find yourself asking "Hey self...how do I check if Pacman bumped into a ghost?"

The answer is 🔍💥 collision detection 💥🔍

There's plenty of ways to implement collision detection. I'll describe one method: grid-based collision detection.

In grid-based collision detection, the game board is divided into single tiles. My game board will be a 4×4 grid. Each character and object in the game occupies exactly one tile.

My grid will be a div element with position: relative applied. Items on the board will be absolutely positioned to fit into its tile's location. Here's what the grid will look like. I've overlayed each tile's x, y coordinates and grid lines just for show here, and won't include them in the game proper.

My game will be called Breakfast with Blerf. Let me tell you the rules.

I'm going to represent each thing's location on Planet Chill as an object with properties for its x and y coordinates.

Blerf starts out in the top left tile, so I'll initialize Blerf's location like this:

const blerf = { x: 0, y: 0 };

Since there are many rocks, I'll make an array of location objects to represent tile locations for a few rocks:

const rocks = [ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 2, y: 3 } ];

To render Blerf on the grid, I'm going to hard-code a <div class="character"> element as a child of the board div the HTML. Blerf will appear in the top left tile.

Blerf's picture and the likenesses of other items show up because I've set an image for each element's background-image.

To render the rocks on the grid, we'll write a function that loops over the rocks global variable, create DOM elements and set their position.

const renderRocks = () => { for (let i = 0; i < rocks.length; i++) { const rock = rocks[i]; const rockElement = document.createElement('div'); rockElement.className = 'rock'; // Multiply the x,y coordinates by 100 because each grid square // is 100x100 pixels in size. rockElement.style.left = (rock.x * 100).toString() + 'px'; rockElement.style.top = (rock.y * 100).toString() + 'px'; document.querySelector('.board').appendChild(rockElement); } };

Cool! At this point we would see Blerf and the Chill rocks sitting there on the grid.

The player will press an arrow key in our game to move Blerf around. I'll set up an event listener to call separate move functions depending on which key is pressed.

document.body.addEventListener('keydown', evt => { const keyCode = evt.keyCode; // If the user pressed any directional keys, // prevent the browser default of scrolling the page. if ([37, 38, 39, 40].includes(keyCode)) { evt.preventDefault(); } // Attempt to move the character in the direction switch (keyCode) { case 37: moveLeft(); break; case 38: moveUp(); break; case 39: moveRight(); break; case 40: moveDown(); break; } });

When a user presses the right arrow key, Blerf should move right while there's still grid tiles to move to that aren't occupied by rocks. Here's where the "magic" happens.

I can check Blerf's location by accessing blerf.x and blerf.y. Before we let Blerf move, we'll find the location that Blerf will move to, if we say he can. If Blerf is at coordinate 0, 0 and Blerf is moving right, then Blerf wants to go to 1, 0.

Let's write a few functions to help us decide whether Blerf is allowed to move to 1, 0. First, a function that checks whether the coordinate to move to is on the grid. Blerf can't leave his planet, that would be literally not Chill.

// Check if the provided coordinate is within the grid's bounds. // Returns a Boolean const isCoordinateInGrid = (x, y) => { if (x < 0 || y < 0 || x > 3 || y > 3) { return false; } return true; }

Let's also write a function to check whether there's a rock at a coordinate, because Blerf doesn't want to scale craggly rocks that slice up his feet.

const isThereARockAt = (x, y) => { // Loop through rocks, and check if any rock is at the given point. for (let i = 0; i < rocks.length; i++) { const rock = rocks[i]; if (rock.x === x && rock.y === y) { return true; } } return false; };

Now we can combine these in a function that checks whether Blerf can move to a given coordinate.

// Check if a player can move to the provided coordinates. // Returns a Boolean const canMoveTo = (x, y) => { // If the coordinate to move is outside of the grid, // the player can't move to it. if (!isCoordinateInGrid(x, y)) { return false; } // If there is a rock at the coordinate, // the player can't move to it. if (isThereARockAt(x, y)) { return false; } return true; };

We can now implement the moveRight() function we call in the keydown event listener. It checks if Blerf can move to a hypothetical new location. If he can't, nothing happens. If he can, Blerf's location value is updated, and we call another function that updates the positioning of Blerf's DOM element to make the change visible to the player.

// Move the character right one tile, if Blerf can. const moveRight = () => { if (canMoveTo(character.x + 1, character.y)) { character.x += 1; moveCharacterTo(character.x, character.y); } }

That is grid-based collision detection in a nutshell. Check if the character can move to a hypothetical location against any number of obstacles, and move them if so.

Here's the completed game, playable below. Oh wait, I didn't even mention how to implement Blerf eating the plants! Drats, I'm out of time. Check out the stand-alone version of the game that includes the source code to see how I did it :)

Exercises

Are you learning about collision detection? Awesome! Remix my source code on Glitch and try one of these exercises:

1. Create a function resetGame() which changes the state of the game back to the beginning. resetGame() should be called two seconds after the player wins the game.

2. Instead of hard-coding rock and plant locations, randomize their locations on the grid. Make sure items don't overlap each other!

3. Make the grid bigger: try 5×5 or 6×6.

4. Introduce a friend for Blerf. When Blerf moves next to the friend, display a message from the friend for two seconds like "Hi Blerf!" or "How's the stars, Blerf?" Check out the displayWinMessage() function for an example of how we display a message.