After playing a lot more with Claude and Artifacts last week, on Monday my eight year old daughter and I sat dow to build a game. Her sister was at camp this week so she was bored… We’d previously used ChatGPT to make and customize a Moon Lander game, but the graphics weren’t great and gameplay was hard… plus I had to be the one copying and pasting code and running in python via the command line. She could get to the point of copying and pasting, but using a command line was still laborious and joy-killing.
Making a Game
So with Claude, she started out with a simple premise:
Original game viewable here.
Then she just talked to it to improve it. She could type things like, “Make the bad guys tigers, make them move slower, etc.” and Claude could automatically update the playable game. She tried to tell it to ‘make a jail’ but Claude didn’t know what that meant, so we literally drew a picture of what she wanted and then… it did it! I remember seeing OpenAI demo chatgpt’s capability to do this a year or so ago but seeing it again here on Claude and then being able to instantly see an app running was mind-blowing.
However, at this point I think the code became complex enough that Claude wasn’t able to run it as an artifact, so a box would appear:
Stuck! So, my daughter had a now-classic (in our household) response to tell it too bad and even threaten it: “Sorry you’re tired, I’ll make ChatGPT do it instead.”
I couldn’t believe it actually finished the code after this taunt. It finished the code but couldn’t run the program now as an Artifact - and gave instructions how I could run the code locally.
So, the artifact isn’t playable - now what?
Artifacts are amazing when they work, but they’re really for proof of concept not actual use… so here’s where we go from “AI is cool” to “You still need to have deeper knowledge to use AI tools to their fullest potential.”
Python
First, you have to have Python installed - here’s the website for mac or windows.
You should also have a code editor like VSCode installed to edit code and not mess it up like Word would.
Then, you can open the code in a new file if needed (although Claude let’s you download the code file directly!). In the bottom right there, either copy and paste the code locally, or download the file itself!
GitHub
Once we made sure it worked on my computer, I uploaded it to a Github repository. You can signup for a free account and I just had to create a new repository and put the code there. http://www.github.com
Render
There are other hosting services, but I’d used Render for something else previously. Hosting a static website like this game is free.
After creating a new static site and linking to my github repo (make sure the name of your file In this case is index.html) and hitting ‘deploy’ it worked!
And now it works!
https://tigerrabbit.onrender.com/
It was pretty fun yesterday to literally see her playing her own game on a different computer and challenging her grandparents… who gave feedback like “make the tigers move slower…” so we did by hand-editing the code on github which then updates in Render. “Change Speed to 2 from 10” etc. Code - Python in particular - isn’t 100% foreign!
My oldest daughter then wanted to make her own game too, and we followed very similar steps to create (fittingly) the opposite kind of game… istead of being chased, she’s doing the chasing.
https://dogchasecat.onrender.com/