Are you a kid, or want the simplest possible version? This guide is written for a curious adult. There is a gentler one for kids about 9 to 13: a cozy game with no jargon and no way to lose. Go to the kids edition ▸

Who this is for

You have never made a game. You have never installed Node.js. You are not sure what a terminal is. You can open TextEdit (or Notepad), you can browse the web, and you can save a file. That is enough.

If those words above already sound easy, you might prefer the slightly bigger Phaser walkthrough, which uses a real toolchain (Node.js + a code editor). Same engine, more polish, requires one install.

What you will build

A one-screen browser game called "Dodger." Your player is a green square at the bottom of the screen. Pink shapes fall from the top. You move left and right with arrow keys to avoid them. You score one point every second. If a shape hits you, the game ends and you can press a key to restart.

The whole thing lives in one file: game.html. About 80 lines of code. Every line is generated by Claude using prompts you copy from this page.

What you need before you start

That is it. Nothing to install. Nothing to download except the finished game when you save it.

How to use this guide

Read each step from top to bottom. Do not skip. Each step gives you a prompt to copy into Claude, an instruction for what to paste into your file, and a check ("you should now see..."). If your screen looks different from the check, do not move on. Ask Claude what went wrong. Most stalls take 2 minutes to unstick. If a step takes you twice as long as the estimate, that is normal for a first game, keep going.

One thing that trips up beginners: you will use two apps on the same file. You edit game.html in your text editor (TextEdit or Notepad), and you play it in a web browser. Same file, two apps. Each step says which one you need. Leaving the text editor open the whole time makes this easier.

STEP 01 ~30 min

Make your first HTML file and open it in a browser

The goal of this step is just to prove that you can save a file and view it in a browser. No game yet, just text.

If you are on Mac:

  1. Open TextEdit (in your Applications folder, or use Spotlight: Cmd+Space, type "TextEdit").
  2. Do this one-time setting now. In the menu bar, click TextEdit, then Settings. Open the Open and Save tab. Turn on "Display HTML files as HTML code instead of formatted text". Close Settings. Without this, when you reopen game.html to edit it in later steps, TextEdit shows a rendered page instead of the code.
  3. You will see a fancy editor with bold and font options. That is "Rich Text" mode and it will save the wrong kind of file.
  4. Click the Format menu at the top of your screen, then click Make Plain Text. The window changes to a simpler look. This is what you want.
  5. Click File, then New, if your window did not reset. Make sure the new window is Plain Text.

If you are on Windows:

  1. Open Notepad (search "Notepad" in the Start menu).
  2. Notepad is already plain text. No setup needed.
Gotcha: If you see formatting options (bold, fonts, sizes) in your editor, you are in Rich Text mode. The file you save will not work as a webpage. Switch to Plain Text first.

Now paste this exact text into the empty document:

<!doctype html>
<html>
<head>
<title>My First Game</title>
</head>
<body style="background:#1a1625; color:#06d6a0; font-family:monospace; padding:40px;">
<h1>Hello. I am about to make a game.</h1>
</body>
</html>

Now save it. Pay attention to the filename:

  1. Press Cmd+S (Mac) or Ctrl+S (Windows).
  2. Save it somewhere obvious, like the Desktop.
  3. Name it exactly: game.html
  4. On Mac, a dialog may appear about the ".html" ending, or it may ask you to confirm a rename. Whichever it is, choose the option that keeps .html, never the one that uses .txt. The button is usually labelled Use .html.
  5. On Windows, in the Save dialog, change "Save as type" to All Files, then type the full name game.html so Notepad does not silently append .txt.
Gotcha: If your saved file is named game.html.txt instead of game.html, the browser will not open it as a webpage. Rename it. On Mac, click the file in Finder, press Enter, and edit the name. On Windows, you may need to enable "File name extensions" in the View menu first.

Open the file in a browser:

  1. Go to your Desktop. Find game.html.
  2. Double-click it.
  3. It should open in your default browser. You should see a dark page with green text: "Hello. I am about to make a game."
If it opened back in TextEdit (or Notepad): Right-click the file → Open With → choose your browser (Safari, Chrome, etc). After this once, you can set "Always open with" so double-click works next time.

Check: You should see a dark page with green text in your browser. If you do, you officially built a webpage. The next steps add Phaser to make it a game.

STEP 02 ~45 min

Add the game engine and draw your player

Now you replace the contents of game.html with a real Phaser game scaffold. Phaser is the game engine. You do not install it: it loads from a public web address (called a "CDN", which is just a fast public host for code files) the moment your page opens. So you still install nothing.

Open Claude (claude.ai). Start a new chat. Paste this prompt:

$ I am a total beginner making my first browser game in a single HTML file.
I am using Phaser 3 loaded from a CDN. I do not have Node.js. I will paste the
whole code into TextEdit and double-click to run it in a browser.

Build me a complete game.html file with:
- A 480 x 640 game canvas, dark background
- Phaser loaded from the CDN: https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js
- A single Scene class
- A green player square (32 x 32) at the bottom center
- Arrow keys move the player left and right
- Player cannot move off the screen edges

// constraints
- One self-contained HTML file. No external CSS or JS files.
- Use Phaser arcade physics, the simple kind.
- Add a short HTML comment above the game code explaining what each main part does.
- No build step, no modules, no import statements. Just <script> tags.
- Return only the file contents, no prose before or after.

Claude returns one HTML file. Copy it, then:

  1. Open game.html in your text editor. If TextEdit (or Notepad) is still open from Step 1, just use that window. If not, right-click game.html, choose Open With, and pick TextEdit or Notepad. You should see the code, not a rendered page.
  2. Select all of it (Cmd+A / Ctrl+A), delete it, and paste in Claude's new code.
  3. Save (Cmd+S / Ctrl+S).
  4. Switch to your web browser and refresh the page (Cmd+R / Ctrl+R). If the game is not open in a browser, double-click game.html.

Check: You should see a dark game window with a green square at the bottom. Pressing left and right arrow keys moves it. If you reach the screen edge, the square stops.

If nothing shows up: Do not panic, this is the most normal thing in the world and you have not broken anything. You need to look at the "console", a hidden panel every browser has that shows what went wrong. Here is exactly how: right-click anywhere on the page, click Inspect in the menu that appears, then click the Console tab at the top of the panel that opens. Any error shows up there in red text. You do not need to understand the red text. Just select it, copy it, and paste it to Claude with: "My Phaser game shows a blank screen. Here is the error from the console: [paste]. What did I miss?" Claude reads errors for a living. Opening the console for the first time feels like a big deal; it is not, every developer has it open all day.

Take a 5-minute break here if you need it. You just used a real game engine, and you opened the developer console. Two firsts.

STEP 03 ~60 min

Add falling enemies and "game over"

Time to make it a real game. Falling shapes, collision with the player, and a "game over" state.

Back in your existing Claude chat (do not start a new one, Claude remembers your code). Paste this prompt:

$ Now extend the game with falling enemies and a game-over state.

Add to the existing game:
- Every 0.8 seconds, spawn a pink (#ff2d6e) 24x24 square at a random
  X position at the top of the screen
- Enemies fall straight down at 180 pixels per second
- When an enemy goes off the bottom, destroy it (so it does not eat memory)
- When the player overlaps an enemy, pause the game and show large
  white text in the center: GAME OVER. Under that, smaller text:
  press SPACE to play again
- Pressing SPACE restarts the scene from the beginning

// constraints
- Keep the file as ONE self-contained HTML file.
- Reuse the existing player code. Do not rewrite from scratch.
- Use Phaser's arcade overlap for collision.
- Return the COMPLETE updated file, top to bottom, ready to paste over the existing one.

Copy Claude's response. Replace your game.html contents. Save. Refresh your browser.

Check: Pink squares fall from the top. Move with arrows to dodge them. If a pink square touches your green player, you see "GAME OVER" and "press SPACE to play again." Pressing space restarts.

If the game crashes when an enemy hits you, or restart does not work: Copy the error from your browser console and paste it back into the Claude chat with: "It crashed on collision. Here is the error: [paste]." Claude will fix it. This is the normal loop. Do not feel like you failed.
STEP 04 ~45 min

Score, polish, and ship to itch.io

Final lap. Add a score, make it feel a bit livelier, then put it on the internet.

In the same Claude chat, paste:

$ Almost done. Add finishing touches.

- Add a score in the top-left of the game canvas, white text, monospace,
  font size 24. Score starts at 0 and increases by 1 every second the
  player is alive.
- When game-over happens, also show the final score under "GAME OVER".
- Make the player flash white briefly (0.1s) right when it gets hit, so the
  player can see exactly what happened.
- Every 10 seconds the player survives, increase enemy spawn rate slightly
  (subtract 0.05 seconds from the spawn interval, with a minimum of 0.25).
- Add a quick green flash on the player on restart, so the new game feels alive.

// constraints
- Same one-file HTML structure.
- Keep all previous behavior working.
- Return the COMPLETE updated file.

Copy. Paste over your file. Save. Refresh.

Check: Score counts up. Game speeds up a little as you survive. Visible feedback when you get hit. Restart works. You have a tiny but real game.

Ship it to itch.io

  1. Go to itch.io and log in.
  2. Click your name in the top-right, then "Upload new project."
  3. Title: whatever you want. "My First Dodger" is fine.
  4. Project URL: itch will generate one. Tweak if you want.
  5. Kind of project: select HTML.
  6. Upload your game.html file in the Uploads section. Tick "This file will be played in the browser."
  7. Embed options: width 480, height 640. Tick "Mobile friendly" if you want.
  8. Visibility: pick "Public" or "Restricted" depending on whether you want anyone to see it.
  9. Save. Click "View page" at the top-right of the edit screen.
  10. Your game should run inside the page.
If itch needs a zip: some browsers and itch flows expect a zip file. On Mac, right-click game.html → Compress. On Windows, right-click → Send to → Compressed (zipped) folder. Upload that zip instead.

Share the URL. You just shipped a game.

DONE. You shipped a web game with no install.

Made with help from Pixeldex? The free made-with-pixeldex badge drops on your itch.io page or README in about ten seconds. Optional, no attribution required.

This walkthrough used Phaser. For more Phaser content (more prompts, the 4-hour Vite walkthrough), see the Phaser engine track.

What to do next

Why this works

  1. The browser is already a game engine. Modern browsers can draw, play sound, take input. Loading Phaser via a script tag gives you 90% of what a "real" game engine does.
  2. One file is forgivable. No project structure to learn. No bundler to debug. If something breaks, the answer is somewhere in a single file you can read.
  3. Claude does the hard typing. You provide the design intent (in prompts), Claude provides the code. Your job is to read the result, paste it in, and check that the game works.

License and sharing

This walkthrough is CC0. The Claude prompts are CC0. The code Claude returns is yours. If you ship a game with this guide, a link to pixeldex.dev in your itch description helps the next absolute beginner find this. Not required.

Phaser 4 hours

Ship a Phaser web game in an evening

The next step up. Uses Node.js + a real code editor + TypeScript. Bigger game, real toolchain.
Pico-8 4 hours

Ship a Pico-8 puzzle game in 4 hours

If you fell in love with making games and want a tiny retro console next.