30 Days of Vibe Coding - Day 3 - RPG
A turn-based RPG with isometric graphics, character creation, combat, quests, and a save system, all running in the browser.
A turn-based RPG with isometric graphics, character creation, combat, quests, and a save system, all running in the browser.
Day 3. I asked for a full RPG. In a browser. In one day.
The Prompt
> "I want to create a browser-based RPG with isometric graphics, character customization, turn-based combat, quests, and a save/load system."
That is an absurd amount to ask for in a single prompt. An RPG is not a small game. There are character classes, inventory systems, dialogue trees, quest tracking, combat mechanics, map exploration. Any one of those is a project on its own. I wanted to see what would happen if I asked for all of them at once.
How It Was Built
Watchfire took the prompt and broke it down into tasks. The package.json still has the fingerprint of the first task in its name: watchfire-0000-project-setup---initialize-nex. From the project structure, I can see the work was split across the core systems: project setup with Next.js and Pixi.js, type definitions, game state management, map data for three zones (town, forest, dungeon), combat engine, item and enemy databases, dialogue system, quest database, isometric rendering, and then all the UI components on top of that.
The component list alone tells you how much got built: CharacterCreation, CombatUI, DialogueBox, EquipmentPanel, GameHUD, GameMenu, Inventory, IsometricWorld, ItemTooltip, MainMenu, QuestLog, SaveLoadMenu, SettingsPanel, VictoryScreen. That is 14 React components plus the game logic layer underneath.
I did not sit there guiding each piece. I came back to a working game and started playing it.
What I Got
This one genuinely surprised me.
It named itself. "Realm of Shadows: An Isometric Adventure." I never gave it a name. It picked one, designed a title screen with stylized text, and added a settings option on the main menu. The dark navy and gold color scheme runs through the entire game.
Character creation is a multi-step wizard. You enter a name, pick a class, and review your stats before starting. It walks you through three screens with progress dots at the top. Each class (Warrior, Mage, Rogue) has different stat distributions and starting equipment.
The class selection cards show stat breakdowns for each option. Warrior gets high health and strength. Mage gets high magic and mana. Rogue gets balanced stats with high speed. There are little icons for each class and colored stat bars. This is polished UI work.
...
---
Read the full article →

Add a comment: