Neon Retro Canvas Space Shooter

This is a Neon Retro Canvas Space Shooter. It is a fully self-contained arcade game rendered entirely within a web browser without external assets. Its function in a UI context is to demonstrate high-performance 2D rendering, touch-based virtual control schemes, and procedural audio synthesis.

Specs

• Weight: ~13 KB. Zero external dependencies, no image files, no audio files.
• Performance: High. Runs on a strict requestAnimationFrame loop using the 2D Canvas context.
• Theming / Customization: Hardcoded via JavaScript ctx.fillStyle and ctx.strokeStyle using hex codes and RGB values.
• Responsiveness: The canvas recalculates dimensions on window resize. Absolute positioned DOM elements serve as the HUD and mobile controls.
• Web APIs: Canvas 2D API, Web Audio API, Vibration API.
• Graceful Degradation: [!] Fails completely without JavaScript. Accessibility is non-existent; screen readers cannot parse canvas pixels.

Anatomy

• HTML: A minimal container structure. Holds the <canvas>, the CRT scanline .overlay-fx, and a DOM-based #ui-layer for text, menus, and joysticks.
• CSS: Establishes the cyber-arcade aesthetic. It handles the glowing text (text-shadow), the vignette gradient, and positions the circular virtual joystick elements.
• JS: The entire engine. It comprises an AudioSys for procedural sound, an Input manager for translating touch/keyboard events into velocity vectors, a class-based entity system (Particle, PowerUp, Bullet, Boss), and the core Game state machine.

Logic

The standout engineering feature is the AudioSys. Instead of fetching heavy .mp3 files over the network, it synthesizes sound effects procedurally in real-time.

playTone(freq, type, duration, vol=1) {
    const osc = this.ctx.createOscillator();
    const gain = this.ctx.createGain();
    osc.type = type;
    
    // Pitch drop effect for "pew" sound
    osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(freq * 0.1, this.ctx.currentTime + duration);
    
    osc.connect(gain);
    gain.connect(this.masterGain);
    osc.start();
    osc.stop(this.ctx.currentTime + duration);
}

By manipulating an OscillatorNode and instantly dropping its frequency via exponentialRampToValueAtTime, the code generates a classic arcade laser sound mathematically. This guarantees zero latency, infinite scalability, and zero bandwidth cost.

Feel

Visceral and immediate. The virtual joystick maps touch input directly to spatial geometry, providing a fluid control feel despite the lack of physical hardware. The procedural audio hits with sharp, synthetic precision, while the combination of screen shake (glitchAmt) and the Vibration API provides actual tactile feedback upon taking damage.