Recently, we had a breakthrough where he learned how to leverage Google Gemini as a learning tool (not to write code for him, but as a better search and as a coding teacher). This leveled him up big time and he decided to make his own game.
Game link here: https://www.armaansahni.com/game/
He's coded all the HTML, CSS & JS by hand in VSCode. He's made the animated graphics on his own using a web based sprite editor called Piskel.
For the game, I provided hints along the way and Gemini has helped him with syntax. View source to see the code. He's excited to share with the community.
He also wrote a blog post about how he made this game: https://www.armaansahni.com/how-i-coded-a-game-using-ai/ (he independently figured out how to leverage Gemini effectively and writes about it here).
Regarding the blog post - We had a discussion about who the target audience is (ie not 9 year olds!), what they would be interested in learning about and the general outline. He then dictated his words into the computer (which gets around spelling issues), and he went through multiple rounds of feedback from his parents (improving clarity, punctuation, etc). In other words, its his words & thoughts but he had help along the way!
NOTE: both parents are programmers, who provided valuable guidance through his coding journey.
Be fun to add some music to this.
In terms of constructive feedback: I would like to know when the various weapons are "charged." It doesn't seem like we can tell from looking.
Also it might be interesting to see what question the opponent is working on and what his answer is.
But well done!
1. Dont't allow button clicking when not the player's turn (expect tiny dev might be getting tripped up by async event handlers here)
2. Visually flag whether or not an ability is charged
Appreciate the feedback!
"Sorry, you have to branch first."
"Sorry, you have to submit a pull request."
"Did you complete your peer code review?"
"Did you close the associated Jira tickets?"
"Did this pass your test harness?"
"Are you having this built and tested by your CICD bot?"
"... is this project's architecture even approved? Sorry, you need to submit this to the architectural review board. They meet once a month."
Come to think of it, I'm now recognizing why coding used to be more fun.
For this version, I stopped at "does it work? alright, move forward"
This has me dead. To the kiddo: great work, this is an amazing start.
if you use the throwing star multiple times, it charges up other ones. But if you use another one, then you have to charge it up again. I believe 4 throwing stars give you the exploding star!
I think it might just be doing random choice when it's clicked. I found that if you get the "it's charging" message, you can just click again & again & eventually one of them will go through.
Edit: I think the "charge" is earned when the enemy move is completed, but the logic is buggy. Pretty fun first game nevertheless.
Appreciate the feedback
Also 32x32 limited reduces complexity a lot when trying to make a visual.
Then one day I explained how the animation worked in the Piskel app (it had layers and frames). I came back an hour later and he had that flying snake that absolutely blew me away. He originally had it at 4 frames we gave him feedback that he needs more frames to be smooth. He upped it to 8.
The graphics is where had the least guidance from parents. We were focused on the code/logic aspects.
So my guidance was more of a set of hints as needed, for example "you want to boxes side by side, figure out how to do that using CSS" .. then he'd go away and talk to Gemini and ultimately Gemini would give him multiple approaches that he could try.
When it came to animation, I explained that there are many ways to animate (CSS, JS, etc) and guided him towards animated images. Basically, we "chatted" about a feature, I gave him some hints, then he went off and talked to Gemini for syntax and wrote the code. Many features he knew exactly what to do. If he wasn't sure, he'd have a discussion with me.
Basically, I was like a senior dev sounding board. He was the junior developer doing the work. Gemini was his Google/StackOverflow.
Keep it up! Just don’t add micro-transactions :P
Echoing the other comment - as a tired dad, I struggle with the Math questions :)
As a programmer, I'm surprised - I can say a few words (eg: "look into css background styles") and he can say it to Gemini and slowly figure out stuff on his own.
As a test player of this game - I don't want to think so much, but if it means he'll learn some math in the process, I'll do it. :)
We've talked about using a visual indicator, perhaps greying out uncharged attacks.
I would recommend a couple of small things for the code. Variable names are usually ALL_CAPS if they never change (for instance const PI =3.142) and camelCaseForOtherVariables. snake_case_variables aren't really used in JavaScript, but aren't technically wrong. Also, it's usually good to put variables into nested data structures with hashmaps instead of comparing based upon array index. This is in "the real world" though, in academic computer science algorithms based on position in lists are more common.
If you want to get what we call "Code Review" a good way would be to feed your source code into a LLM to have the LLM give feedback based on your code, and recommend improvements. Most people like Claude best for dealing with code nowadays.
I would also recommend putting your code on Github so that people can check it out.
Very impressive!
Newsletter was added after people on reddit asked about how they can be notified for v2 of the game :) - I had to help him with the newsletter integration.
Btw, this game reminds me of BBS door games. Great stuff.
I'm a little confused on how to charge up, but overall - super impressive.
improving clarity of the charging aspect is on his roadmap for v2 :)
1. Take input on the page rather than through a prompt. Current implementation breaks immersion.
2. I'd like there to be some time pressure. This can be done either by the opponent making their attacks on a timer (rather than taking turns the way it's done now) or by putting an explicit countdown for how long you have to solve the arithmetic problem. Maybe you can find some other creative way to put time pressure on the player.
3. I'd like a visual indication of when an attack has been charged.
4. Music/sound would be awesome.
alert() was MVP style guidance on my part. Least effort way to get a modal. Quick for him to learn and implement.
Appreciate the feedback!
Thanks for checking it out!
I really don't buy that this was written/created by an actual 9yr old.
But this might just be my unhealthy pessimism/skepticism when it comes to stuff on the internet.
Both parents are programmers, and have also written blogs. While the motivation/drive is his own, he has helpful guidance to accomplish what he wants to do.
The blog is his own words. We helped with the outline, and also provided multiple rounds of feedback to ensure good clarity of what he's trying to express. We tried not to interfere too much with his thoughts. The quoted thought "because it was like a human, it could also be wrong like a human" is something he was telling us when he discovered it hallucinated. But he doesn't understand what an LLM hallucination is, that was his words. I asked him to share that in his blog post.
The code is written on his own. But when he gets stuck, he has us to give him hints. As programmers, we can speed up him significantly by steering him in the right direction.
-- My son, 3.
– My granpa, 86
Great son and great parenting. Congrats!!!
This all comes down to "judgement".
The current state-of-the-art isn't yet there yet (saying this as someone who spent the last year building on current LLM tech).
I think it's possible for AI to take on the role in the future, when it's capable of reasoning at a much higher level than it's at now. We already have big context windows, ability for AI to "see" your screen, etc. But what we're missing is good judgement.
One of the neat things about these sorts of indie games is you can often watch the skills of the dev improve over the life of the game, too. The first blood spatters in the game above were little more than #f00 scribbles in MS Paint. Later graphics got significantly better.
It also had a generic name ("RPGWo", short for "RPG World") — "THE GAMEY GAME" feels right up there.
One of the hardest bugs I ran into as a kid was some code that was something like,
List lst = new List();
List 1st = new List();
After gaining access to the Internet, finding an online forum was the best, since then you could share a bug with other people! And they'd tell you where you went wrong! (Thank you, Allegro forums.)
The next generation of developers have so much power at their fingertips.
Much better to learn to have a conversation with a deterministic compiler than an LLM that'll just cook up some random junk when it gets backed into a corner.
Kudos to your son and props for fostering this creativity in them!
Appreciate the feedback!
I would highly recommend parents consider teaching their kids using processing (p5.js), it’s super visual but still “real” code so you still build that muscle memory of thinking in loops and typing out real code: https://p5js.org/tutorials/
There’s lots of art and games to be inspired by: https://openprocessing.org/browse?time=anytime&type=tags&q=g...
And there’s some great books from dan shiffman on it that are super visual but still teach programming concepts: http://learningprocessing.com/ https://natureofcode.com/
When you start out programming that young it is hard to go from idea to thing on the screen doing what you want. So the advantage of using processing is it keeps kids engaged and removes the frustration of not making progress since everything is visual you’re always moving around stuff on the screen every frame so it’s quick and easy feedback.
https://github.com/KilledByAPixel/LittleJS
is awesome and has many examples so you can start by editing them
Nice art!
10/10, would play again
If my florist handed me a dead flower, I'd be irked. If a 4 year old hands me a dead flower saying "I picked this for you!", I'd tell them what a beautiful flower it was and how much I appreciated the nice thing they did for me.
A 9 year old isn't a 4 year old, but I think you get the gist.
That said - thanks for checking it out :)
You're doing a math game, math gamified. Let's throw a choice in there.
Since you replied, here's one idea:
(1) present five numbers. (2) You, the player, chose two numbers (3) You perform an operation (3.1) operation: add/subtract/multiply/divide, but perhaps exponentiation and modulo and lcm and factorize and whatever else. it's probably best to keep it simple. (3.1.1) this can get random: what was the highest number last round? how many green letters are there on the screen? (3.2) operations are tied to the special attacks,eg tier 1 attacks are add/subtract, tier 2 mult/div, and so on. (4) you type in your answer (5) if you type in an answer that's the correct result of an operation applied to two of the numbers, then you do the corresponding attack.
So it's not add these two numbers pass/fail. It's you decide what math you want to do, and can do, and can do in a time limit, and that achieves the effect you're looking for.
Anyways, it's always fun to make a thing.
1. When an attack lands, we play an attack animation, but I notice the HP is deducted before it even starts to play. It would be better to wait until the animation is over to reduce the HP, in time with when the "hit" visually occurs.
2. It seems my character had some sort of Magic Power building up for more powerful attacks, but I couldn't see the charge level, so it was hard to plan the more powerful moves. Some sort of visual indicator for which moves are ready to go would be great.
Throwing Star = +1, Cost 0
Shooting Star = +1, Cost 2
Blasting Star = +1, Cost 3
Exploding Star = +1, Cost 4
1. I'd like some indicator of when a move is "charged up" instead of having to click on it.
2. In the dialog for the message "The move you want to use is not charged up yet.Click 'ok' and then select another move." the button actually says "close" not OK.
Overall well done though!
I was 10 or 11 when I wrote my first (and only?) game, but A: it was dead simple, and B: I didn't have YouTube, Netflix, and an infinite variety of games a click away to distract me.
I'm impressed with any kids today that can withstand the siren call of distractions on the Internet. I doubt I'd even survive high school today.
Actually we did start with Godot - but it was too much too fast and he was overwhelmed.
He mentions this in his blog post. So we ultimately stepped back and I wanted him to learn to be resourceful. I give him a series of small changes (eg: write a function in any language that displays "hello world" on the screen) and he delivered those results in JS (he already knew HTML/CSS at this point). The rest comes as a natural progression.
I guess in this case, the best and pragmatic option was to use what you know.
In the future, we'll try Godot again :)
But the "open web" seems to give limitless potential. Canvas, network APIs, lots of interesting libraries to build on, etc. I wasn't familiar with the ability to synthesize sounds - that would be interesting to look into.
Appreciate the feedback! :)
My son recently turned 8. All his coding so far has been with Scratch and other block-based programming environments (Octostudio, VEX Robotics, Apitor, Microsoft Makecode).
His typing speed is better than most kids his age, but still slow (around 10wpm).
I'm curious how you helped introduce your son to text-based programming. I've been considering either:
A) Having him go through this free Python course, that includes inline exercises: https://programming-24.mooc.fi/
OR
B) Having him create a web page in repl.it or similar.
He started with Scratch JR & Scratch.
Then we switched to Tynker Jr & Tynker. Which provide challenge oriented block based games. Teaches loops, functions, etc.
Then we switched to CodeMonkey, which provides challenge oriented block & code based games (coffeescript, python). Teaches variables, arrays, etc.
Then I felt there was not enough new learning from the above. So I gave him VSCode and had him go through Khan Academy's HTML lesson.
That's when he made a bunch of HTML pages you see: https://www.armaansahni.com/ (pokemon, bakis, etc). ALL the HTML/CSS on the site is hand written.
Then I wanted him to learn how to be resourceful... for this, I gave him a serious of small challenges (eg: "make a function that displays hello world on the screen") where he had to figure out the answer himself. Use Gemini or Google, etc. But don't ask me. He ended up learning how to use Gemini to accelerate his learning (see his blog post, he writes about it a bit) and he was submitting solutions to me in JS. He had prior Gemini experience because he was using it to create images, and JS was natural extension of HTML.
Then one day he decided he wanted to make a game that he had in his mind.
In this above process, I basically observed what he was learning and switched to apps where I felt he could still learn something new.
It would encourage him to reduce number of lines of code (i.e. use loops!) to get more stars. And we encouraged him to get 3 stars on every level.
It also provided both a block based view or a code based view of the work you're doing, which I thought was pretty cool.
Big thumbs up from my side for the app. It taught him the basics of loops and functions, through challenges to keep it motivation.
My kid loved the dragon theme.
Additionally, I'm glad you weren't afraid to hand your son the real tools and let him build and break stuff. For some reason with programming, so much of the curriculum (even for adults) spends a lot of effort to hide away the things that are perceived as too difficult (e.g., pointers, memory allocation, etc). For children in particular it seems to be the actual code itself, and so we have things like scratch. It's quite refreshing to see a parent go against the grain on this one.
I think the curriculum hides the code because its just so complicated. For example, just to build on the web he has to learn 3 different languages (HTML, CSS, JS). To do anything simple (like move a box on a screeen) there are too many choices (animated gif, CSS animation, JS animation, etc). Then there's complexity of code management (eg: this game uses just 1 big file) or deployment (how do you "run" your code).
So I believe simplifying things (i.e. Scratch) is a way to get people to do it without getting scared of the complexity. In our case, the goal is to learn the complexity, just in baby steps.
Appreciate your comments!
Your son has a seriously advantageous head start on life. Kudos!
Get him on gtypist for 20-30 min a day. It’ll pay dividends for life. You’ll be shocked how fast it gets up to 60+ wpm.
He only does 2-3 mins per day of focused typing practice. Most of his daily non-school study time is spent on math (Math Academy), Chinese (writing) and memorizing essential root words (using Anki). I don't want to add anything, as he already has little free time to play and read on weekdays.
Thanks for checking out the game and for the feedback!
Appreciate the love
I didn’t understand the “charging” mechanic. A little more explanation or some visual that shows charging would help.
Pretty sweet game! Keep it up!
Scrolled through all of the comments, didn't find mention of the spelling mistake right at the top. Sorry, but spelling/grammatical errors often communicate sloppiness. Even when you worked very hard.
"Chosse your oponent"
perhaps:
Choose your opponent:"
and
"you win refresh to go again"
could be
"You won! Refresh to play again" -- you could even add a link to load the page again.
"sorry that was the wrong answer, the corect answer was:"
could have "correct", and a capital letter for "Sorry"
Sorry I'm not great at games but I like looking at code and interfaces.
Those arrays were for a past version. I nudged him towards randomly generated question/answers. That's currently dead code.
"utah2" -- haha, his variable names are sometimes not useful here. We visited Utah months before he wrote the game, so that inspired that variable name I guess! This version I wasn't nitpicking not he code as long as it worked. The bar higher for the next version.
.. and yes, spelling issues are top thing to fix for next version! At the moment, he can code better than he can spell.
Thanks for taking a peek under the hood :)
feedback: Congrats on shipping! Many professional developers can't claim the same :)
I encouraged to ship early. You know, better done than perfect. Trying to show him the importance of feedback. We think of stuff, but we'll miss many things. Once it gets out in the real world, we'll get real user feedback and learn more.
eg: I test played it many times for him, yet I missed the fact that 'charging' is totally unclear
• I can't "see" when exploding star is charged up, except by clicking it every turn.
• I can't tell whether I've got the answer right or wrong. The animation is not exposed to Orca at all. It would be nice to have a text description of what's happening (which you could then apply aria-live to).
• Technically, I can find this information by navigating down and checking the HP scores, given knowledge of the game rules. (Just putting aria-live=polite on the HP elements would be a quick fix.)
• I can't necessarily read English: the other text can be auto-translated by my browser, since the page is marked lang=en, but the text in the images can't unless the alt attribute is set appropriately.
• You use - (hyphen-minus) rather than − (U+2212 MINUS SIGN). Most screen-reader users will be used to this: do NOT tweak things to make it sound better in one screen reader: that will probably break things for others. However, in this case, you do really mean 24 − 5, so it might be worth changing it.
• document.write replaces the document (not its contents), which causes some software (e.g. Firefox F12 Inspect Element) to break a bit. Orca-in-Firefox seems to cope, though, so this probably isn't a big deal.
Digital accessibility involves considering a lot of I/O modalities at once, so it's really hard. (A lot of the advice you'll find online is wrong: there are even companies who sell wrong "solutions", and it's very annoying!) Since your game is mostly HTML, with <button> for controls, it's already very accessible. This is, in all sincerity, a lot better than most professionals can manage.
Edit: ooh, you do have a blog. I'd suggest RSS, though. Email sign up forms are a pain to manage, there are privacy problems, and it's generally less convenient than RSS.
Interesting! I tried to guide him towards the simple approach - eg: alert() is way simpler than making some sort of modal with HTML/CSS, etc. But now that I think about, that approach (i.e. just use what the browser provides) also results in a more accessible result.
I appreciate the detailed feedback here. This is awesome! I'm going to leverage this to have a discussion about accessibility with my son. It's something we haven't taken active consideration for through this process.
And if you've come up with a cool idea for how to make something "more accessible", check whether Adrian Roselli wrote a "here's why you should never ever ever do this" article on the subject. https://adrianroselli.com/2024/11/avoid-read-only-controls.h... is funny and illustrates the point:
> It’s weird to me that after I urged everyone not to disable form controls, a bunch of them decided that making them read-only was somehow better. But here we are.
https://adrianroselli.com/2019/02/uncanny-a11y.html is an introductory list. Here's one specifically about screen readers: https://adrianroselli.com/2021/10/blaming-screen-readers-red....
This win page is perfect. Please never change it.
This is neat, thank you for sharing!
Here's some ideas for improvements you could make:
- Add a button to go back to the main menu / exit the battle, I keep hitting the home button instead
- Add some sort of indicator to make it clear when an attack is charged. Also maybe some hints as to how attacks are charged in the first place.
- Consider moving the question input to inside the game instead of the alert
- Try playing around with the colors to make text easier to read.
I wish there was a way to know when an attack was charged up, or maybe show its progress in charging.
I like the way you’ve made animations for the attacks. One thing I noticed is that the health counter goes down right away, before the attack hits and makes the background flash red.
I wonder if the health could go down at the same time the attack hits? It’s a small thing, but it might make the attack feel even more exciting!
Appreciate the feedback!
Thanks!
How do I charge up my skills? It also doesn't show which skills are charged and which aren't - all the buttons look the same! Could the buttons maybe change color depending on if they're charged or not? Or maybe show how long until they are charged?
I found it insightful that he used the microphone to move faster, and that he couldn’t always trust AI, because it can be just as confidently wrong as any human.
Both of you, keep up the good work!
That's awesome!!
his young eyes arent bothered by crazy contrast :)
most of the feedback i'd want to give has already been given though... e.g. the attack charging confused me a bit until i worked it out by inference.
the animations are probably the highlight of this for me. they add some character nicely. adding more elements to show the attacks in progress beyond the colour changes would be a nice way to improve this.
i would suggest removing 0 from the rng for the math problems. occasionally you can get 0 + number which feels like a cheat almost. also maybe forcing the numbers to always be in double digits for the addition problems? he seems to be aware how to do this from looking at how the divide by zero is avoided.
another small thing would be to disable new input whilst the attack sequence is running... although again others have mentioned that.
----
overall this is impressive and interesting to see. i taught myself to write code starting when i was 8 using qbasic and its help file, then starting with visual basic when i was 11 and C when i was 12 - it was a different time, and different tools with different challenges, but i think any early start is helpful, especially if you have to work things out for yourself.
this game reminds me of some of my own early efforts, although rather than wrangling the complexity of a modern browser environment and language, i was wrangling with the lack of documentation and learning materials for logic, maths and graphics.
today i am the technical director of a games company with a cv littered with AAA, mobile and VR games. if your son eventually decides to choose this sort of career, i expect this kind of early work will pay huge dividends.
good work.
He needs to think more about "hardness" of a question and what that means. Right now, multiply/divide are considered "more hard" but that's not actually quite correct given the implementation of divide.
Appreciate the feedback! I'm not sure if games are his future, but it's a great stepping stone at the current age as the output is shareable with his friends!
We had a talk about color contrast and WCAG
It gave me a lifelong obsession with programming, and I'm still a principal engineer today
It starts with a small seed. Once planted, you realize you can do anything and that software is everywhere.
The text in the red boxes is hard to read. Suggest changing to white.
The more advanced weapons that are locked actually have easier questions. I would expect them to be harder.
I can’t tell when I can use the advanced weapons. Suggest showing the charge level along with Hp.
Great job!
Specifically for JS? I didn't give him anything material actually. I gave him a serious of small challenges starting with: "write a function that displays hello world on the screen" ... he already know HTML/CSS and he talked to Gemini to figure out the best way to use a function in HTML and it guided him towards JS. He give me a solution in a JS console, with a function that he executed.
Then I built on that with more challenges. He continued to work with Gemini. He talks about how he uses Gemini in his blog post, it's an interesting learning technique he found.
So mostly he's learning by doing. He's figuring out "how to do X" either using a hint from me or just by asking Gemini which gives him some guidance. Then he has to figure out how to apply the hint/samples to his actual game. His IDE has no LLM built-in, he uses the LLM from the browser.
The scorpion is shooting poison!
The move charging mechanic isn't clear. Somebody documented it here: https://news.ycombinator.com/item?id=42312807 .. it will be made more clear for next version!
Thanks for sharing.
Some people have mentioned how we aren't sure when weapons are charged, maybe extra animation there would be useful.
Also, the villain and I beat each other at the same time (I think?). So the screen after was just:
"you win refresh to go againyou lose refresh to try again.you win refresh to go againyou lose refresh to try again."
So the game is actually turn based but the turns are not currently enforced. If you dont play by taking turns, then some weird things can happen like what you see on win/lose section.
for v2 he's organizing himself using trello :)
Kanban boards, on the other hand, are "agile". /s
Congratulations to him on his first "real" program, I was 13 in 1977 when I started (with BASIC for my sins :) )
Keeping coding!