Asteroids Neon Oblivion Game

At a glance

Overview

Asteroids Neon Oblivion is a solo-built, browser-playable reimagining of the 1979 arcade classic – designed, engineered, tuned and shipped by one person, and treated not as a hobby artifact but as a full product exercise: hypothesis-driven research, documented UX decisions, an explicit tradeoff ledger, a persistence architecture, an accessibility system, and a procedural audio engine that synthesizes its entire soundtrack in the browser without a single audio file.

The architecture is a deliberate hybrid: HTML5 Canvas owns the game, and React owns everything else. The game loop – physics, collisions, rendering – runs on canvas; menus, HUD, settings, stats and overlays are React components layered above it. That split is the project's central engineering decision: canvas for frame-rate-critical game reality, React for the interface state machine around it.

Role

Solo – UX/UI design and engineering

Platform

Web – single-page React 18 + TypeScript application, HTML5 Canvas renderer with React UI overlays

Scope

• Game design and engineering – React + TypeScript, Canvas rendering, deliberately tuned physics
• Procedural audio – a Web Audio synthesis engine with no audio files in the bundle
• Local-first persistence – save/resume, stats, achievements, prestige and run history without a backend
• Accessibility system spanning every rendering layer – CSS, UI animations and canvas effects
• Status – live, complete, and architected for continued feature growth

The problem

The project opens with an honest diagnosis of its own genre. Classic Asteroids is instantly understandable – but two things tend to break fast.

• Readability collapses as chaos increases. As asteroids multiply and threats accumulate, the player stops being able to parse the screen – and deaths start feeling surprising rather than fair.
• Motivation fades after repeated runs. The original had no long-term goals, no personalization, no reason to return tomorrow.

The stated mission: keep the original's instantly-readable arcade feel, while adding save/resume, settings, accessibility and account-free progression. In other words – modern game UX without modern game bloat.

Research: hypothesis-driven, not persona-driven

For a solo build there are no stakeholders and no user research budget – so the project substituted a method: four testable assumptions, iterated against in playtesting.

• Readability breaks first – players need help tracking threats, boosts and danger states.
• Retention needs two loops – short-term "feel good now" and long-term goals.
• Agency reduces frustration – motion, FX, audio and control schemes must be adjustable.
• Web-first needs low friction – fast load, no backend dependency, mobile support.

Every feature that shipped maps to one of these four hypotheses – which is what turns a feature list into an argument.

Game design: the loop and its depth

Core gameplay: thrust, rotate and fire in wrap-around space; asteroids split by size; circle collisions; invulnerability after death; shields that absorb damage; scoring with a combo multiplier – all on deliberately tuned physics constants. A designer's phrase that deserves underlining: the feel of a game is a set of numbers.

Difficulty as tuning, not hand-waving

Five difficulties – Cozy to Brutal – each changing lives, speed multipliers and boost-drop multipliers. Level pacing scales by formula: asteroid count grows as 3 + level, with speed scaling by level and difficulty. The challenge curve is math, so it's consistent.

Combat variety – the anti-monotony layer

• 5 boosts – Shield, Rapid Fire, Triple-Shot, Slow-Mo, Homing missiles – pickups with lifetime and bobbing, stackable with HUD timers and expiry warnings.
• UFO enemies, large and small, with movement patterns, AI shooting, unique scoring, distinct sound effects and rescue-pod drops.
• Environmental hazards – telegraphed solar flare sweeps, gravity wells and black holes, comets, armored asteroids and persistent wreckage.

Combo and kill streaks

Combos build from rapid kills and decay on a timeout, multiplying score; kill streaks track consecutive fast kills and trigger announcements and sounds. Both feed achievements and the flow-feedback layer – a scoring system designed to feel like momentum.

Progression without a backend

• 99 achievements across 5 categories with category titles, unlocked via end-of-run processing and mid-game checks, timestamps stored.
• 23 ship designs – each a unique canvas-drawn silhouette, unlocked by achievement count, plus a secret ship and custom image upload.
• 6 skins (cosmetic palettes for ship, glow and trails) and 14 themes, unlocked via achievement thresholds.
• Prestige system, unlocked at level 15+: resets run state, keeps achievements, stats and settings; prestige levels increase perk slots, and perks – extra life, starting shield, faster fire, more drops, magnetism – unlock across prestige levels. The idle-game meta-progression, transplanted into an arcade.

UX decisions, stated as decision and how

The project documents its UX reasoning explicitly – decision, then implementation – the format that separates designed products from assembled features.

Readability under chaos

Keep the HUD minimal but information-rich – score, level, lives, boost timers, combo indicator – with optional radar/minimap and edge warnings to kill off-screen surprise deaths, and consistent urgency patterns: boost expiry blinks the same way every time.

Onboarding without killing momentum

Teach in layers, not a lecture – a multi-step How to Play overlay, dismissible contextual first-run tips, and tutorial completion persisted between sessions.

Agency via settings, with sane defaults

Four settings tabs – General, Effects, Themes, Cosmetics – exposing particle density, shake, trails, flash, CRT overlay, FPS, autofire and control scheme, plus a cheat input and settings migration. Players tune comfort, performance and difficulty; the defaults stay sane.

Accessibility done properly

Reduced motion is the project's signature accessibility decision – a 3-state system applied across every rendering layer, described in its own chapter below.

Mobile as first-class

Buttons or virtual joystick with multitouch, hold-to-focus for triple-shot, safe-area-aware HUD and responsive touch-target sizing. Mobile is not the desktop game shrunk.

Flow feedback loops

Every action gets responsive, rewarding feedback – combo and streak announcements, score popups, non-blocking achievement toasts, and cohesive audio-visual reinforcement.

Visual and interaction design

The identity is neon glassmorphism: frosted panels, glowing borders and theme-driven accent colors – the React layer reads as holographic glass floating over the canvas battlefield.

• Typography with two lanes – Orbitron for sci-fi display text, Exo 2 for readable UI text. Character and legibility given separate jurisdictions.
• The theme system as mood, not skin – 14 themes recolor ships, bullets, explosions, UI panels and background gradients together, with background interpolation by level and a special theme carrying extra UI styling.
• Arcade polish as a product feature – CountUp game-over stats, prismatic level-clear moments, an optional CRT overlay with scanlines, neon cursor and ripple interactions, parallax nebula, and a daily challenge designed as a "shared run" via seeded randomness.
• A real CSS and styling layer – Tailwind tokens, reusable glass panel and button styles, keyframes, theme-driven colors, responsive breakpoints and desktop-only enhancements. An interface system, not ad-hoc styling.

Interface showcase

Menus, HUD, settings, stats and progression – the React layer around the game, on desktop and mobile. Click any thumbnail to open the gallery view.

Accessibility: the signature system

The most instructive decision in the project. Most "reduced motion" toggles in commercial software stop CSS transitions and call it done – leaving canvas effects, particles and shake untouched. Here, accessibility was designed across every rendering layer.

• A 3-state toggle – Off, System, On – respecting the OS preference by default while allowing explicit control.
• Applied across CSS, UI animations and canvas effects: particles, shockwaves, shake, flash, cursor trails, warp and confetti are all gated.
• While preserving informational feedback – damage and repair vignettes survive, because they tell the player something.

That distinction – disable the decorative, keep the informational – is the transferable principle, valid far beyond games.

The honesty ledger: documented tradeoffs

The project publishes what it chose not to do, with reasoning – the clearest signal of engineering maturity.

• No online leaderboards – local-first reduces friction; the cost (manipulable high scores) accepted for single-player.
• Customization increases UI complexity – contained via tab structure and strong defaults.
• A large core component (~5,000+ lines) – faster solo iteration chosen over maintainability; documented as a known issue and refactor target rather than hidden.
• localStorage limits – mitigated by capped run history and export/import backups.

Results

A modern, fully local-first arcade Asteroids – live, complete, and architected for continued feature growth.

• Readable at high intensity – HUD clarity plus optional threat-awareness tools; fair deaths by design.
• Motivating across sessions – achievements, unlocks, prestige, and a daily challenge designed as a "shared run": everyone playing the same day faces the same game, without a backend.
• Comfortable across devices – dual mobile control schemes, 3-state reduced motion, adjustable FX and audio.
• Fully local-first – save/resume and persistence with zero backend dependency.

Lessons and reflections

• Fairness is a designable property. "Deaths feel surprising, not fair" is the sharpest diagnosis in this portfolio – and telegraphed hazards, edge warnings and consistent urgency grammar are how it gets designed out. Every UX discipline that makes software humane makes games fairer.
• Hypotheses beat personas for solo work. Four testable assumptions, validated by playtesting, gave the project the rigor of a team process at one person's scale.
• Retention is an architecture, not a feature. Short loop, long loop, daily shared seed, prestige – the motivation system was designed as structure first, content second.
• Accessibility means auditing every rendering layer. A reduced-motion system that governs canvas effects, not just CSS, is the single most transferable idea here – for any product with dynamic visual content.
• Ship the honesty ledger. Documenting tradeoffs – the 5,000-line component, the leaderboards decision – demonstrates more judgment than any list of features can.
• Two-lane architecture, one product. Canvas for the game, React for the interface – knowing which layer owns what is what kept a solo project of this scale coherent.

Credits

• Product, UX/UI design and engineering: Lukas Sabaliauskas – Graphic & Multimedia Designer, Vilnius, Lithuania