To make the game more interesting we can introduce the ability to lose - if you don't hit the ball before it reaches the bottom edge of the screen it will be game over. To do that, we need to disable the ball's collision with the bottom edge of the screen. Add the code below in the create function where you define the ball's attributes:
game.physics.arcade.checkCollision.down = false;
This will make the three walls (top, left and right) collidable against the ball, but the fourth (bottom) will dissapear. The ball will go out of screen at the bottom, so we need a way to detect that and act accordingly:
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(function(){
alert('Game over!');
location.reload();
}, this);
Adding those lines will make the ball check the world (in our case Canvas) bounds and execute the function bound to the onOutOfBounds event. Inside it, when you click on the alert, the page will be reloaded so you can play again.
You can check the finished code for this lesson for yourself in the live demo below, and play with it to understand better how it works:
Now when the basic gameplay is in place let's make it more interesting by introducing the bricks we can smash - it's time to build the brick field.