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.

preload: function() {  
    game.load.image('paddle', 'assets/paddle.png');
},

create: function() { 
    // Create the left/right arrow keys
    this.left = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    this.right = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);

    // Add the paddle at the bottom of the screen
    this.paddle = game.add.sprite(200, 400, 'paddle');

    // Make sure the paddle won't move when it hits the ball
    this.paddle.body.immovable = true;
},

update: function() {  
    // Move the paddle left/right when an arrow key is pressed
    if (this.left.isDown) this.paddle.body.velocity.x = -300;
    else if (this.right.isDown) this.paddle.body.velocity.x = 300; 

    // Stop the paddle when no key is pressed
    else this.paddle.body.velocity.x = 0;  
},

Add the Bricks

Now, let's add 5x5 bricks at the top. Again, only the code that changed is written below.

preload: function() {  
    game.load.image('brick', 'assets/brick.png');  
},

create: function() {  
    // Create a group that will contain all the bricks
    this.bricks = game.add.group();  

    // Add 25 bricks to the group (5 columns and 5 lines)
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 5; j++) {
            // Create the brick at the correct position
            var brick = game.add.sprite(55+i*60, 55+j*35, 'brick');

            // Make sure the brick won't move when the ball hits it
            brick.body.immovable = true;

            // Add the brick to the group
            this.bricks.add(brick);
        }
    }
},

Add the Ball

Next, let's add a bouncing ball.

preload: function() {  
    game.load.image('ball', 'assets/ball.png'); 
},

create: function() {  
    // Add the ball 
    this.ball = game.add.sprite(200, 300, 'ball');  

    // Give the ball some initial speed
    this.ball.body.velocity.x = 200;
    this.ball.body.velocity.y = 200;

    // Make sure the ball will bounce when hitting something
    this.ball.body.bounce.setTo(1); 
    this.ball.body.collideWorldBounds = true;
},

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.

Wait! Get my free ebook :-)

Want to get my free ebook
"How To Create and Promote Your Own Games"
and be notified when I write new gamedev tutorials?

Then join the newsletter below.

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