Glitch Arcade
Inspiration
I took inspiration from games I played as a child (like Gravity Run, the Google Dino game, Geometry Dash, and Sokoban style crate puzzles) and reimagined them around the hackathon's theme: games you can only beat by exploiting the glitch. So I took those familiar genres and made them harder, weirder, and built each one around a single rule breaking trick you have to discover and abuse to win.
What it does
This game has 5 challenges to complete:
- Gravity Gauntlet : an accelerating auto runner where you flip gravity between the floor and ceiling to dodge spikes and open-space holes.
- Neon Dash : a Geometry dash style runner where some walls are impossible to jump, so you must phase clip straight through them with limited charges.
- The Box Room : three Sokoban puzzle rooms you escape by walking through an invisible wall or crushing a crate into a too-small gap.
- Upside Dash : Neon Dash, but the whole screen is mirrored vertically so your jump looks like it drops you.
- Neon Overdrive : a three lane runner with overload zones too fast to react to, until you slow down time.
You have to finish all five of these challenges to beat the game.
How we built it
I built it as a single page web app so it runs entirely in the browser with no install:
- React + Vite drive the screens (title, hub, game, win) and the overall flow.
- Each mini-game runs on a raw HTML5
<canvas>with my own lightweight game loop and physics (gravity, jumping, collisions, surface-flipping, lane switching), no game engine, justrequestAnimationFrameand math, which keeps the whole build tiny (~0.9 MB). - A custom input engine that lives outside React so keypresses are never dropped, feeding the same code path for both keyboard (WASD/arrows) and on-screen touch buttons, so it works on desktop, phone, and iPad.
- Visual polish with per-game neon color palettes, particle bursts, motion trails, screen shake, and animated win/death sequences, plus framer-motion and a few WebGL/Three.js effects for the menus.
- To guarantee the games are actually beatable, I wrote an automated test harness (
npm test) that headlessly "plays" all five with a scripted solver and confirms each one can be cleared (and that doing nothing never wins).
Challenges we ran into
The biggest challenge was making it look polished and feel real instead of like a rough prototype. The second was making absolutely sure nothing was broken. I tested every game many times, and even wrote an automated solver that plays each level to prove it's winnable. Early on the games had bugs and a couple were basically impossible to finish; I debugged each one, added checkpoints so the hard levels stay fair, and tuned the difficulty until every challenge was hard but beatable.
Accomplishments that we're proud of
I'm proud that the game is genuinely hard to beat, especially for someone trying it for the first time. I spent a lot of time designing each challenge so it escalates in speed and pressure, and made sure the "glitch" in each one is something you have to figure out and exploit rather than just react to.
What we learned
I learned a lot, including:
- Building retro / arcade style games from scratch on an HTML5 canvas
- Handling input compatibility across keyboard and touch/iPad controls
- Designing new challenges and balancing difficulty so a game is hard but still fair
- Writing automated tests to verify a game is actually completable
What's next for Glitch Arcade
- Add more games and glitch mechanics
- Polish the phone/tablet experience further
- Launch it as a standalone app
Built With
- css3
- framer
- html5
- javascript
- node.js
- react18
- vite6
Log in or sign up for Devpost to join the conversation.