Each wave starts with more large asteroids, and clearing the field advances the run instead of resetting the ship.
Asteroid Drift
Inefy interactive lab / Vector run
Asteroid Drift
An arcade loop needs low-latency input and readable state; I built a Canvas/JavaScript Asteroids-style demo with thrust, rotation, shooting, shields, randomized spawning, collision checks, waves, scoring, and touch controls.
- Canvas vector rendering
- Shared keyboard/touch input
- Wave spawning and scoring
- Shield and cooldown systems
- Status
- Polished prototype / live demo
- Last updated
- May 2026
- Controls
- Rotate to aim, hold thrust to build momentum, fire charged shots, and use shield only when a collision is unavoidable.
- Keyboard
- Arrow keys or WASD move, Space or Enter fires, Shift or S shields, P or Escape pauses, and R restarts.
- Touch
- Hold Left/Right to rotate, hold Thrust to move, tap Fire for shots, and hold Shield to absorb hits while energy drains.
- Scoring
- Small asteroids are worth points, wave clears add bonuses, later waves spawn more threats, and the best score is saved locally.
- Accessibility
- Score, wave, lives, shield, charge, and status text are exposed outside the canvas for nonvisual game state.
Score
0
Best
0
Wave
1
Lives
3
Shield
100%
Ready
Asteroid Drift ready.
Outer belt
Blaster
Ready
Keyboard and touch controls
Keyboard shortcuts
- Left / ARotate the ship left while held.
- Right / DRotate the ship right while held.
- Up / WHold thrust to build momentum.
- Space / EnterFire when playing, or launch from the menu.
- Shift / SHold the shield while energy is available.
- P / Esc / RPause or resume with P/Esc; restart with R.
Touch controls
- Left / RightHold to rotate the ship.
- ThrustHold to move forward and build drift.
- FireTap for shots when the blaster is charged.
- ShieldHold to absorb close hits while shield energy drains.
Touch controls: hold rotation/thrust, tap Fire, hold Shield for close calls.
A focused arcade loop with readable risk and reward.
Hits award points based on asteroid size, wave clears add a bonus, and the best score persists between sessions.
Lives absorb mistakes, shield energy gives a short defensive window, and blaster charge prevents button-mashing from flattening the loop.
Movement, shooting, collision, shield, and spawning systems.
The ship uses rotation, thrust acceleration, drag, max-speed clamping, and screen wrapping so movement feels inertial without needing a physics library.
Bullets inherit position and direction from the ship, expire after a short lifetime, and respect a cooldown meter that is surfaced in the HUD.
Bullet and ship impacts use distance checks against asteroid radius, then split large rocks into smaller entities and update score, lives, particles, and wave progress.
Shield input drains energy while active, recharges when released, and can absorb a crash without consuming a life if the player times it well.
Asteroids spawn from screen edges with randomized heading, speed, spin, and shape points, then the wave system measures remaining asteroid work to track progress.
Keyboard and touch controls write into the same input state, so desktop and mobile drive one gameplay loop instead of separate code paths.
Arcade movement, wave state, and keyboard/touch combat controls.
- Implemented ship thrust, rotation, projectile firing, shield charge, wraparound movement, and lives/scoring state.
- Built randomized asteroid spawning, split behavior, wave progression, collision checks, and HUD progress updates.
- Added keyboard and touch controls that feed the same input state, plus pause/restart/fullscreen and reduced-motion handling.
Asteroids-style mechanics are an established genre reference; this browser implementation, visuals, and state loop are custom JavaScript.
Polished prototype with release hardening still ahead.
Already solid includes movement, shooting, shield state, spawning, collisions, waves, HUD feedback, best-score persistence, and keyboard/touch controls. Prototype-only areas include game balance, informal performance testing, and canvas-first accessibility. Hardening would add deterministic collision tests, difficulty tuning, mobile-device QA, performance profiling, and richer nonvisual state output.
Static canvas game with local browser state.
Hosted/run location: GitHub Pages serves asteroid-drift.html, asteroid-drift.css, and asteroid-drift.js. Environment/config: no environment variables are required; tuning values and entity rules live in the JavaScript. External APIs/services: none beyond Canvas, Pointer Events, Fullscreen, and LocalStorage for best score. Local development: run python -m http.server 8000 and open /asteroid-drift.html. Security: no secrets or user data are sent off-device.