Bounce off the walls

This is the 6th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson06.html.

Now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls.

Bouncing off the world boundaries

The easiest way to get our ball bouncing off the walls is to tell the framework that we want to treat the boundaries of the <canvas> element as walls and not let the ball move past them. In Phaser this can be easily accomplished using the collideWorldsBound property. Add this line right after the existing game.physics.enable() method call:

js
ball.body.collideWorldBounds = true;

Now the ball will stop at the edge of the screen instead of disappearing, but it doesn't bounce. To make this occur we have to set its bounciness. Add the following line below the previous one:

js
ball.body.bounce.set(1);

Try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.

Compare your code

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps

This is starting to look more like a game now, but we can't control it in any way — it's high time we introduced the player paddle and controls.