CLASS 05 / INTRO TO VIBE CODING
Browser Game Lab
From Python to the browser.
A browser cannot run a desktop Python game in the same way your laptop does. Porting means rebuilding its behavior with browser tools while keeping the parts that make it fun.
Download starter Jump to copyable prompts ↓YOUR FLIGHT PLAN
Try it. Understand it. Make it yours.
- 01
Describe the game
Write down the player’s goal, controls, win or lose conditions, and your favorite feature. Give your local coding agent access to the original game files.
- 02
Build for the browser
Use the exercise prompts to port your game, or use the Starfall Courier browser starter as a reference. Run it through a local web server and check the browser console when something breaks.
- 03
Test before sharing
Check the controls, restart button, score, and different window sizes. A local address points to your computer; a hosted public URL is what someone else can open.
COPY ONE PROMPT AT A TIME
From the handout to your coding agent.
Open the correct project folder in your local coding agent first. Read each prompt and replace any bracketed words before sending.
PROMPT 1: INSPECT THE ORIGINAL
Read my existing Python game and explain its goal, controls, scoring or damage rules, endings, and distinctive visuals. Identify the files and settings that create those behaviors. Suggest a browser port using JavaScript and Canvas. Do not edit any files yet.
PROMPT 2: BUILD THE PORT
Use the plan above to build a browser version in a new web subfolder. Leave my Python files unchanged. Use index.html, styles.css, and game.js with JavaScript and Canvas. Keep the original controls, rules, artwork, animations, and special features. Reuse local assets where possible. For a new game, use the design I supplied and one complete playable arena. Include clear instructions, start, pause, endings, and restart. Pause when the tab loses focus. Keep movement consistent at different frame rates and stop game controls from scrolling the page. Make the layout fit the browser window. Use local assets and no frameworks, accounts, or backend services. Put editable settings near the top of game.js. Start a local web server serving only web and give me the browser URL plus exact restart commands for my computer. Explain any feature you could not preserve. Show me the game loop, a score or state update, and one setting I can edit. Check the full round, then ask me to test the controls myself.
PROMPT 3: FIX ONE DIFFERENCE
When I [action], I expect [result], but [actual result] happens. Explain the cause and fix this one behavior. Keep the other game rules and visuals intact. Tell me how to test the fix and check restart.
READY TO GO FURTHER?
A little stretch.
Add touch controls or an accessibility option. Test the smallest screen you can use and explain one change that makes the game easier to play.
KEEP THESE HANDY