Free Breakout Game Source Code in HTML, CSS & JavaScript

Here is free Breakout Game source code built with HTML, CSS and JavaScript. Learn how to create a simple HTML5 arcade game with blocks, paddle, score and lives.

If you want to create a simple arcade game with HTML, CSS and JavaScript, a Breakout game is a great project to try.

In this game, the player controls a paddle at the bottom of the screen and uses it to bounce a ball. The goal is to break all the blocks without letting the ball fall below the paddle.

The game is made with HTML5 Canvas and JavaScript, so you can run it directly in a web browser without installing any external library.

This project is also useful for beginners who want to understand how animation, keyboard controls, collision detection and game loops work together.

WHAT IS A BREAKOUT GAME Code?

Breakout is a classic arcade-style game where a ball moves around the screen and breaks blocks when it hits them.

The player controls a horizontal paddle and tries to keep the ball in play.

The basic rules are simple:

  • Move the paddle left and right.
  • Keep the ball from falling.
  • Hit the blocks with the ball.
  • Break all the blocks to complete the level.
  • The game ends if the ball reaches the bottom.

BREAKOUT GAME Code FEATURES

This version includes:

  • HTML5 Canvas
  • Player paddle
  • Moving ball
  • Breakable blocks
  • Collision detection
  • Score counter
  • Lives system
  • Game over screen
  • Win message
  • Restart button
  • Keyboard controls
  • Mobile touch controls
  • No external libraries
  • Simple and easy-to-edit code

FREE BREAKOUT GAME SOURCE CODE

The complete project is contained in one HTML file.

You can copy the code below and save it as:

index.html Breakout Game

<span>
  Score:
  <strong id="score">0</strong>
</span>
<span>
  Lives:
  <strong id="lives">3</strong>
</span>

<button class="control-btn" onclick="moveLeft()">
  ◀
</button>
<button class="control-btn" onclick="moveRight()">
  ▶
</button>

Use Arrow Keys or the buttons to move the paddle. Play Again

HOW TO USE THE BREAKOUT GAME

Using this project is simple.

  1. Copy the complete HTML code.
  2. Open Notepad or VS Code.
  3. Create a new file.
  4. Paste the code.
  5. Save the file as index.html.
  6. Open the file in your browser.
  7. Use the Left and Right arrow keys to control the paddle.

If you are using a mobile phone, you can use the buttons below the game to move the paddle.

HOW The Game Code Works

The game uses an HTML5 Canvas to draw the paddle, ball and blocks.

JavaScript continuously updates the position of the ball. When the ball touches the side of the game area, its direction changes.

The same idea is used when the ball hits the paddle or one of the blocks.

Every time a block is hit, it disappears and the player’s score increases.

The player starts with three lives. If the ball falls below the paddle, one life is removed.

If all three lives are lost, the game ends.

HOW COLLISION DETECTION WORKS

Collision detection is one of the most useful parts of this project.

JavaScript checks whether the position of the ball overlaps with a block.

When an overlap is detected, the block is removed and the ball changes direction.

The same type of logic is used when the ball reaches the paddle.

This makes the project a useful example for beginners who want to learn how browser games detect objects touching each other.

HOW TO CUSTOMIZE THE GAME

The paddle color is controlled by this CSS:

background: #2563eb;

You can replace the color with any color you want.

CHANGE THE BALL COLOR

The ball uses:

#facc15

You can change it to another color to match your website or game design.

CHANGE THE NUMBER OF BLOCKS

The number of rows and columns is controlled by:

const brickRowCount = 5;
const brickColumnCount = 8;

Increasing these values will create more blocks.

CHANGE THE GAME SPEED

The ball speed is controlled by:

let ballDX = 3;
let ballDY = -3;

Increasing these numbers will make the ball move faster.

ADD MORE LEVELS

You can create multiple levels by changing the number of blocks and increasing the ball speed after each level.

You could also change the colors and layouts for every level.

MOBILE SUPPORT

This version includes simple touch-friendly buttons for mobile users.

Desktop players can use the Left and Right arrow keys, while mobile users can tap the buttons underneath the game.

IDEAS FOR FUTURE IMPROVEMENTS

Once the basic game is working, you can add many new features.

Some ideas include:

  • Multiple levels
  • Different block colors
  • Special power-ups
  • Sound effects
  • Background music
  • Different paddle sizes
  • Faster ball after each level
  • High score system
  • Pause button
  • Start screen
  • Animated backgrounds
  • Special bonus blocks

WHY THIS PROJECT IS GOOD FOR BEGINNERS

A Breakout game is more than just a small browser game.

It gives beginners a chance to work with several important JavaScript concepts in one project.

You can learn about Canvas, animation, keyboard events, collision detection, arrays, functions and game loops.

Once you understand how this version works, you can start experimenting with your own game ideas.