Neon Asteroids

I'm brainstorming game ideas—snake, breakout, flappy bird, asteroids, space shooter—and leaning toward something a bit more polished and unique than the basics. Settling on "Asteroid Blaster": a space shooter with mouse aiming, keyboard movement, splitting asteroids, particle effects, and a full score/lives/wave system. I'm designing the mechanics — ship rotation and thrust, bullet lifetimes, polygon asteroids that wrap around the screen and split when hit, explosion particles, a wave counter, start/game-over screens, brief respawn invulnerability, and simple synthesized sound effects via the Web Audio API. Setting up the HTML structure and dark neon styling for the canvas... Adding DPR scaling for crispness, then setting up game state with score/lives/wave tracking and safe localStorage access for high scores, plus ship physics properties and keyboard input handling. I'll set the ship's aim to follow the mouse when it's active, but switch back to keyboard rotation with A/D if the player uses those keys. For thrust I'll go with W/ArrowUp, keeping controls desktop-focused with click-to-shoot as the main interaction, rather than trying to build out full touch support. Since the game lives in an iframe, keyboard focus could be tricky, so I'm adding a "Click to start" screen that grabs focus when clicked. Now I'm writing the asteroid generation function that creates irregular polygon shapes with randomized vertex counts and radius offsets based on size class. Speed and velocity scale with size and wave number, and I'm setting up wave spawning to place asteroids away from the ship with count scaling by wave. Bullets get simple position, velocity, and lifespan tracking with a set fire rate cooldown, and I'm now working out circle-based collision detection between bullets and asteroids. I'm designing particle explosion effects and adding sound using Web Audio oscillators for shooting, explosions, and game over cues, initialized on first user interaction. I'm also planning screen wrapping for all moving objects, and building the rendering layer with a starfield background and a glowing neon ship rendered efficiently to avoid expensive repeated shadow blur costs. I'll add flickering thrust flames, polygon asteroids colored by size, glowing bullets with trails, and a HUD showing score, lives, wave, and high score, plus a subtle screen shake on ship death. For game flow, I'm outlining a start screen with title and instructions, transitioning into gameplay and an explosion sequence when the ship dies. On death I'll spawn particles, decrement lives, and either trigger game over or respawn at center with brief invulnerability; clearing all asteroids triggers a "WAVE X" message before spawning the next wave, and the game over screen shows score, high score, and a restart prompt. I'm adding floating "+100" style score popups, classic point values (20/50/100 by size), an extra life every 5000 points, and planning a fixed-timestep-ish update loop using requestAnimationFrame. Setting up the HTML page structure and canvas... Now I'm adding a starfield generator that scatters twinkling stars with random positions, sizes, and speeds, plus a lightweight audio system using oscillators to create laser and explosion sound effects. Adding wave and life sound effects, then setting up the core game state object with score, lives, waves, and entity arrays for asteroids, bullets, particles, and popups. Adding keyboard event handlers... Adding more input handlers... I decide touch controls will make the ship aim, thrust, and shoot toward wherever the finger is held, which feels fun and simple to implement. Now I'm writing the input handler that starts the game or restarts it based on the current scene state. I add an overTimer guard to prevent an accidental click from instantly restarting right after death. Then I'm writing the startGame function that resets score, lives, wave count, and clears asteroids, bullets, particles, and popups before repositioning the ship with temporary invulnerability and kicking off the next wave. Now I'm writing the wave-spawning logic that determines how many asteroids to create and positions them at the edges of the screen, far from the ship. Working through the wrap logic, I confirm asteroids spawned just off-screen will naturally drift onto the visible area regardless of their velocity direction, so the edge spawning is fine as-is. Now I'm defining the asteroid creation function itself. Adding asteroid properties... I'm assigning distinct colors by asteroid size—magenta for large, orange for medium, yellow for small—then moving on to ship respawn logic, handling lives and game-over transitions when the player dies. Now I'm working on ship rotation controls, supporting both keyboard turning and mouse-aim steering that smoothly rotates the ship toward the cursor angle, plus setting up thrust detection... Writing physics for thrust... Writing shoot function logic... Also confirming that mouse movement deactivates keyboard rotation control so the two input modes don't conflict, with keys taking priority until the mouse moves again. Now I'm skipping the recoil idea and playing a shoot sound instead. I'm setting up bullet updates for movement, screen wrapping, and lifespan decay, plus asteroid movement, rotation, wrapping, and ship collision checks when not dead or invulnerable. I'm defining a function that breaks an asteroid apart on hit, awarding points based on size, showing a score popup, triggering an explosion effect, and spawning smaller fragments if the asteroid wasn't already the smallest size. Continuing that function, I'm giving the child fragments inherited velocity, playing an explosion sound scaled to size, adding screen shake, checking for extra-life thresholds, and updating the high score. Now I'm writing the ship death function that marks the ship dead, sets a respawn timer, decrements lives, and triggers a larger explosion effect. Now I'm building a particle system with spawn and explode helper functions that scatter particles outward in random directions with varying speed... Wait, that's still code territory. Let me think through wave progression logic instead: I'm working out timing for when asteroids clear, using a countdown timer that triggers the next wave once it hits zero. I catch a bug where the timer resets itself immediately after reaching zero, so I'm adding a boolean flag to track that the wave-clearing sequence has already started, preventing the reset from re-triggering. Now I'm moving to the draw function, starting with a radial gradient background transitioning from dark indigo to near-black, then setting up a twinkling star field. Adding a neon stroke helper for glowing line effects, using layered strokes with alpha and shadowBlur to create the glow around ship and asteroid edges. Writing glow, asteroid, and ship rendering... Drawing bullet trails... Fading particles based on remaining lifetime, drawing each as a shrinking circle with alpha tied to age... Now I'm adding floating score popups that drift up and fade out, plus the HUD text rendering the score in the top-left corner using a bold sans-serif font. Finishing the HUD with wave number centered, high score right-aligned, and mini ship icons showing remaining lives, all with a subtle glow effect for polish. I'm also sketching the wave transition message and the start screen with a glowing neon title and control instructions. For game over and the pulsing "click to start" prompt, I want decorative asteroids drifting in the background of the start screen for ambience, spawning a handful that update without collisions until the game actually begins. I'm setting up the main animation loop with delta-time clamping to keep physics stable across frame rate variations. Writing update logic for screen shake decay, asteroid movement with wraparound, and particle position updates... Adding bullet-asteroid collision detection, ship collision with invulnerability checks, and starting the game-over scene logic... Skipping letter spacing since canvas support is inconsistent. Checking ship collision radius against the triangle shape looks fine, and asteroid spawn distance from center at edges should avoid instant collisions. Speed scaling for small and large asteroids at high waves stays capped within reasonable bounds, so I'll skip adding hyperspace as an extra mechanic. Now adding touch event handlers so mobile players can drag to aim and tap to fire, mirroring the mouse controls with preventDefault to stop scrolling. I should also add tabindex="0" to the canvas and focus it on load so keyboard events register properly inside an iframe, and consider pausing the game when the tab loses visibility. I'll cap delta time at 3 to avoid huge jumps, wrap high score saving in a try/catch for security errors, and use a bold system font stack for the title text. Now I'm writing out the full HTML document structure with meta tags and styles... Setting up canvas and game state... Writing full script... Adding noise bursts and sound effect definitions... Adding more sound effects... Now I'm setting up the game state object with scene tracking, score, lives, wave progression, entity arrays for asteroids/bullets/particles, and loading the high score from local storage. Writing asteroid generation logic... Adding particle spawning and explosion effects... Now I'm setting up the ship reset logic and wave spawning, positioning asteroids just off-screen edges to spawn into view. Setting an end-game timer and saving the high score, then wiring up start input handling so pressing start triggers a new game from either the start or game-over screen. I'm double-checking the asteroid spawn positioning logic near the edges to make sure it's correct. I'm also confirming the ambient asteroid setup for the start screen populates a handful of random asteroids, and now I'm adding keyboard input handling for spacebar and arrow key controls. Adding mouse and touch event handling... I'm reasoning that setting mouse.touch true on touchstart lets the ship thrust toward the finger right away when starting via touch, which seems fine. I'm also considering whether the "any key" start listener should exclude modifier keys like Shift so accidental presses don't trigger the game start. Now I'm writing the ship update logic, handling the respawn timer that decrements and triggers either a reset or game over depending on remaining lives. Adding thrust and exhaust particle effects... Finishing up invulnerability countdown and shooting logic, then double-checking edge cases: smooth rotation toward the pointer, touch input keeping the ship aimed at the last touch point, and making sure respawn invulnerability actually protects against asteroids spawning nearby. Now writing the shoot function — spawning a bullet from the ship's nose with velocity inherited partly from the ship's momentum. I'm reconsidering the bullet lifespan since a fixed 60-frame range might be too short on wide screens, so I want to scale it based on screen width. I decide against a global scale factor since it adds too much complexity, but I do want to shrink asteroid sizes a bit for smaller iframes—dropping large radius to 42, medium to 26, small to 14—and cap asteroid count based on screen area so crowded small screens stay playable while larger screens still feel active. Now I'm writing the ship death function, handling the explosion effect, screen shake, and spawning debris lines when the player loses a life. For breaking asteroids, I'm awarding score based on size, adding a floating popup, triggering an explosion effect, and spawning two smaller asteroids when a large one breaks apart. That new-high logic looks right, updating live whenever score exceeds the stored high. Now I'm writing the main update loop that advances the frame timer, decays screen shake and wave message timers, and moves each asteroid by its velocity... Adding particle and debris updates... I'm handling bullet-asteroid collisions and breaking asteroids on hit, then checking ship-asteroid collision for death when not invulnerable, and managing wave-clear timing to trigger the next wave once all asteroids are gone. I'm also considering the game-over state, letting asteroids keep drifting in the background for ambience while the timer counts down. Now I'm writing a neon stroke helper that draws each shape three times with layered glow and opacity to create that glowing outline effect. Adding a glowing text-drawing helper, a mini ship icon for the HUD, and the start screen with a dark overlay and hue-shifting title glow. Now I'm building the draw function with a layered background: a dark base fill plus a radial gradient for depth, then twinkling star particles... Drawing bullet trails as neon streaks, then rendering particles with additive blending so they glow and fade based on remaining lifetime. Finishing the wave message fade-in/out logic, then adding start and game-over screen draws. The additive "lighter" blend mode gives particles their glowing effect. Now I'm drawing debris as cyan neon-stroked lines, then building the HUD showing score, wave number, and high score in the corners with styled text... Now I'm building the start screen, drawing a translucent overlay and the pulsing "NEON ASTEROIDS" title text with a shifting hue. Adding control instructions and pulsing prompt... Now I'm designing the game over screen with a dark overlay and large "GAME OVER" heading. Adding wave-reached text and replay prompt, then setting up the game loop with delta-time timing for smooth frame updates. I'm double-checking edge cases: default mouse position centers the ship's aim before any input, and the ship only renders during active gameplay, not on the start or game-over screens. For the death effect, I'm spawning a handful of debris fragments radiating outward from the ship's position with randomized speed, rotation, and lifespan, inheriting a portion of the ship's own velocity. Drawing each debris piece as a short rotating line that fades out as its life decreases, but I realize neonStroke overwrites the alpha internally, so I need to modify it to accept an alpha multiplier instead of hardcoding opacity. I'm also checking edge cases: HUD text and popups use drawText rather than neonStroke so the fade fix won't affect them, holding Space on the start screen correctly triggers an immediate shot once the game begins, and the keydown handler properly ignores input during the 'over' scene's timeout window. I'm confirming the wave-spawning logic keeps asteroid counts scaling with screen size while enforcing safe spawn distance from the ship, and reviewing how wave 1 begins with a handful of large asteroids that split further as the difficulty ramps up. Working through the point economy per wave versus the extra-life threshold, it seems players earn a spare life roughly every two to three waves, which feels reasonable. I'm also reconsidering the ship's speed cap and thrust values — the terminal velocity from friction alone would exceed the cap, so the clamp is doing the real work, and the current tuning still feels a bit fast but acceptable, along with the rotation rate feeling responsive without being twitchy. I still need to make sure resizing mid-game doesn't leave the ship stranded off-screen since the wrap logic should catch that, confirm the HUD text alignment lines up with the baseline setting, and double check that keyboard state defaults and hue calculations won't throw errors. Now I'm assembling the complete HTML document with all these pieces combined. Writing HTML structure... Setting up canvas context and generating a randomized starfield background for the game. Defining game state... I'm setting up keys and mouse input state, keeping the ship marked dead initially so it doesn't render until the game starts. I'm scaling bullet lifetime based on screen size, then moving on to write the ship-drawing function with rotation and thrust flame effects. Adding invulnerability flicker... Writing the layered stroke pass... I'm double-checking that text drawing and shadow effects properly reset alpha and blur afterward so they don't bleed into later frames, then planning to assemble and review the full code line by line, possibly adding a lighter composite blend mode for glow effects. Adding keyboard input handling... Since audio only initializes on gesture, suspended contexts aren't an issue. I'm happy with the subtle asteroid fill and font styling details, so now I'm assembling the final HTML file with the full script setup... Setting up canvas, stars, audio helpers, game state, ship and entity logic... Adding drawing functions and the animation loop, then double-checking the game-over screen layout with score and wave text positioned below the main heading. Writing start screen code... I'm adding the high score display below the start prompt, then double-checking the audio helper functions for the noise envelope and tone stop timing, plus verifying the buffer length is always valid before creation. I'm now going through remaining edge cases: ambient asteroids on the start screen, window blur resetting keys, mouse state transitions between play and game-over screens, and making sure the wave message appears correctly on start. With those confirmed, I'm ready to assemble the complete final file. # Neon Asteroids 🚀 A retro arcade shooter with a neon glow makeover — dodge, blast, and survive the waves! ```html Neon Asteroids

``` **How to play:** - **Aim** with the mouse (or rotate with ← → / A D) - **Thrust** with ↑ / W, **brake** with ↓ / S - **Shoot** with Space or click - Asteroids split when hit — smaller ones are worth more points (20 / 50 / 100) - Earn an **extra life** every 5,000 points, and survive as many waves as you can! Features synthesized sound effects, particle explosions, screen shake, and a saved high score.

naaaa