ported2browserTHE INDEPENDENT FIELD GUIDE

ARCADE / BROWSER RECREATION

JavaScript Breakout.

Jake Gordon’s Canvas Breakout implementation gives you a paddle, a ball and rows of bricks. Its original interface documents both arrow-key control and dragging the paddle on touch devices.

Browser recreationKeyboard / touch documented
Open original game ↗ (opens a new tab)

Opens the project’s game host.

JavaScript Breakout project illustration
Actual opening-screen capture of the linked JavaScript Breakout browser project. This is not a completed gameplay test. Source & credits (opens a new tab)
EXPLORE THIS COLLECTIONPorts & recreations ↗Arcade & reflex ↗Racing & physics ↗

YOUR FIRST SESSION

Your first few moves.

Jump to controls ↓
  1. 01

    Start with the keyboard or touch prompt

    Use the prompt shown for the active input mode.

  2. 02

    Track the descending ball

    Move toward where it will cross the paddle’s height.

  3. 03

    Try another arrangement

    The level controls let you inspect different brick layouts.

KEEP THIS HANDY

Controls at a glance.

Space
Start with keyboard controls.
Left / right
Move the paddle.
Up / down
Change level as described by the interface.
Touch / drag
Touch the start area, then drag the paddle on supported touch devices.

Move toward the landing point

As a learning technique, watch the ball as it descends and estimate where it will reach the paddle. Following its current horizontal position with constant small corrections can make you late to the actual landing point. Leave enough room to adjust when a side-wall bounce changes the approach.

Use the layout to practice a particular bounce

The original interface exposes level selection with the up and down controls. Repeating one arrangement helps you learn how walls and remaining bricks redirect the ball. Changing a level is an exploration control, so this guide does not present it as evidence of earning progression through earlier boards.

The implementation has useful reading behind it

The creator’s articles explain collision detection, state handling, sound and touch input. If you are interested in how a compact browser game works, those notes connect the visible paddle-and-ball behavior to the implementation. The code and sound effects carry different licence terms; the MIT label is not a blanket licence for every asset.

BEFORE YOU CLOSE THE TAB

What happens to your progress?

No persistent campaign or save export is documented for this demonstration.

Check the save and backup guide ↗

A FEW USEFUL ANSWERS

Before the next click.

Does this need an emulator?

No. It is a JavaScript and Canvas implementation.

Is every file MIT licensed?

The code uses MIT terms. The sound effects have separate notices described in the project.

Follow the source.

Jake Gordon; individual sound creators credited upstream. Licence notice. MIT code; sounds have separate CC BY-ND 2.0 terms.

Latest collected source change: updated links s/codeincomplete.com/jakesgordon.com (opens a new tab) . Repository activity does not identify the hosted game version.

All media and source credits ↗
KEEP EXPLORING

Another open tab.

All games
Digger project imageArcade

Dig a route through an old arcade idea

Browser recreationKeyboard