Zac Batten Inefy interactive lab / Flappy Workbench
Game guide

Flappy Workbench

Canvas Flappy-style loop with gravity, jump impulse, gaps, collisions, score/best tracking, pause/restart, and mobile Flap.

Status
Archived experiment / live demo
Last updated
May 2026
Back to Interactive Lab
Controls
Time each flap to pass through obstacle gaps and keep the run alive.
Keyboard
Space or Arrow Up flaps, P or Escape pauses and resumes, and R restarts the run.
Touch
Tap the playfield or use the large Flap button; restart and pause stay available above.
Accessibility
Score, best score, and live run status are exposed outside the visual canvas playfield.
Score 0
Best 0

Ready

Flappy Workbench ready.

Control reference

Keyboard and touch controls

Keyboard shortcuts

  • SpaceStart the run or flap while playing.
  • Arrow UpFlap while the run is active.
  • P / EscPause or resume the run.
  • RRestart the run from the beginning.

Touch controls

  • Tap canvasStart or flap from the playfield.
  • Flap buttonUse the large button below the canvas for repeated flaps.
  • Pause buttonUse the page action button when you need to stop the loop.
Flappy Workbench Best 0

Tap the playfield or press Flap to keep the run alive.

Implementation notes

Gravity/jump physics, obstacle timing, and run state.

Main state tracks bird, pipes, score, physics values, time, and run state. One loop updates physics, spawns pipes, checks collisions, and redraws.

What I built

Timing-based flight loop, obstacle generation, and run-state UI.

Flappy-style rules are familiar; browser implementation, visuals, controls, and state are custom.

Production readiness

Archived experiment with a working timing loop.

Solid: gravity, obstacles, scoring, best score, pause/restart, and touch input. Hardening: physics tests, mobile QA, reduced motion, save reset, and pause/resume checks.

Deployment and run notes

Static timing game with no backend.

GitHub Pages serves flappy-workbench.html, flappy-workbench.css, and flappy-workbench.js. No env vars or external APIs beyond browser APIs and LocalStorage. Local: run python -m http.server 8000 and open /flappy-workbench.html.

Keep exploring

More browser demos

Compare timing-based obstacles with the other demos and main case studies.