30 Days of Vibe Coding - Day 1 - Platformer
A browser-based platformer game with 10 levels, built with vanilla JavaScript and HTML5 Canvas.
A browser-based platformer game with 10 levels, built with vanilla JavaScript and HTML5 Canvas.
Day 1. Let's see what happens when I tell an AI to build me a game.
The Prompt
I started with this:
> "I want to create a web based platformer with 10 levels"
That's it. That was the entire creative direction.
How It Was Built
This was one of the first projects I used Watchfire for. I gave it the single prompt and it broke the work down into 21 separate tasks:
1. Project setup and game canvas
2. Game engine core with game loop and rendering
3. Player character with movement and animations
4. Physics and collision detection
5. Platform and obstacle system
6. Level system with loader and camera
7. Easy levels (1-3)
8. Medium levels (4-6) with hazards
9. Hard levels (7-10)
10. UI/HUD system
11. Game states and menus
12. Audio system with 8-bit sound effects and music
13. Polish, save system, touch controls
Then came the bug reports: browser compatibility fix, restructuring for deployment, and several gameplay bugs I caught while playtesting.
I didn't sit there approving every file change. Watchfire queued up the tasks and worked through them. I came back to a working game and then playtested it.
What I Got
I was not expecting this.
It has actual graphics. Not placeholder squares. There's a little character with eyes, platforms with different colors, particle effects when you land. The whole thing has a cohesive visual style that I definitely didn't specify.
It has music. 8-bit background music that loops while you play. I never asked for audio. It just added it.
The levels actually get harder. Level 1 is a gentle tutorial called "First Steps." By level 4, there are spikes ("Danger Ahead"). Level 7 is called "Speed Demon." The difficulty curve exists and makes sense.
There's a full menu system. Main menu, level select, pause screen, game over screen, level complete screen. I can pick any level I've unlocked. This is way more polished than what I asked for.
It saves my progress. Close the browser, come back later, my unlocked levels are still there. localStorage persistence that I didn't ask for.
18 modules. GameEngine, Player, Physics, Camera, LevelLoader, LevelManager, ParticleSystem, AudioManager, SaveManager, TouchControls... it built a proper architecture with separation of concerns. Each module has a clear responsibility. I didn't specify any of this.
The Bug Reports
It wasn't perfect on the first try. I had to playtest and report issues:
...
---
Read the full article →

Add a comment: