RCWeb Spacewar 2D App

The RCWeb Spacewar 2D App (app/spacewar2d) is a massive graphical and architectural upgrade over the base Spacewar app. Built around the Asymmetric Pattern, it discards DOM nodes for a highly performant native HTML5 <canvas> rendering engine, adding AI enemies, particle systems, and audio synthesis.

Icon

icon

Screenshot

screenshot

What it does

  • High-Performance Canvas Graphics: Ships, backgrounds, and lasers are explicitly drawn using hardware-accelerated Canvas API vector strokes, allowing hundreds of entities on screen without frame-dropping.
  • Dynamic AI Ecosystem: Introduces non-player threats. Saucer enemies actively home in on human players using tracking math, and procedurally generated geometric asteroids drift lethally across the play space.
  • Collectibles & Scoring: Rather than just tracking player-kills, players compete to scoop up procedural gold and blue hexagonal collectibles that spawn randomly for massive point boosts.
  • Parallax Backgrounds: An atmospheric starfield and 3D wireframe planets actively trace the average center-mass location of all human players, subtly drifting to create a deep parallax 3D illusion in the background.

How it works

The engine inside script.js represents a mature, procedural game-loop implementation running completely client-side in the browser.

  • Vector Rendering: Replaces inline <div> styling with rigorous ctx.beginPath(), ctx.moveTo(), and ctx.lineTo() vector tracing calls. Asteroids randomize their geometric sides (rArr.push) for unique shapes upon spawning, and ships are rendered via explicit geometric coordinates scaled to an orientation matrix.
  • Particle Pools: Engine thrusts and explosion bursts use pre-allocated static typed arrays (Float32Array) for positional, velocity, and lifespan data (MAX_THRUST_PARTICLES), achieving zero garbage-collection overhead for thousands of simultaneous flame sparks.
  • Web Audio API Synthesis: Rather than downloading .wav or .mp3 files, it builds a native oscillator pipeline (audioCtx.createOscillator()). Lasers use square waves with exponential frequency ramps; explosions generate randomized white noise buffers pumped through lowpass filters entirely via mathematical code.
DocumentationServer TelemetryServer StatsServer HTTP LogServer WebSocket Log