Platform
• Web (React 18 + TypeScript) • Canvas renderer + React UI overlays
Role
• Solo (UX/UI + engineering)
Overview
"Single-page React web arcade game (Asteroids-inspired) rendered on HTML5 Canvas with React UI overlays.
Main functions: modern gameplay additions (difficulties, boosts, UFOs, hazards). Deep progression (achievements/unlocks/prestige), daily challenge — mobile controls, accessibility, full local save/persistence.
The problem
Classic asteroids are instantly understandable, but two things tend to break fast:
1. Readability collapses as chaos increases (deaths feel surprising, not fair).
2. Motivation fades after repeated runs (no long-term goals, no personalization).
I tried to keep the original arcade feel while adding new features like save/resume, settings, accessibility, and progression that works without accounts.
Research assumptions (hypothesis-driven)
This was a solo build, so I designed around a few testable assumptions, and iterated via playtesting:
• Readability breaks first: Players need help tracking threats, boosts, and danger states.
• Retention needs two loops: Short-term "feel good now" + long-term goals.
• Agency reduces frustration: motion/FX/audio/control schemes must be adjustable.
• Web-first needs low friction: fast load, no backend dependency, mobile support.
The solution
A simple React game that uses HTML5 canvas with neon/glass-like UI overlays. It has daily challenges, deep progression (achievements/unlocks/prestiges), mobile controls, and a procedural audio engine (no audio files).
Core features
Modernized arcade loop
• 5 difficulties (Cozy → Brutal) with distinct lives/speed/boost drop tuning.
• Level pacing: Asteroid count scales as 3 + level, with speed scaling by level and difficulty.
Combat variety (keeps runs from feeling samey)
• 5 boosts: Shield, Rapid Fire, Triple-Shot, Slow-Mo, Homing missiles
• UFO enemies (large and small) with targeting behavior and unique scoring
• Environmental hazards: solar flares (telegraphed sweep), gravity wells/black holes. Armored asteroids, comets, wreckage hazards
Progression without a backend
• 99 achievements across 5 categories and category titles
• Unlockables: 23-ship designs, 6 skins, 14 themes
• Prestige system (level 15+) with perks and perk slots
• Persistence: settings, stats, achievements, prestige, high score, run history, save/resume (24h expiry) via localStorage
UX decisions (what I optimized for)
1) Readability under chaos
Decision: Keep HUD minimal but information-rich, make critical states unmistakable.
How: score/level/lives and active boost timers and combo indicator — optional radar/minimap and edge warnings to reduce off-screen surprise deaths — consistent urgency patterns (e.g., boost expiry blink).
2) Onboarding without killing momentum
Decision: Teach in layers, not a lecture.
How: Multi-step How to Play overlay and contextual first-run tips that can be dismissed.
3) Player agency via settings (with sane defaults)
Decision: Let players tune comfort, performance, and difficulty.
How: settings organized into 4 tabs (General / Effects / Themes / Cosmetics) with toggles for particle density, shake, trails, flash, CRT overlay, FPS, autofire, and control scheme.
4) Accessibility: Reduced motion that affects gameplay and UI
Decision: Reduced motion should control CSS + UI animations and canvas effects (not just “turn off transitions").
How: 3-state reduced motion (Off/System/On) gates particles/shockwaves/shake/flash/cursor trails/warp/confetti while preserving informational feedback (damage and repair vignettes).
5) Mobile controls as first-class UX
Decision: Mobile shouldn't feel like a compromise.
How: choose buttons vs joystick — safe-area support — thumb-friendly targets — focus fire behavior for triple-shot on joystick mode.
6) Flow feedback loops
Decision: Every action should feel responsive and rewarding.
How: Combo multiplier and kill streak announcements and score popups, plus non-blocking achievement toasts and cohesive audio/visual reinforcement.
Design decisions (visual and interaction)
Visual identity: neon glassmorphism
• Frosted panels, glowing borders, theme-driven accent colors
• Orbitron for sci-fi display text — Exo 2 for readable UI text
• Theme system affects ship/bullets/FX/UI/background for cohesive "mood swaps"
"Arcade polish" as a product feature
• CountUp game-over stats, prismatic level-clear moments, optional CRT overlay, neon cursor/ripple interactions. Daily challenge designed as a "shared run" via seeded randomness
Tradeoffs (what I chose not to do)
• No online leaderboards: local-first reduces friction but allows manipulation (acceptable for single-player).
• Customization increases UI complexity: contained via tab structure and strong defaults.
• Large core component (~5000+ lines): faster iteration vs maintainability — documented as a known issue and future refactor target.
• Local Storage limits: Mitigated by capped run history and export/import backups — custom ship images can be large.
Nice touches (polish and delight)
• Procedural audio engine (Web Audio API): dual-bus SFX/Music, dynamic layers, pitch variation to reduce fatigue
• Run history and stats visualization (radar and area charts)
• Backup export/import + "Danger Zone" with double confirmation resets
• Easter eggs (Konami CRT toggle, secret words, idle UFO, clickable title shatter, dev card, hidden ship unlock)
Results (what shipped)
A modern arcade Asteroids that's:
• Readable at high intensity (HUD clarity and optional threat awareness tools)
• Motivating across sessions (achievements/unlocks/prestige and daily challenge)
• Comfortable across devices (mobile schemes, reduced motion, adjustable FX/audio)
• Fully local-first (save/resume and persistence without a backend)
The site is current and can be updated or modified with additional functions and features.
See the live project on an external siteScroll down this page to explore webpage Showcase. You can click on the thumbnail to open the Gallery mode view.
