SPINWEB

A DEV Weekend Challenge: Passion Edition Submission

THE CHALLENGE

Spinweb captures the "Passion" theme of the DEV Weekend Challenge by embodying the intense, hyper-focused obsession of retro Beyblade-style battles. From dynamic pre-match trash-talk to full-velocity arena collisions, every detail channels the competitive rivalry that turns toys into legends.

HOW TO PLAY

  • 1. CHOOSE ARENA: Fight in a circular basin (Circle) or a border-bounded grid (Rectangle).
  • 2. CHOOSE BEY STYLE:
    • Attack: High knockback power, faster spin decay.
    • Defense: Heavy mass, higher impact resistance.
    • Stamina: Light mass, ultra-slow spin decay for survival.
  • 3. LAUNCH: Click, drag, and release (slingshot style) to launch your top into the arena!
  • 4. STEER: Use W A S D or ↑ ← ↓ → in real time to steer, collision-jockeying for the winning position.

THE PHYSICS LOGIC

Utilizing Matter.js, Spinweb implements custom rigid body behaviors simulating top dynamics:

  • → Gravity Well: A continuous, centripetal pull draws tops toward the stadium center, creating constant head-on clashes.
  • → Friction & Spin Decay: Rotation speed (ω) decays exponentially over time based on style profiles (ωt = ω0 · e-λt). Hits transfer kinetic energy and drain spin speeds.
  • → Win Conditions: Sleep Out (spinning speed drops below threshold) or Ring Out (stadium perimeter violation).

TECHNOLOGY STACK

  • • Phaser 3 & Matter.js: Game engine, canvas drawing, and high-frequency rigid body collisions.
  • • Google Gemini AI: Connects to gemini-3.5-flash to dynamically formulate pre-match rival trash-talk and real-time post-match esports commentaries.
  • • ElevenLabs: Cinematic pixelated audio samples and background match-launch announcers.
  • • Vite: Ultra-fast ESM asset bundling.