Brick breaker
A small brick breaker on a canvas, in the theme's colours: pointer or arrow keys, Space to launch.
Press Space or click to launch.
Features
- A canvas game: paddle by pointer or arrow keys, Space or a click launches, clear the bricks to win.
- Where the ball lands on the paddle steers it.
- Colours come from the theme: accent and muted bricks, an ink paddle and ball.
Use it for
- A 404 page.
- An easter egg.
On this site
- 404Something to break while you are lost.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
rows / cols | number | The wall (4 by 8). |
label | string | Names the canvas. |
Accessibility
- The canvas is focusable and labelled with its controls; wins and losses are announced.
- Offer it as an opt-in toy: it moves.
Source
The code is in src/kit/brick-breaker.tsx in runets, MIT licensed.