Asteroids Neon Oblivion Game

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.

Scroll down this page to explore webpage Showcase. You can click on the thumbnail to open the Gallery mode view.

Core tools and overall SPA approach.

1. Project 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

2. Architecture & File Structure

Main functions: main game loop component and supporting modules for types, settings, achievements/progression, audio synthesis, utilities (drawing/physics/theme/particles/hazards), UI helpers, reduced-motion hook, easter eggs

3. Tech stack

Main functions: React + TypeScript, Tailwind, Canvas rendering, Web Audio procedural sound, UI animation library, charts library for stats, icon library, localStorage persistence

4. Core gameplay

Main functions: thrust/rotate/fire in wrap-around space — asteroids split by size — scoring with combo multiplier — circle collisions — invulnerability after death — shield absorbs damage — tuned physics constants

5. Game states and FLOW

Main functions: Menu -> countdown -> playing (pause/dying/level up branches) -> game-over -> menu

Menu functions: new/continue/daily challenge/settings/stats/prestige/how-to-play

Game-over functions: detailed stats and unlocks, and prestige option

6. Entity types

Main functions: ship, asteroids (variants) — bullets (player/UFO), UFOs, particles/debris, homing missiles, gravity wells, extra lives, rescue pods; solar flares, ship wreckage hazards

Support entities: Background stars/nebula, score popups, shockwaves, streak announcements, trails

7. Difficulty system

Main functions: 5 difficulties (Cozy -> Brutal) changing lives, speed multipliers, boost drop multipliers

Scaling: formulas for asteroid count and speed/boost scaling by level

8. Power-up / boost system

Main functions: 5 boosts (Shield, Rapid Fire, Triple Shot, Slow-Mo, Homing) as pickups with lifetime/bobbing

UX: Boosts can stack HUD timers with expiry warnings — perks can affect pickup behavior

9. Combo & Kill Streak System

Main functions: Combo builds from rapid kills and decays after timeout (score multiplier)

Kill streak: tracks fast consecutive kills and triggers, announcements and sounds

Integration: feeds achievements and flow feedback

10. UFO enemies

Main functions: large and small UFOs with movement patterns and AI shooting

Gameplay: UFO bullets damage player, destruction scoring, can drop rescue pods, distinct SFX

11. Environmental hazards

Main functions: solar flares with warning and sweep damage — gravity wells/black holes — persistent ship wreckage hazards, comets, armored asteroids

12. Prestige system

Main functions: meta-progression unlocked at level 15+. Prestige resets run state but keeps achievements/stats/settings

Progression: Prestige level increases perk slots, perks unlock over prestige levels (extra life, starting shield, faster fire, more drops, magnetism, etc.)

13. Achievements (99 total)

Main functions: 99 achievements across 5 categories with category titles

Tracking: Unlocked via end-of-run processing and mid-game checks, timestamps stored

14. Ship designs (23 total)

Main functions: Ships unlock by achievement count — each has a unique canvas-drawn silhouette

Extras: secret ship and custom ship image upload

15. Ship skins (6 total)

Main functions: cosmetic palettes for ship/glow/trails, unlocked via achievement thresholds

16. Theme System (14 themes)

Main functions: Themes affect ships, bullets, explosions, UI panels, background gradients

Visuals: background interpolation by level, special theme with extra UI styling

17. Audio Engine

Main functions: fully procedural Web Audio synthesis (no files) with separate SFX/Music busses

UX: Gesture-activated audio context, ambient layers adapt with intensity, pitch randomization to reduce fatigue

18. Settings & Configuration

Main functions: persisted settings for audio, difficulty, autofire, dynamic music, control scheme

Effects: shake/particles/trails/flash/edge warnings/stars/FPS/radar/CRT/reduced motion

Cosmetics: skin/design/custom upload/theme

UX: Settings split into 4 tabs — includes cheat input and settings migration

19. Persistence & Save System

Main functions: localStorage for settings, high score, mid-run save, stats, achievements, prestige, run history, secrets

Save rules: Mid-game save expires after 24h, run history stores last 20

Tools: export/import backups, Danger Zone resets with confirmations

20. Easter Eggs & Secrets

Main functions: Konami CRT toggle, title interactions, secret typed words, idle UFO interaction, dev card modal, cheat code, hidden achievement trigger

21. Visual Effects & Polish

Main functions: particles (explosions/smoke/repair/gravity/debris), shake/flash/vignettes, slow-mo zoom, glow rendering, trails

Awareness: radar and edge warnings, CRT scanlines, parallax nebula

UI: animations/keyframes, custom cursors, ripple/shockwave feedback, optional menu cursor trail

22. Accessibility: reduced motion

Main functions: 3-state toggle (Off/System/On) applied across CSS, UI animations, and canvas effects

Behavior: disables decorative motion (particles/shake/flash/warp/confetti/cursor trail) while keeping informational feedback

23. Mobile controls

Main functions: buttons or virtual joystick with multitouch support

UX: Hold-to-focus for triple shot, safe-area-aware HUD, responsive touch target sizing

24. Onboarding & Tutorial

Main functions: multi-step How to Play overlay and contextual first-run tips

Persistence: Tutorial completion state saved

25. Stats Panel & Data Visualization

Main functions: career stats, achievements view, Danger Zone tools

Visuals: radar chart and key stats grid, run-history area chart (last 20), achievement grid with filters/timestamps

UX: Settings split into 4 tabs — includes cheat input and settings migration

26. UX Decisions & Design Philosophy

Main functions: Neon glass identity, strong action feedback (audio/visual, streaks, popups, non-blocking toasts)

Structure: progressive disclosure (tabs, gated features, gradual unlocks), local-first persistence strategy

Performance: delta-time loop, memoization, density toggles, FPS option

Resilience: storage try/catch, migrations, audio resume, DPR resize handling

27. Keyboard controls

Main functions: gameplay mappings (rotate/thrust/fire/pause) and menu shortcuts

Extras: typed words for easter eggs and cheat input location

28. CSS & Styling

Main functions: Tailwind tokens, reusable glass panel/button styles, font imports, and keyframes

UX: reduced motion overrides, theme-driven colors, responsive breakpoints, desktop-only enhancements