Hi. You can do this.
Making a game sounds like a grown-up thing. It is not. You are going to make one today, and you are going to do the building yourself.
Here is the secret: you do not write the game code. You tell an AI helper called Claude what you want, in normal words, and Claude writes the code for you. Your job is to copy what Claude gives you, paste it into a file, and try it out. That is it.
If you have never done anything like this, that is exactly who this guide is for.
What you will make
A game called Star Catcher. A basket sits at the bottom of the screen. Stars fall down from the top. You move the basket left and right to catch them. Every star you catch adds one to your score.
There is no way to lose. No game over. No dying. It is a happy, cozy game. The score just goes up and up.
Want to see a finished one right now? There is a playable Star Catcher near the bottom of this page. Have a go, then come back up here and build your own.
What you need
- A computer. A Mac or a Windows computer. Not a tablet or a phone for this one.
- A grown-up, just for one thing. You need to use Claude, and a grown-up has to help you get to it the first time (it needs a grown-up to set up). Ask a grown-up to open claude.ai with you and get you signed in. After that, the whole game is yours to build.
- That is everything. Nothing to install. Nothing to buy. No timer.
For grown-ups: please read this first
Your child uses a free AI tool called Claude (from a company called Anthropic) to write the game code. Here is what you need to know before you help them get started:
- Set the account up yourself. A Claude account should be created and owned by an adult, with your own email. Make the account, sign in, then let your child use it. The signup is quick and works like any other website account.
- The free plan is all you need. Do not pay. Everything in this guide works on Claude's free tier. You do not need the paid plan. If you ever see a screen asking for card or payment details, you can close or skip it. Never enter a card for this.
- The free plan has limits. Claude's free tier allows a certain number of messages in a window of time. If your child runs out partway through, that is normal and nothing is broken. They just wait a while and come back. Their game file stays safe on the computer.
- Stay nearby. Your child will be typing to an AI chatbot. Treat it like any other internet activity for their age: be in earshot, the same as you would be for them watching videos or playing online.
- Pixeldex itself is free and collects nothing. No account, no email signup, no payment, ever. See the promise page.
- Want a deeper parent-facing guide? Our complete guide for non-technical parents covers age-appropriate tools, the AI question, and what your child can realistically build.
How this works
There are 3 steps. Each step has a copy box. You copy what is in the box, and you paste it. Sometimes you paste it to Claude. Sometimes you paste it into your game file. The guide always tells you which.
You will use two different apps, and it is easy once you know it:
- You edit your game (paste code into it) in TextEdit on a Mac, or Notepad on Windows.
- You play your game (watch it move) in a web browser, like Chrome or Safari.
It is the same file both times, game.html. Each step tells you which app to open it in. Tip: you can leave the editor open the whole time, then you never have to find it again.
Take all the time you want. There is no timer. You can do one step today and the rest tomorrow. Going slow is not losing.
One more thing. Claude is free, but the free version only lets you send so many messages before it asks you to wait. If Claude ever says you have run out of messages for now, that is normal, you did not break anything. Wait a little while, or ask your grown-up, and come back later. Your game file is saved safely on your computer the whole time.
If something ever looks wrong, read this
At some point your game might look weird, or show a blank screen, or not do what you expected. This happens to everyone, including grown-ups who do this every day. You did not break anything.
Here is the fix, and it is the same fix every single time:
- Open your
game.htmlfile in your text editor. - Select all of the text (press Ctrl+A on Windows, or Cmd+A on a Mac), and copy it.
- Go back to Claude. Paste the text and send this message: "This is my game file. Something looks wrong. Can you find the problem and send me back the whole fixed file?"
- Claude reads your file, finds the mistake, and sends you a fixed one. Paste the fixed file back in, the same way you did before.
That is it. You never have to figure out the mistake yourself. Claude does that part. Whenever you are stuck, come back and do these 4 things.
Make your game file
First you need a file for your game to live in. You will use a text editor that is already on your computer.
On a Mac:
- Open the app called TextEdit. (Press Cmd and the space bar, type "TextEdit", press Enter.)
- Do this one-time setting now, it saves you a headache later: in the menu bar at the very top of the screen, click TextEdit, then Settings. Click the Open and Save tab. Turn ON the checkbox that says "Display HTML files as HTML code instead of formatted text". Close the Settings window. This makes sure that when you open your game file again later, you see the code, not a finished-looking page.
- At the top of the screen, click the Format menu, then click Make Plain Text. The window gets simpler. Good.
On Windows:
- Open the app called Notepad. (Click the Start menu, type "Notepad", press Enter.)
- Notepad is already ready. Nothing to change.
Now copy the box below and paste it into your empty editor window.
paste this into your editor
<!doctype html> <html> <head><title>My Game</title></head> <body style="background:#10223b; color:#ffd166; font-family:sans-serif; text-align:center; padding-top:80px;"> <h1>My game is coming soon!</h1> </body> </html>
Now save the file. This part has one small thing to get right, so go slow:
- Press Cmd+S (Mac) or Ctrl+S (Windows).
- Save it on your Desktop so it is easy to find.
- Name it exactly this:
game.html - On a Mac, a box may pop up about the ".html" ending, or ask you to confirm a rename. Whatever it asks, always pick the choice that keeps .html (never the one that uses .txt). The button you want is often called Use .html.
- On Windows, change "Save as type" to All Files first, then type the name
game.html.
Now let's play it for the first time. Find game.html on your Desktop and double-click it. It should open in your web browser and show a dark blue page that says "My game is coming soon!"
Add your basket
Now the fun part. You are going to ask Claude to turn your page into the start of a game, with a basket you can move.
Go to Claude (the page a grown-up helped you open). Start a new chat. Copy the box below and paste it to Claude as a message.
paste this to claude
Please make me a small web game in one HTML file. I am a kid and a total beginner. I will open the game by double-clicking the file. Here is what I want: - Use Phaser to make the game. Load Phaser from this exact web link: https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js - The game screen is about the size of a phone screen, with a dark blue background. - Put a brown basket near the bottom of the screen. - I can move the basket left and right with the arrow keys. - The basket cannot move off the edges of the screen. Please put everything in ONE html file. Do not use anything I have to install. Send me the whole file, and nothing else.
Claude will send you back a big block of code. Do not try to read it. Here is what to do with it:
- Copy everything Claude sent you.
- Open
game.htmlin your editor. If you still have TextEdit or Notepad open from Step 1, just click that window. If not, right-clickgame.htmlon your Desktop, choose Open With, and pick TextEdit (Mac) or Notepad (Windows). You should see your code, not a finished page. - Delete everything that is already in there. Select all of it (Cmd+A or Ctrl+A) and delete.
- Paste in the new code from Claude.
- Save the file (Cmd+S or Ctrl+S).
- Now play it: go to your web browser and refresh the page (Cmd+R or Ctrl+R). If the game is not open in a browser yet, double-click
game.html.
Phaser, by the way, is a free helper that knows how to make games. Claude used it for you. You do not need to learn anything about it. That web link in the box is just where it lives. Leave the link exactly as it is.
Add the falling stars
One more step and you have a real game. Go back to the same Claude chat (do not start a new one, Claude remembers your game). Copy and paste this:
paste this to claude
Now please add falling stars to my game. - Every second or so, a yellow star appears at the top of the screen in a random spot, and falls down slowly. - When my basket touches a star, the star disappears. - Keep a score. It starts at 0. Every time I catch a star, the score goes up by 1. - Show the score in the top-left corner of the screen, in white. - There is NO way to lose. The game just keeps going. It is a happy, cozy game. Send me back the whole html file with all of this added.
Same as before: copy what Claude sends, delete everything in your game.html, paste the new code in, save, and refresh your browser.
That game on your screen is yours. You made it. You can play it any time by double-clicking game.html. Show it to your family. Tell them you built it, because you did.
Want to mark your game as made with Pixeldex? Grab the free "made with Pixeldex" badge and drop it in the game or share it alongside.
Here is one we made
This is a finished Star Catcher game. We built it with the exact same 3 steps you just did. Try it: move the basket with the arrow keys, or with your mouse. Catch the stars.
This is roughly what your game should do. Yours might look a bit different, maybe other colors, maybe the stars fall faster. That is not a mistake. That means you made it yours.
Open the demo game in its own window ▸
Make it yours
Want to change things? Go back to your Claude chat and just ask. You do not need special words, ask like you are talking to a person. Try things like:
- "Can you make the stars fall faster?"
- "Can you make the basket blue instead of brown?"
- "Can you add a happy sound when I catch a star?"
- "Can you make some stars worth 5 points and color them pink?"
Each time, Claude sends a new file. Paste it in, save, refresh. That is how games get made: a little change at a time.
Want to put your game on the internet?
This part is a bonus, and you need a grown-up for it, because it means making an account on another website. If you want to be able to send your game to a friend as a link, ask a grown-up to help you with the "ship it to itch.io" steps in the older-kids version of this guide. It is the same idea, just with a grown-up doing the account part.
You do not have to do this. A game that lives on your own computer is still a real game.
What next?
The game you built uses Phaser, a free web-game library. When you are ready for more, the Phaser engine track on Pixeldex has more prompts and walkthroughs for it.
When you are ready for a slightly bigger guide, the no-install walkthrough builds a game where you dodge falling shapes and there is a score and a restart. It uses a few more grown-up words, so it is a good next step once this one feels easy.