Gamedev Canvas Content Kit

Article 05: Game over

It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but other than that the game does nothing and doesn't have any progression or end goal. It would be good from the gameplay point of view to be able to lose. The logic behind losing in breakout is simple: if you miss the ball with the paddle and let it reach the bottom edge of the screen, then it's game over.

Implementing game over

Let's try to implement game over in our game — here's the piece of code from the third lesson where we made the ball bounce off the walls:

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

Instead of allowing the ball to bounce off all four walls, let's only allow three — left, top and right. Hitting the bottom wall will end the game. First let's focus on the top if statement, splitting it in two like so. Replace the top if statement with the following now:

if(x + dx < ballRadius) {
    dx = -dx;
} else if(x + dx > canvas.width-ballRadius) {
    dx = -dx;
}

Let's do the same for the bottom if statement. This works basically the same except that the if else block (collision with the bottom edge of the canvas) will trigger our "game over" state. For now we'll keep it simple, showing an alert message and restarting the game by reloading the page. Replace the second if statement with the following:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    document.location.reload();
}

Letting the paddle hit the ball

The last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. The easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. Update the last but of code you modified again, to the following:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

If the ball hits the bottom edge of the Canvas we're checking whether it is touching the paddle: if yes, then it bounces off just like you'd expect; if not then the game is over as before.

Compare your code

Here's the working code for you to compare yours against:

Next steps

We're doing quite well so far — our game is starting to feel a lot more worth playing now you can lose! But it is still missing something. Let's continue to the sixth chapter — Build the brick field — and create some bricks for the ball to destroy.