How to Make a Breakout Clone in HTML5 with Phaser

This is a short Phaser tutorial that will show you how to create a simple breakout clone.

This tutorial assumes that you are already a little familiar with Phaser. If that's not the case, you should first read my complete beginner tutorial on how to make Flappy Bird with Phaser.

Empty Game

Let's start by creating the structure of our game, which is basically an empty Phaser project.

// Create the state that will contain the whole game
var mainState = {
preload: function() {
// Here we preload the assets
},
create: function() {
// Here we create the game
},
update: function() {
// Here we update the game 60 times per second
},
};
// Initialize the game and start our state
var game = new Phaser.Game(400, 450);
game.state.add('main', mainState);
game.state.start('main');

And we can add this inside the create() function to set some game settings.

// Set the background color to blue
game.stage.backgroundColor = '#3598db';
// Start the Arcade physics system (for movements and collisions)
game.physics.startSystem(Phaser.Physics.ARCADE);
// Add the physics engine to all the game objetcs
game.world.enableBody = true;

In the rest of the tutorial we will only focus on the code inside the mainState.

Add the Paddle

Let's add a paddle that we can control with the arrow keys. I only wrote the code that changed below, so don't be surprised if there isn't the settings we added previously.

Handle Collisions

Finally, we should handle all the collisions in our game.

update: function() {
// Add collisions between the paddle and the ball
game.physics.arcade.collide(this.paddle, this.ball);
// Call the 'hit' function when the ball hits a brick
game.physics.arcade.collide(this.ball, this.bricks, this.hit, null, this);
// Restart the game if the ball is below the paddle
if (this.ball.y > this.paddle.y)
game.state.start('main');
},
// New function that removes a brick from the game
hit: function(ball, brick) {
brick.kill();
},

Result

Here's the little breakout clone that we built together.

Conclusion

With less than 50 lines of code we have a simple breakout clone. It's quite basic, but you can easily improve it if you want.

If you want to learn more about Phaser, you should check out my ebook Discover Phaser. It explains in detail how to build a full featured game with Phaser. More information on DiscoverPhaser.com.

Get my free ebook "How To Create and Promote Your Own Games" and be notified when I write new tutorials

More than 12,000 people already joined. No spam and unsubscribe at any time.