Build a Phaser 4 Breakout Game — Complete HTML5 Browser Tutorial

Build a fully playable Breakout brick-breaker in Phaser 4 — paddle, ball, 40 destructible bricks, score counter, and three lives — entirely in the browser, no downloads, no assets. Under 80 lines of Phaser 4 Scene code. The game auto-plays an AI paddle so you can watch the physics in action, or grab the mouse to play yourself.

↗

What you will build

A Phaser 4 scene with a ball bouncing off walls, a paddle controlled by the mouse (with AI fallback for auto-play), 40 bricks arranged in 5 color-coded rows, a score counter, and a lives system. When all bricks are cleared the game resets — a clean loop you can fork as an arcade game starter.

PHASER 4 LIVE GAME

Phaser 4 Breakout — Play in Browser

Move the mouse to control the paddle — or watch the AI play

How the Phaser 4 Breakout game is structured

The entire game lives in a single Phaser.Scene class with two methods: create() sets up the scene objects once, and update() runs every frame. Bricks are stored in an array of Phaser.GameObjects.Rectangle objects, each with an alive flag. When a brick is hit, the flag is set to false and the rectangle is hidden — no physics engine required for a game this size.

Ball physics is manual: add velocity to position each frame, flip the sign on collision. Paddle angle is computed from how far off-center the ball hits: const offset = (ball.x - paddle.x) / halfPaddleWidth. Multiplied by a max speed of 5.5, this gives a range from sharp angles at the edges to straight bounces at the center — the core feel of Breakout.

breakout.js KEY IDEA

// Place bricks in a grid
for (let row = 0; row < 5; row++) {
  for (let col = 0; col < 8; col++) {
    const brick = this.add.rectangle(
      60 + col * 76, 55 + row * 28,
      68, 20, rowColors[row]
    );
    brick.alive = true;
    this.bricks.push(brick);
  }
}

// Angle the ball based on paddle hit position
const offset = (ball.x - paddle.x) / halfPaddle;
ball.vx = offset * MAX_SPEED;
ball.vy = -Math.abs(ball.vy);

Breakout needs no physics engine — manual velocity + AABB collision is 10 lines and runs at 60 fps in every browser.

Why Phaser 4 is ideal for HTML5 arcade games

Phaser 4's Scene API gives you a deterministic create → update loop, an automatic renderer that switches between WebGL and Canvas 2D, and built-in input events — everything Breakout needs. The Phaser.Scale.FIT mode handles all screen sizes automatically, so your game looks correct on mobile and desktop without a single line of resize code.

For a game like Breakout, you don't need Phaser's physics engine (Arcade or Matter.js). Manual velocity math is faster to write, easier to debug, and runs identically everywhere. Reserve Phaser's physics for games with complex collision shapes or many interacting bodies.

Performance note

40 bricks as Rectangle game objects are batched into a single draw call in Phaser's WebGL renderer. If you scale to hundreds of bricks, switch to a Phaser.GameObjects.Graphics or a tilemap for even lower draw-call overhead.

Extend this into a full game

Add power-ups by spawning a falling rectangle when a brick is destroyed. Add multiple balls for chaos mode. Randomize brick layouts each round for a roguelike Breakout. Replace the rectangles with sprite textures using this.add.image() for pixel-art bricks. Add a high-score system with localStorage in three lines. This mini game is a complete, forkable foundation.

ADVERTISEMENT

ADVERTISEMENT