Interactive browser arcade
Kiki Arcade
A colorful collection of creative toys, arcade classics, and miniature browser adventures.
“I can turn small experiments into one cohesive, polished, and maintainable interactive product.”
01
Problem
Several earlier projects—Ganvas, Ticking Room, Pocket Calc, and Hand Game—were too small to stand alone in a portfolio. The challenge was to preserve what made each one playful while combining them with new games into a collection that felt intentional rather than like a list of disconnected demos.
02
Role
Product direction, visual design, game design, frontend architecture, implementation, accessibility, testing, and deployment.
03
Constraints
Fourteen experiences with different controls and rendering needs had to coexist in one dependency-light app, work across keyboard, pointer, touch, and swipe input, preserve local progress, respect reduced-motion preferences, and clean up timers, animation frames, audio, and event listeners when players changed games.
04
Process
I grouped the collection into Featured Adventures, Creative Studio, and Arcade Classics, then gave every experience a shared launcher and game-page shell. Each game is an independently mounted module with its own state and cleanup function. I rebuilt the original experiments, added five larger adventures and familiar beginner games, unified the visual system, and extracted pure game logic so it could be tested outside the interface.
05
Result
A responsive arcade containing 14 complete browser experiences—from pixel drawing and ambient interaction to puzzle, strategy, platform, flight, and classic games—with persistent records, accessible controls, reduced-motion support, generated audio cues, and 22 automated logic tests.
Experience highlights
- Five miniature adventures: Garden Serpent, Night Shift, Parcel Quest, Patchwork Odyssey, and Paper Skies
- Five creative experiences, including Ganvas with drag drawing, erasing, flood fill, undo, rainbow paint, and PNG export
- Four polished arcade classics with saved wins, streaks, move records, and personal bests
- Responsive keyboard, pointer, touch, swipe, and on-screen controls
- Local progress, scores, unlocks, and motion preferences without requiring an account
Engineering & performance
- Vite and native ES modules keep the runtime small and avoid a UI-framework dependency
- Independent mount and cleanup functions prevent games from leaking listeners, timers, animation frames, or audio
- Canvas powers drawing, defense, delivery, platforming, flight, and Snake-style gameplay where frame-based rendering is useful
- Pure domain functions cover scoring, collisions, movement, flood filling, recipes, puzzles, routes, and flight physics with Node's test runner
- Semantic controls, live status text, focus states, and prefers-reduced-motion support improve accessibility
