Creating a Car Game in React, Part 3: Collision

In this, the third post of this series, we're going to add collision to the game. For a full list of the code, please see here.

If you're wondering about earlier posts, please start here.

Since we're introducing collision, we'll also need to introduce the age old game concept of "Lives." The premise here is that when you crash into something, you lose a life.

The first step is to add a new state variable to hold the player's remaining lives:

this.state = {
    playerX: 100,
    playerY: 100,
    windowWidth: 1500,
    windowHeight: 1500,
    playerMomentum: 0,
    playerRotation: 0,
    playerVelocityX: 0,
    playerVelocityY: 0,
    playerLives: 3,
    gameLoopActive: false,
    message: ""
};

If you have a look in the repository, there's a bit of refactoring, where I've taken some of the setState code and separated it into logical functions. I won't list that here.

Collision Detection With React

At the end of the game loop, we now have a call to check if we've collided with anything:

if (this.detectAnyCollision()) {
    this.PlayerDies(); 
}

The collision detection code is quite straight forward, and is based on the simplistic idea that all objects can be considered rectangles. Whilst this is not precise, it's sufficient for our purpose:

detectAnyCollision() { 
        const halfWidth = this.spriteWidth / 2;
        const halfHeight = this.spriteHeight / 2;

        let rect1 = {x: this.state.playerX - halfWidth, y: this.state.playerY - halfHeight, 
            width: this.spriteWidth, height: this.spriteHeight}

        if (this.detectOutScreen(rect1)) {
            return true;
        }

        return this.obstacles.some(a => {
            var rect2 = {x: a.props.centreX - halfWidth, y: a.props.centreY - halfHeight, 
                width: this.spriteWidth, height: this.spriteHeight}

            if (this.detectCollision(rect1, rect2)) {
                return true;
            } else {
                return false;
            }
        });
}

detectCollision(rect1, rect2) {
    if (rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y) {
        return true;
    }
    return false;
}

detectOutScreen(rect1) {
    if (rect1.x < 0 || rect1.x + rect1.width > this.state.windowWidth
    || rect1.y < 0 || rect1.y + rect1.height > this.state.windowHeight) {
        return true;
    }
    return false;
}

The collision detection code itself was pilfered from here. As you can see, all we're doing is translating our objects into rectangles, and then seeing if they intersect each other, or if the player has left the game area.

Quick Note About forEach

I had originally used .forEach  for the detectAnyCollision() code. Whilst it would, initially, make sense to a C# programmer, in fact the JavaScript version of this does exactly what it says on the tin; that is, it executes for each element, and there is no way to exit early!

Player Dies and Scores

Now that we have introduced collision, we should consider what to do when it happens. The usual thing in a game is that the player either "dies" or they lose "health." Since this is inspired by a spectrum game, we'll go with "dies." You saw earlier that we introduced the concept of "lives" and, because it was a spectrum, it has to be 3!

The code to deal with the player death is:

PlayerDies() { 
    this.setState({
        playerLives: this.state.playerLives - 1,
        gameLoopActive: false
    });
    if (this.state.playerLives <= 0) {
        this.initiateNewGame();
    } else {
        this.resetCarPosition();
    }
    this.repositionPlayer();
    this.setState({ 
        gameLoopActive: true
    });
}

Just a quick reminder that this isn't a comprehensive listing of code — please see the GitHub repository for that; however, apart from the reduction in lives, the most important thing here is the gameLoopActive code.

The idea here is that we only execute the game loop while this state variable is set; which means we can stop the game loop while we're dealing with the player's collision.

The change in the game loop code for this is very simple:

gameLoop() {
if (!this.state.gameLoopActive) return;

 . . . 

Crashed Car

All well and good, but, as it stands, this simply results in the car stopping when it hits a tree, and then being re-positioned. We can address this by adding a small "animation" to indicate a crash. If you have a look here, you'll see why I've won several awards for my graphics*!

In order to plug this in, we're going to change the car graphic binding:

render() { 
return <div onKeyDown={this.onKeyDown} tabIndex="0">
    <GameStatus Lives={this.state.playerLives} Message={this.state.message}/>
    <Background backgroundImage={backgroundImg}
    windowWidth={this.state.windowWidth} windowHeight={this.state.windowHeight} /> 

    <Car carImage={this.state.playerCrashed ? brokenCarImg : carImg} 
    centreX={this.state.playerX} centreY={this.state.playerY} 
    width={this.spriteWidth} height={this.spriteHeight} 
    rotation={this.state.playerRotation} /> 

    {this.obstacles} 
</div>
}

So, where the crashed flag is set, we're binding to brokenCarImg; otherwise to carImg; they are defined at the top:

import carImg from '../Assets/Car.png';
import brokenCarImg from '../Assets/Crash.png';

We also split the  playerDies()function into two:

playerDying(tillDeath) {
    this.setState({
        playerCrashed: true,
        gameLoopActive: false
    });
    this.stopCar();
    setTimeout(this.playerDies.bind(this), tillDeath);
}

playerDies() { 
    this.setState({
        playerLives: this.state.playerLives - 1,
        gameLoopActive: false
    });
    if (this.state.playerLives <= 0) {
        this.initiateNewGame();
    } else {
        this.resetCarPosition();
    }
    this.repositionPlayer();
    this.setState({ 
        playerCrashed: false,
        gameLoopActive: true
    });
}

All we're doing here is calling the first function, which effectively just changes the image and then calls the second function on a timeout. Again, don't forget the .bind() when you call timeout, otherwise, you won't be able to access this!

Footnotes

* I haven't actually won any awards for graphics — I had you fooled, though!

References

If you enjoyed this article and want to learn more about React, check out this collection of tutorials and articles on all things React.