After this lesson you'll know
- How to set up a game development environment in under 2 minutes
- How to prompt AI to generate a complete game
- The HTML5 Canvas basics that power browser games
- How to iterate on your game with AI feedback loops
Your dev environment in 90 seconds.
You need exactly three things: a browser, a text editor, and an AI assistant. That's it. No downloads, no installs, no configuration nightmares.
Open VS Code (or even Notepad). Create a folder called my-first-game. Inside it, create one file: index.html. This single file will contain your entire game.
Browser games using HTML5 Canvas run everywhere -- desktop, mobile, tablet. No app store approval needed. Your game is a URL.
Prompting your first game into existence.
Here's the prompt that changes everything. Open Claude or ChatGPT and type:
"Build me a simple browser game using HTML5 Canvas and vanilla JavaScript. Make it a click-to-catch game where colorful circles fall from the top of the screen and the player clicks them to score points. Include a score counter, a timer counting down from 30 seconds, and a game-over screen with a restart button. Make it mobile-friendly with touch events. Put everything in a single HTML file."
That's it. Paste the response into your index.html, save, and open it in your browser. You have a playable game.
The key is specificity. Notice we didn't say "make a game." We specified the mechanic (click to catch), the elements (circles, score, timer), and the constraints (single HTML file, mobile-friendly). Better prompts = better games.
The AI feedback loop.
Your first version works, but it's basic. Here's where AI game dev gets fun -- iteration is nearly instant.
Try these follow-up prompts:
Each iteration takes seconds. You're not debugging for hours -- you're designing, and AI is implementing. This is the loop you'll use for the rest of the course.
What just happened, technically.
Even though AI wrote the code, understanding the basics helps you prompt better. Your game uses three core concepts:
The Game Loop: A function that runs 60 times per second, updating positions and redrawing everything. This is the heartbeat of every game.
The Canvas: An HTML element that lets you draw shapes, images, and text with JavaScript. Think of it as a digital whiteboard that refreshes 60 times a second.
Event Listeners: Code that listens for clicks, touches, and keyboard inputs. This is how your game responds to the player.
Lock it in.
Quiz
1What makes a good AI game prompt?
2What is the game loop?