Play Breakout: A Solo Canvas Game

A complete single player game built with the HTML canvas and plain JavaScript. Play it right here, then read how it works.

This is a real, runnable game, not a screenshot. Move the paddle, keep the ball alive, and clear every brick. It is built from the same parts every game needs: a game loop, canvas drawing, input handling, collision detection, and game state. Everything runs in your browser with no library and no build step.

How to play

Press Space or tap Start to launch the ball. Move the paddle with the left and right arrow keys, or by sliding your mouse or finger across the game. Bounce the ball up into the bricks to clear them, and do not let it fall past the paddle. You have three lives, and clearing every brick wins the round. The angle the ball leaves the paddle depends on where it strikes, which is how you aim it.

How this game is built

Every part of this game maps to a concept in the game development cluster, so you can read each piece and then build your own.

The game loop

A loop driven by requestAnimationFrame updates positions and redraws the screen around sixty times a second. That single repeating cycle is the heart of every game, explained in game loop fundamentals.

Drawing on the canvas

The paddle, ball, and bricks are painted each frame with the canvas 2D context, clearing and redrawing from scratch every time. The techniques are in canvas 2D rendering.

Reading input

Keyboard, mouse, and touch events set the paddle position, the subject of handling game input.

Detecting collisions

Plain rectangle and edge checks decide when the ball meets a brick, a wall, or the paddle, covered in collision detection.

Tracking game state

Score, lives, and the start, win, and game over phases are simple variables the loop reads, the idea behind game state management.

Build your own

This game is deliberately small so you can read all of it in one sitting. The full game development cluster walks through each piece in order, and the multiplayer Pong demo shows how two players share a single game on one screen.

Frequently asked questions

How do I control the paddle?

Use the left and right arrow keys, or move your mouse or finger across the game. The paddle follows your pointer, and the arrow keys nudge it at a steady speed.

Is this game built with a game engine?

No. It uses only the HTML canvas and plain JavaScript, with no library and no build step. That is what keeps it small enough to read and learn from.

How does the game run smoothly?

A requestAnimationFrame loop redraws the screen about sixty times a second, in step with the display, which keeps motion smooth without a timer.

Can I build a game like this myself?

Yes. The whole thing is a few dozen lines, and each part maps to an article in the game development cluster, so you can rebuild it piece by piece.