Our game appears to be completed, but if you look close enough you'll notice that the ball is bouncing off the paddle on the same angle throughout the whole gameplay. You can predict and remember where it will go the more you play, which isn't very helpful in terms of high replayability. To fix that we can change the ball's velocity depending on the exact spot it hits the paddle:
function ballHitPaddle(ball, paddle) {
ball.animations.play('wobble');
ball.body.velocity.x = -1*5*(paddle.x-ball.x);
}
It's a little bit of magic - the new velocity is higher the bigger distance there is between the center of the paddle and the place where the ball hits it. Also, the direction (left or right) is determined by that value - if the ball hits the left side of the paddle, it will bounce left and hitting the right side will bounce it to the right. It ended up that way because of a little bit of experiments with the given values, you can change them on your own and see what happens.
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:
You've finished all the lessons - congratulations! By this point you would have learnt the basics of Phaser and the logic behind simple 2D games.
You can do a lot more in the game, add whatever you feel would be the best. It's a basic intro scratching the surface of the countless helpful methods that Phaser provide. Be sure the check the ever growing list of examples and the official documentation, and visit the HTML5 Gamedevs forums if you ever need any help.
You could also go back to this tutorial series' index page.