My 4 year old daughter made a chicken game

One wet weekend morning, my 4 year old daughter and I were playing our nth round of Uno. There's no limit to how much Uno she can play but I wanted to do something different. So I suggested "wouldn't it be fun to make our own game?

We jumped on to the computer and started brainstorming. I asked her what kind of game she wanted to make. She said "a chicken game" (Probably ~~brainwashed~~ inspired by Peppa Pig's Happy Chicken). I asked her what the chicken should do, and she said "it should walk around a maze".

Using Claude Sonnet 3.7 as our "developer" and me as the "translator" the following is a summary of our journey. I tried to verbatim capture what my 4 year old said, adding context where I thought it necessary to get the game to a playable state.

This was a fun experiment, however my daughter quickly lost interest. My wife and I were blown away by how quickly we could get a working game - my daughter not so much - alas I fear this generation will just think this is how "development" is done...

Vibe coding as a 4 year old

[write a game in javascript that can play in the browser.] This game should be a maze. You are a chicken and it should be controllable and be able to walk around the maze. [The goal] is to get to the middle of the maze.

Oops! Didn't work first go.

[there's a Uncaught Error: Script error.]

Ok the game kind of works, my daughter says:

put a small grain of food in every square, the chicken should eat the grain of food

I didn't think instructions were necessary, especially since she can barely read

[remove the instructions box]

My daughter moved the chicken around the maze and said:

It doesn't poop. The chicken should [randomly] poop [between 10 and 20 food eaten]. The poop should stay where it is and the chicken cannot move through poop

After a few more play-throughs, my daughter noticed:

why is the chicken pooping when it hasn't eaten?

It was a little annoying to have to refresh the page each time

[add a button to restart the maze]

The "Happy Chicken" inspiration has two chickens walking around. I asked her what colour the other chicken should be .

add another chicken [that starts in the opposite corner]. The other chicken should be red

Oops! The context window is getting a bit long. I manually split the game into seperate JS and CSS files. This may not have been necessary but I find LLMs are generally better with smaller files

[there's a script error, and code is appearing on the html]

Ok we're back to playing. The "AI" isn't very good though, as my daughter remarked:

Haha! the red chicken gets stuck

I might need to be a bit more explicit:

[the pathfinding still doesn't work]

I don't know where this inspiration came from but I like it:

Add confetti when the chicken wins

The pathfinding was a little too good, so I added an option to turn off the red chicken

[add a toggle to enable/disable the red chicken]

Making it more fun

How do we make it more fun?

If Claude had feelings, they would have been crushed. Claude responded with a few suggestions, including adding a "fog of war"

[Add a "reveal" feature that reveals the maze 1 block around the chicken as the chicken walks through. If enabled, the AI chicken should also reveal the map as it walks through.]

And then my daughter's suggestion

make the chicken race each other

Upload and mobile

Although the game was playable it wasn't sharable, so I hosted it to cloudflare and manually wrote this page to go with it. I then prompted claude one last time:

[re-write the game for ios]

Which actually worked, it even added touch controls to simulate the keys.

Touch

After some feedback on HN I added touch controls so the game is playable on mobile. To preserve the integrity of the exercise above, I added these as seperate files to the original project (touch.css and touch.js)

[add touch controls for mobile]