How do you get children excited about programming? How do you manage to combine creativity, fun and modern technologies like AI without the kids running a mile? I wanted to find out – and I had a mission: to create a platform game right in the browser, with all the images generated by AI, and to do it all during the holidays!
What was the end result? Lots of fun, plenty of crazy ideas and a glimmer of hope that my children might explore this area further in the future.
Contents
Most children are now familiar with ‘ChatGPT’ or at least that ‘image AI’ that Mum or Dad sometimes tries out on their mobile. Prompting simply means telling an AI via text what to do – for example: “Create an image of a manga girl wearing a pink skirt.”
And hey presto, a few seconds later, the AI spits out a snazzy image. This text command is called a prompt.
In my holiday project, that’s exactly what we did: step by step, we built a game in which all the graphics arecreated using prompts. You play it straight in the browser – on CodePen. It’s ideal for quick successes and even quicker experimentation.
To be honest: as a computer scientist, you’ve got it tough with kids. Police officer, firefighter, vet – sure! But what does Dad actually do all day on the computer?
I wanted to show my kids that programming isn’t just a jumble of letters and maths. My experiment with Lego Boost was – let’s say – a bit of a mixed bag (“Can you build Minecraft with this?”). But one thing alwaysworks : playing!
So why not just do what I do at work: prompt programming – but the kids’ way. The result: loads of fun, plenty of ‘Wow!’ moments and a game that we really did create together.
Fun fact: We didn’t just stick to one game. By the end of the day, we’d tried out loads of different games!
If you’re not interested in the technical details, you can skip this section and go straight to the game instructions!
Perhaps some parents (and even the clever kids) are wondering: what exactly are HTML, CSS and JavaScript, which everyone keeps talking about? Here’s a brief, easy-to-understand explanation – no degree in computer science required! You’re also welcome to show this bit to the children at the end if they want to know more. Otherwise, you run the risk of losing them right at the start.
HTML – The basic framework
HTML stands for ‘HyperText Markup Language’. It’s used, so to speak, to build the skeleton of a web page. This is where you define:
You can think of HTML as the building blocks or the Lego baseplate of a house.
CSS – The appearance
CSS stands for ‘Cascading Style Sheets’. It sounds complicated, but in principle it’s simply the styling – in other words, what makes the website look good:
CSS turns grey boxes into a colourful game – it’s like the paint for our house.
JavaScript – Movement & Intelligence
JavaScript is the programming language that brings everything to life. This is where the ‘magic’ happens:
JavaScript is the brain and the muscles of our game. Without JavaScript, everything remains static.
Note:
And the great thing is: on CodePen, you can try all this out straight away and see what happens immediately. Ideal for having a bit of a play, even for grown-ups!
We’ll start with the basic framework:
All of this works directly in CodePen – split into HTML, CSS and JavaScript.
Prompt for ChatGPT:
"Create a simple platform game using HTML, CSS and JavaScript that runs in CodePen. The player character should be able to move and jump using the arrow keys. Platforms should be included."
Tips for chaos lovers:
The kids were first asked to suggest what the character should look like. Suggestions ranged from ‘flying rat’ to‘footballer’. In the end, it turned out to be a manga girl, but next time we’ll give Musialaa go !
The code (HTML, CSS, JS) needs to be copied into CodePen. After that, you can start moving around, but you can’t win or lose just yet. Here are a few fun mini-tasks to do in between:
Now it’s time to get really creative: you design your own character. I tried out various prompts with the children:
Prompt for the AI image generator:
"Generate a PNG image of a 2D manga girl with a pink skirt and plaits, stylised as a game character on a transparent background"
“Generate two more variations of the game character showing her running and jumping”
The images (e.g. the character) are generated using a prompt. You then upload the files to Postimages.org and receive dynamic URLs, e.g. ("https://postimages.org/abc123.png")
My results with ChatGPT:
Available at: https://i.postimg.cc/yJLWnJjX/Chat-GPT-Image-1-Juli-2025-10-33-15.png
Running: https://i.postimg.cc/QB8HpgQd/Chat-GPT-Image-1-Juli-2025-10-35-25.png
Jumping: https://i.postimg.cc/9r9RVQXC/Chat-GPT-Image-1-Juli-2025-10-37-30.png
Prompt for ChatGPT (please adjust the URLs yourself):
“In our game, replace the character with the image https://i.postimg.cc/yJLWnJjX/Chat-GPT-Image-1-Juli-2025-10-33-15.png. When the character is walking, use this URL: https://i.postimg.cc/QB8HpgQd/Chat-GPT-Image-1-Juli-2025-10-35-25.png. When the character jumps, this URL should be used: https://i.postimg.cc/9r9RVQXC/Chat-GPT-Image-1-Juli-2025-10-37-30.png.”
Then copy the code back to CodePen.
Tip:
Once, we had an image where the girl suddenly had three legs. The children thought it was brilliant (“Superpower!”). So why not encourage “What if…?” and test the craziest variations together?
Our game now looked like this:
Pure motivation: Now we’re scattering coins across the platforms.
Prompt for AI image generator:
"Generate a PNG of a golden cartoon-style game coin on a transparent background, shiny and slightly three-dimensional"
Prompt for ChatGPT:
"Extend an existing platform game written in JavaScript so that the player can collect coins. The coins should disappear when they are collected. There should be a score display. The image at the URL https://i.postimg.cc/dV9D2p7W/Chat-GPT-Image-1-Juli-2025-10-42-25.png should be used."
The generated code can be copied back to CodePen. If the full code is not displayed, you can either try copying the parts yourself or use the prompt to display the full code: “Show the full code.”
Now there’s a goal: whoever collects all the coins wins! And a restart button is a must.
Prompt for ChatGPT:
“When all the coins have been collected, the player should be declared the winner. Add a button to restart the game. Show the complete code.”
To make sure it’s not too easy, we’ve added birds as enemies – they fly all over the place and cause quite a bit of chaos.
Prompt for AI image generator:
"Generate a PNG of a small blue manga bird, with its wings spread, in a side view, with a transparent background"
Prompt for ChatGPT:
"Add flying enemies (e.g. birds) that move randomly to a platformer game written in JavaScript. If the player touches them, the game ends. Use the URL https://i.postimg.cc/Y0qjyxJ6/Chat-GPT-Image-1-Juli-2025-10-56-16.png for the birds."
This is whatthe game looked like in our version:
What we learnt from this:
The children quickly came up with their own ideas for enemies: “Can the bird shoot pizza?” “What if a UFO suddenly appears?” Next time, perhaps a boss battle with the classteacher…
Now it’s time for power-ups!
Treasure image generated via prompt: https://i.postimg.cc/J4hWYhhC/Chat-GPT-Image-1-Juli-2025-11-05-35.png
Prompt for AI image generator:
"Generate a PNG image of a gleaming treasure in a treasure chest, cartoon-style, with golden details and a transparent background"
Prompt for ChatGPT:
"Extend a platform game in JavaScript: When the player collects a treasure item, their jump height should increase for 10 seconds. After that, it should return to normal."
Fun idea:
We set it so that the character also becomes invisible for 10 seconds (“Super Treasure!”). It was great fun until none of us could work out where she actually was.
Even more fun ideas for the holiday project
For us, this holiday project was the perfect mix of creative prompts, fun with images and that genuine ‘Wow, I’ve built something!’ feeling.
The children picked up, almost without realising it, how websites are structured and how to use AI tools. And best of all: at the end, they were able to proudly show the game to their granny (“Look, I drew the girl myself – using the computer!”). Since then, they’ve also created a few more versions and different games: football, battleships against the computer, …
My tip:
Just give it a go! Don’t be afraid of a bit of chaos. Brainstorm ideas together, try out prompts, upload images – and see straight away how it all turns up in the game. It’s motivating – and not just for the children! You can then use Veo to generate a video straight from the screenshot of the image.
Have fun recreating it!
Complete example game:
https://codepen.io/Stahr/pen/QwbPomr
Do you have any questions or need assistance?
The joy of experimentation that children experience in this project is precisely the approach we take to technological innovation here at iteratec, fostering curiosity, creativity and the courage to try new things. You can read about what this means in real-world projects in our Champion Stories.
You can find out more about the possibilities of AI for your business on our website. Please feel free to get in touch with us.
