RCWeb Spacewar App

The RCWeb Spacewar App (app/spacewar) is a foundational demonstration of the Asymmetric Pattern, transforming a large host screen into a continuous multiplayer space shooter arena where mobile devices act as dropping-in steering controls.

Icon

Screenshot

What it does

• Infinite Multiplayer Arena: Any number of users can scan the QR code to instantly spawn a new spaceship into the central arena.
• Physical Bouncing Bounds: The edges of the screen are not hard walls or wraparounds; hitting a wall algorithmically reflects the ship's angle to bounce it back into combat.
• Classic Combat: Players steer, accelerate constantly, and fire missiles. Hitting an opposing player instantly destroys them, grants a kill point to the shooter, and forces a respawn penalty on the victim.
• Invulnerability Windows: When a player respawns, their ship blinks and turns semi-transparent, rendering them temporarily immune to missile strikes to prevent spawn-camping.

How it works

The engine in script.js relies entirely on manipulating raw HTML DOM elements via inline CSS positioning rather than utilizing a Canvas engine.

• DOM Rendering: Every ship, missile, and score ticker is a physically appended document.createElement("div"). The moveShip loop dynamically recalculates and injects ship.style.left, ship.style.top, and ship.style.transform = "rotate(...)" matrix updates on every 16ms tick.
• Hue Differentiation: As new controllers connect (getShip(player)), the engine multiplies the active array length by 210 degrees (hue = ships.length * 210) applying a filter: hue-rotate(...) CSS rule to color-code ships and their missiles natively without requiring new image assets.
• Cartesian Hit Detection: Missiles execute brute-force $O(n)$ radius checks (Math.sqrt) against all ship coordinates inside the moveMissile evaluation phase. If a collision triggers on a vulnerable frame (frameTime > ss.nextRespawnTime), the missile is culled from the array and DOM.

Launch RCWeb App