Skip to the object
Tactile UI

Kerb

A crossing game on a dot-matrix LCD handheld: hop a hedgehog over five lanes of traffic, then over the river on drifting logs, to the five burrows in the hedge.

What it is for

A game you could hold, on a screen that reads as real glass.

Installnpx shadcn add https://tactileui.dev/r/kerb.jsonWith a Pass: how

Controls

The switch on the case, off to begin with. On, a hop ticks, a log knocks, traffic thumps, the river splashes and a burrow chimes, once the visitor has touched the page (a browser allows sound only after a press). Their own setting is kept on their device.

What a screen reader calls the case.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 8 days. Want one email that morning?

Datasheet

Mechanism
Shared handheld case, Dot matrix lcd, Liquid crystal response, Reflector shadow, Fixed step lanes, Dot exact collision, Log riding, Buffered moves, Lookahead pilot, Seven segment digits, Token driven materials, Pointerdown keys, Synthesised sound, Scale as an object
Stack
Vanilla ES modules, CSS, Canvas 2D, Web Audio
Needs
Nothing, no dependencies
States
12 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playHop the hedgehog from the kerb at the bottom to a free burrow in the hedge at the top. Traffic strikes it; the river takes it unless it is on a log; a log carries it with the current, and off the side of the screen is lost. Into the hedge beside a burrow, or into one already taken, is lost too. Three lives and forty seconds a crossing. Ten points for every lane further than it has been on this crossing, fifty for a burrow and two more for each second to spare, two hundred and fifty for clearing a level. Five burrows filled clear the level and everything runs a fifth faster.
  2. KeysThe arrow keys or W A S D hop one cell a press (a key held down does not repeat; a press during a hop is kept and played when it lands). Space or Enter starts a game and pauses it; P pauses and carries on; Esc pauses; F fills the screen. The D-pad on the case does what the arrows do. On a phone, swipe anywhere on the screen to hop that way, or tap it to hop forward; a tap starts a game. Sound is off until the switch is on.
  3. Made ofThe kit's Panel (the case), LCD (the dot-matrix window's glass and ink, and the segment LCD with the score, the level and the best in seven segments, a bar of twenty segments for the time and three printed hedgehogs for the lives), Lamp (playing, paused, lost), Key (the D-pad and the primary Start key), Tray (the D-pad's well), Switch (Sound) and Grille; the dots drawn on a canvas from the finish's own tokens.
  4. WaitingThe screen plays a demo: a careful pilot takes a hedgehog across while the traffic and the river run. The segment LCD shows the best and a full time bar, the status line says Press start. Under reduced motion the screen holds still.
  5. CrossingThe lamp is green. Each press hops the hedgehog a cell, nose first, legs out mid-hop; the time bar runs down and its last quarter blinks; the score counts every lane further. On a log the hedgehog rides it dot for dot.
  6. LostThe lamp goes red and the status line says why: Hit (flattened where it stood), Splash or Swept (rings on the water), Hedge or Time (rolled up). A printed hedgehog goes out, and after a moment the next one starts from the kerb.
  7. HomeA burrow taken shows the hedgehog rolled up inside it; a chime, the points said aloud. With all five full they blink, and LEVEL and the next number slide in over the verge before the lanes run faster.
  8. PausedThe lamp is amber, PAUSE is framed over the verge and nothing moves; the screen stops drawing once the glass has settled. A hidden tab, or the case scrolled out of sight, pauses a crossing too.
  9. Game overThe last hedgehog goes out, the lamp stays red and GAME OVER is framed over the verge while the lanes run on; the best score is kept on this device. Start, a key or a tap plays again.
  10. SoundOff until the switch is turned on, and silent until the page is touched. Synthesised: a short tick for a hop, a knock onto a log, a thump for traffic, a splash, a chime for a burrow, a run up the scale for a level, a tick for each of the last five seconds.
  11. Reduced motionThe hedgehog is where it lands as soon as the key is pressed, with no hop; the level's banner is simply there rather than sliding in; nothing blinks; the dots change at once rather than fading; and the screen holds still while it waits for Start. The traffic and the river still run while a game is played: they are the game.
  12. Twelve finishes, two volumesThe case reads the finish and volume tokens; the dot window is the kit's LCD glass and its dots are the finish's LCD ink, so the grey-green reflective panel of Aluminium, the amber backlit one of Night and the dark glass with light dots of Phosphor each draw their own. Quiet takes away the dots' cast shadow and the lamp's sheen.

Notes

A reflective dot-matrix LCD, 120 by 104 dots, sits in the library's handheld case above a segment LCD for the score, the level, the best, the time left and the lives, with a D-pad, Start, the sound switch and a speaker grille. Take a hedgehog from the kerb over five lanes of traffic (a lorry, a car, a van, a tractor, each lane at its own speed and its own way), onto the verge, then over the river on the drifting logs to the five burrows in the hedge. On a log it rides it; a log that carries it off the screen takes it under. Fill the five burrows to clear a level, and everything runs faster on the next. Every move is one cell a press with a short hop, and every hit is judged on the dots the screen shows, forgiving by a few of them. While it waits for Start the screen plays a demo crossing of its own.

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object. The rules, the pilot and the dot-matrix screen are the game's own (rules.mjs, screen.mjs). It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.

Anatomy

Shared handheld case, Dot matrix lcd, Liquid crystal response, Reflector shadow, Fixed step lanes, Dot exact collision, Log riding, Buffered moves, Lookahead pilot, Seven segment digits, Token driven materials, Pointerdown keys, Synthesised sound, Scale as an object

Usage notes

A game you could hold, on a screen that reads as real glass. Take a hedgehog from the kerb over five lanes of traffic (a lorry, a car, a van, a tractor, each lane at its own speed and its own way), onto the verge, then over the river on the drifting logs to the five burrows in the hedge. On a log it rides it; a log that carries it off the screen takes it under. Fill the five burrows to clear a level, and everything runs faster on the next. Every move is one cell a press with a short hop, and every hit is judged on the dots the screen shows, forgiving by a few of them. While it waits for Start the screen plays a demo crossing of its own.

Options

OptionTypeDescription
soundbooleanThe switch on the case, off to begin with. On, a hop ticks, a log knocks, traffic thumps, the river splashes and a burrow chimes, once the visitor has touched the page (a browser allows sound only after a press). Their own setting is kept on their device.
labeltextWhat a screen reader calls the case.

Methods

  • hooks
  • update
  • destroy

How it works

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object. The rules, the pilot and the dot-matrix screen are the game's own (rules.mjs, screen.mjs). It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.