What I Built

For this weekend's challenge, we were prompted to "build something inspired by passion". The prompt highlighted that passion can be seen in "the rivalry that pushes competitors to greatness" and the "devotion fans pour into their teams, their fandoms, their crafts".

To capture this intense spirit of rivalry and fandom, I built Spinweb-a fast-paced, 2D physics-based spinning top battler inspired by the passionate clashes of Beyblade.

In Spinweb, players choose their arena and their battle style (Attack, Defense, or Stamina), slingshot their top into a high-stakes basin, and actively battle a dynamically adapting AI opponent. To truly capture the anime-style rivalry, the game uses AI to dynamically generate aggressive trash-talk before the match and hype esports-style commentary after the clash!

Code

Webrizen / spinweb

A 2D physics-based spinning top battler with retro pixel-art aesthetics. Launch, clash, and outlast your opponent!

Spinweb — Physics-Based Spinning Top Battler

Spinweb is a 2D side-view, physics-based spinning top battler with a retro pixel-art aesthetic. Built using Phaser 3 and Matter.js, the game integrates the Google Gemini API to generate real-time, context-aware pre-match rivalry trash-talk and post-match esports commentaries.

Developed for the DEV.to Weekend Challenge: Passion Edition.

📸 Game Previews

📖 Table of Contents

🎮 Game Overview

In Spinweb, players choose their arena and select a signature Beyblade-style behavior (Attack, Defense, or Stamina). Once selected, players release their slingshot launch vectors to shoot their tops into a high-speed clashing stadium, jockeying for center control and avoiding Ring Outs and Sleep Outs using real-time keyboard inputs.

🔥 How the Passion Theme is Captured

Spinweb captures the Passion…

View on GitHub

How I Built It

I built Spinweb over the weekend using Phaser 3, Matter.js, and Vite. Building a high-impact spinning battler required some deep physics hacking:

The Gravity Well Arena: To simulate a 3D Beystadium (a shallow basin) within a 2D HTML5 Canvas, I disabled standard world gravity. Instead, I applied a constant "gravity well" vector force that constantly pulls both tops toward the absolute center of the arena. This ensures continuous, high-speed pendulum-like clashes.

Gyroscopic Physics: Using Matter.js, I mapped the angularVelocity (spin speed) to a stamina bar. Collisions dynamically calculate tangential velocity and transfer kinetic energy into linear knockback force (clash drain). This means faster-spinning tops hit harder and resist being knocked out of the ring!

Active Controls & AI: Players can use WASD/Arrows to dodge or strike during the clash. The AI opponent dynamically assigns itself a style on load and changes its behavior—Attack AI will chase you, Defense AI will tank the center, and Stamina AI will ride the edges to avoid contact.

Integrating the Partner Technologies:
The official challenge rules note that participants may use multiple technologies in a single submission to qualify for multiple prize categories. I utilized two of them to elevate the game's presentation:

Google AI (Gemini 1.5 Flash): I used the Google Generative AI SDK to breathe life into the rivalry. Before a match, the game sends the player's and enemy's chosen combat styles to Gemini to generate a context-aware, dramatic line of "trash-talk" (e.g., "Your reckless attacks will shatter against my iron wall!"). After the match, the win condition and match duration are sent to Gemini to generate an energetic, esports-style post-match commentary summarizing the fight.

ElevenLabs: To give the game a cinematic, anime-style feel, I utilized ElevenLabs to generate premium, dramatic announcer voiceovers (like a booming "Let it rip!") that trigger during the launch and Game Over states.

DEV Community

Spinweb: An AI-Powered, Physics-Driven Beyblade Web Game 🌪️