Flappy Workbench
Timing games need consistent physics and fast restart; I built a Canvas/JavaScript Flappy-style loop with gravity, jump impulse, obstacle gaps, collision checks, score/best tracking, pause/restart controls, and a labeled mobile Flap button.
- Status
- Archived experiment / live demo
- Last updated
- May 2026
- 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.
Ready
Flappy Workbench ready.
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.
Tap the playfield or press Flap to keep the run alive.
Gravity/jump physics, obstacle timing, and run state.
Main state tracks bird position and velocity, pipe array, score, best score, gravity, jump impulse, elapsed time, and whether the run is idle, playing, paused, or over. A fixed-tick loop updates physics, spawns and moves pipes, checks collisions, and redraws the canvas. Collision logic compares the bird against floor/ceiling bounds and pipe gaps; scoring increments when a passed pipe is marked complete, then persists the best score locally. Keyboard input uses Space or Arrow Up to flap, P to pause, and R to restart. Touch and pointer input call the same flap action on the stage. The lesson was keeping the state machine bounded so pause, restart, menu, and scoring behavior stay easy to reason about.
Timing-based flight loop, obstacle generation, and run-state UI.
- Implemented gravity, jump impulse, pipe spawning, gap sizing, collision checks, score tracking, and restart flow.
- Built the Canvas render loop for the player, scrolling obstacles, ground movement, menu state, status text, and best-score persistence.
- Added keyboard, pointer, tap, and labeled mobile Flap controls with pause/restart/fullscreen support.
The Flappy-style rule set is an external genre reference; the browser implementation, visuals, controls, and state wiring are custom code.
Archived experiment with a working timing loop.
Already solid includes gravity, obstacle spawning, scoring, best-score persistence, pause/restart, and touch input. Demo-only pieces include informal physics tuning and limited nonvisual gameplay support. Hardening would add deterministic physics tests, mobile-browser QA, reduced-motion review, save reset behavior, and more robust pause/resume validation.
Static timing game with no backend.
Hosted/run location: GitHub Pages serves flappy-workbench.html, flappy-workbench.css, and flappy-workbench.js. Environment/config: no environment variables are required; gravity, pipe timing, scoring, and pause/restart behavior are configured in JavaScript. External APIs/services: none beyond Canvas, keyboard/touch/pointer events, Fullscreen, and LocalStorage for best score. Local development: run python -m http.server 8000 and open /flappy-workbench.html. Security: no secrets or remote user data are involved.