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.
The sprites being animated was definitely not something I expected. Makes the whole thing feel a lot more alive all of a sudden.
I encourage everyone to also read the accompanying blog post linked in the OP. The paragraph about how I'm probably thinking that AI wrote the game for him really made me chuckle. That's exactly what I was thinking when I first read the blog title! Granted, it still would have been cool for a 9-year old, just not as cool as the alternative. So great job in immediately addressing this in the introduction. That seems like a really good use-case for AI (and I'm generally not the biggest fan of AI).
The "Dad's comments" throughout the post are also a great way of providing some additional context without editorializing the kid's own writing.
I was not expecting animations for v1 either! But one day he asked me what the extra buttons were in Piskel and I explained frames + layers. His eyes lit up and the flying snake was born an hour later. Originally with 4 frames, but mom gave him feedback that he needs more frames for it to be smooth. Thus I believe it is currently 8 frames!
And we have talked in depth about how not to use AI. He has a healthy mistrust of it because he's seen first hand how it hallucinates.
v2 has sounds, which got us into a long discussion around copyrights. He's recording his own! ;)
I will add this although it is well beyond the OP's child to fully understand... Congratulations on delivering something that people like!
Cheers ^_^
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.
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.
Or, something small and sneaky, like a pixel changing.
[Removes cloak]
On second thought, that would kill the charm of it.
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
This has me dead. To the kiddo: great work, this is an amazing start.
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"
Its great you have so many tools now to learn, and your parents to ask advice. Keep it up, programming is great fun. For me as a kid it was great way to learn and explore and create in a world where I didn't have much agency.
Regarding age, my buddy from college started learning to code when _he_ was 9, on BASIC, another old programming language.
If I can suggest some potential learning resources for when you really want to learn more about code, checkout https://mitp-content-server.mit.edu/books/content/sectbyfn/b.... SICP was fantastic for me. If you're stuck, take it as a learning opportunity, ask for help, and keep at it. If learning a new language is too much for you, see https://sicp.sourceacademy.org/ or search google for other various attempts to port the stuff from SICP to JS world. (note to parents: if you happen to be doing this, my advice would be to set up DrRacket and install the SICP language (https://docs.racket-lang.org/sicp-manual/index.html), also feel me to email me any q's, email address in bio)
This cannot be used to date you. Kids these days (and presumably anywhere in between) are still into pokemon. Just today it’s Koraidon and Miraidon.
:D
If you look at the other pages on OP's website, they too are a Pokemon fan. :)
Do you have an opinion?
Oh wow, this reminded me... I was also ~12, maybe a bit younger, I don't know exactly.
I wanted to build my own Neopets, using Dreamweaver! I was making page after page, so I could link them together.
Stuff like: "home.html" -> "acara.html" -> "feed acara.html" -> "home after feed acara.html"... I didn't understand how people could make something like Neopets!?!
Luckly my older brother gave me some tips. But yeah, that started off my journey, as well as Game Maker!
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.
I dunno if such skepticism is healthy or not, but looking at the source I feel that it contains too many things that need explaining to a 9yo: `DOCTYPE` and all those `META` tags correctly set when they make no difference to the game, why `box-sizing` has to be specified, all those different `display` attributes correctly set for the display that is needed for that element, what the `ease-in-out` means ...
And that's without even getting to the Javascript stuff, like why use const vs let, why use backticks and interpolation, things commented out temporarily instead of removed, the way the code is modularised, etc
In short, there are too many irrelevant-to-the-output best practices implemented that, I feel (after seeing what a lot of beginner/student programmers produce) demonstrates a level of experience that cannot come from "My First Game".
The signs of an experienced hand in the development is, to me, unmistakable.
We went through MANY iterations (test-play/code-review + feedback + dev) before it was released to the public, which meant there was a lot of discussions and lots of opportunities for him to correct many small issues.
Some thoughts:
* DOCTYPE & meta utf-8 - he learned from Khan academy
* meta viewport - I showed him how to test for mobile and pushed to make mobile a priority
* const/let/backticks - he uses prettier in VSCode, which does this automatically
* code modularization - as a result of discussions around maintainability
-- My son, 3.
– My granpa, 86
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.
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!
However, this is not an approach that works for the masses. The vast majority of programmers are quite happy to work at the surface level and they can tackle a huge amount of the work doing things I consider too easy to be interesting. That's good, because I can't motivate myself to do that boring stuff either.
You are right that baby steps is always the way. Especially good when you can get something basic working, then test & iterate.
It's simple and clearly written but quite verbose
Your son has a seriously advantageous head start on life. Kudos!
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.
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.
Playing computer games (and then later programming with Logo and BASIC) is how I got introduced to computers. I too wanted to develop my own computer game when I was 8 year old. But unfortunately, I neither had access to enough time with computers nor did I have sufficient programming skills back then.
I did end up fulfilling my childhood dream of developing an invaders-like game 30 years later as an adult. I too chose to implement it using plain HTML and JavaScript. I have written more about it here: <https://github.com/susam/invaders#why>.
It is very heartwarming to see that we live in an era where computers are pervasive and a 9 year old can learn all this stuff from the World Wide Web and large language models, and then implement a fully functional computer game!
Technology is so accessible today - the limitation is only will and desire.
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! :)
If he does choose to pursue this in the future, he'll have a strong start. There's still a question of what changes will come to the industry as a result of AI.
Appreciate the comments!
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.
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 :) )
`onclick` handlers inline are a great way to get going with interactivity. One possible improvement could be to add event listeners dynamically after `load`.
Another challenge might be to move stuff outside of the global namespace, especially variables. For a challenge and possible improvement, see if you can implement a Singleton pattern.
Start practicing now with inline comments. In HTML and in JS. Build that as a good habit early -- it will save you and those around you countless hours in the future.
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.
Python has made some significant strides in this area recently, but in my mind it's nowhere near enough.
It never told me mostly useless stuff like C, which I was exposed to a few years later. Error messages in C-ish languages seemed like they could be summarised as "Syntax error on line 247. Additionally, you have errors on 3123 other lines.". Often, the real error was on some earlier line, pages away.
The following may seem shocking to people who got started with typical programming languages, but most IDEs after my experience with FutureBASIC felt more like "a loose arrangement of parts that kinda work together if you configure them just right", rather than an _integrated_ development _environment_. (-: …Just trying to get a build environment set up or reconfigured seemed error-prone and had its own cryptic error messages. With FB, I just copied the application/executable file wherever I wanted, and copied a small folder/directory of support files to the same location. I didn't have to worry about separate "linking" and "object files", or how to tell the editing environment where the compiler was before the environment would know what to do when I told it to compile
My limited experience with the Rust compiler is that its very good at this, at least for a total newbie to Rust.
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 :)
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
https://www.reddit.com/r/learnprogramming/comments/1elfo3q/m...
Backstory: My son has been learning to code. We had a breakthrough recently. I wanted him to figure out how to use the Internet as a resource, so I gave him a set of increasingly harder tasks. He was encouraged to ask Gemini and Google for help, but to try not to ask me. Although it was a rough start, he eventually figured out how to leverage Gemini. This is interesting part: When he'd ask it for information, the AI would give him a wall of text. He would rephrase what he learned in his own words and ask the AI if his understanding was correct. When he did this, the AI would give him back a nuanced response identifying where he was right and where was wrong. This feedback loop leveled up his coding skills big time. In a few weeks of this he felt confident and comfortable enough to build his game.
Here's a link to his game (called The Gamey Game) https://www.armaansahni.com/game/
And here's a blog post he wrote about his experience making The Gamey Game: https://www.armaansahni.com/how-i-coded-a-game-using-ai/
He'd appreciate any feedback (about the game, writing, code, etc). He'll be reading all the comments.
I simply wanted to share with you how proud would i be if my 9 yo child made such a similar game and wanted to thank you for inspiration since it's a few months i'm thinking to teach him the basic of programming even if i don't want him to focus on computers and screens in general.
I wrote my first assembly routine when i was only 7 on my commodore64 (thinking of it today i'm really really amazed!) but today our world is different and i think today we must try to keep our children away as much as we can from tech stuff so this is what is keeping me away from teaching him coding.
I try to make a distinction between consumption and creation activities. Consumption activities (social media, youtube, playing games, etc) are time limited. But we're much more relaxed for creation activities (coding, making music/art, etc).
This approach helps keep them safe from some of the negatives of the web, while letting them learn something valuable.
I'm glad that you have made it work for you.
How do you define "tech stuff" and why do you want to keep children away from that?
Little kids, in my opinion, should focus on things that don’t require electronics, for example things such as LEGO, drawing with pencils instead of a tablet, reading books instead of watching tv or reading an ebook. They shouldn’t have a smartwatch distracting them during school lessons.
They will have time to be deeply involved with electronics but before they must acquire “material” experiences
But definitely i must decide for them if something is good or bad for their growth
1. Give us an indication on when the weapons are charged. Change in colour perhaps?
2. Might be nice to show what the problem the opponent worked on is and what its result was so that we know.
3. It might also be nice to put the sums solved so far in some kind of list at the bottom so that you can see what happened.
4. The HP bar can change colour as the health goes down. Would add some more excitement to the game. :)
5. Minor typo "chose" your move instead of "choose your move"
I've been working through https://www.amazon.in/JavaScript-Kids-Playful-Introduction-P... with my own son. He's 12. I encouraged him to put the exercises he made onto a site as well as some of the things he wanted to do by himself. We've reached the chapters on the canvas element so more things will be coming. Right now, it's mostly jquery and some custom logic.
His site is up at https://mskv.in/ and if the folks here have feedback, I'd be very happy to receive it and pass it on to him.
On a separate note, it was so liberating to watch him just solve things the way he wanted without worrying about patterns, libraries and stuff. So much of my professional time these days is spent with things like that.
Very impressive! I loved the hangman game, and the cool graphics. A cool addition for next version would be some kind of visual progress (or anti-progress) where the hangman gets angrier or something like that for every wrong letter entered.
The car game is completely random and non-interactive, right? Perhaps a text box for each car where those placing the bets can add their name/names? Perhaps also some kind of graphic element in the scorecard to the right, something to separate the cars that have finished from the cars still in the race. Also, the race could end after the third car finishes as there is no point really for the last one to keep racing – it already lost! Nevertheless – really liked the graphics and the cool idea, well executed.
The treasure hunt was also really fun, and nostalgic! Only improvement I can think of is to actually see some kind of gold coin or treasure chest in the end, to know how far off I was the times I lost, and as visual confirmation the times I won. But overall, awesome little game.
Thanks for the detailed feedback!
For example, there definitely needs to be an indication of which moves are charging, since I could not for the life of me tell which ones were ready and which weren't. Either a bar or number underneath the move indicating this (maybe with a nice 'CHARGED' label when ready) would help a lot.
There's also a bit of confusion as to which moves are effective against which enemies too. Like I suspect blasting star is more powerful than throwing star or whatever, but the only way to be sure is trial and error, which lowers the strategic depth quite a bit. Then again, if this isn't a feature at all, having it would add a nice bit of extra value here, since it'd make each fight feel a bit more controllable.
Additionally, it's not always super clear that an attack has done damage, since the HP value seems to change instantly with little fanfare, despite what appears to be an effect marking the attack as having hit its target. Some sort of enemy HP colour change change, a minor screen shake, the text changing after the flash, etc would help illustrate that your attacks are hitting and doing damaging (and that your enemies were doing the same).
Still, on a mechanical level it's a pretty solid first attempt for a game, especially by someone learning to code at such a young age. There are a decent number of enemies, you've got a variety of attacks, the attacks can charge up, there's a win condition and a loss condition, etc. Congrats!
Appreciate the detailed feedback!
> But there was one downside to AI. AI was like a human which is why you could talk to it like a human. But because it was like a human, it could also be wrong like a human.
This is very insightful for a 9 year old! It's so cool to see a child encountering these new technologies and building an intuition for them.
It makes me so happy to see kids learning to make games. I was 9 years old was when I started, except I used the Blender Game Engine (RIP). I have very fond memories of those long hours at the computer.
This next generation will have deep understanding of power and limitations of these tools.
Appreciate your comments!
Of course, he's 9, but maybe this will help him understand how to polish things like this and make them more fun to use?
pounder monster is my favorite animation
THE GAMEY GAME 3D ??
I started coding at 9 as well (which was a long time ago now), so I was very happy to play and see this today.
Throwing Star = +1, Cost 0
Shooting Star = +1, Cost 2
Blasting Star = +1, Cost 3
Exploding Star = +1, Cost 4
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!
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 :)
His whole website is just vanilla JS, HTML, CSS. There's no build step.
https://pikabotz55488.github.io/pikabotz/
It is more as a quiz than a game at the moment but I asked them to use prodigy and your son's game as inspiration and turn it into a fun game during the winter break. Thank you for inspiring our team. We will add a link to the gamey game as one of our references.
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.
I would love to see the code, and some of the interactions he had with the AI.
I would have been embarrassed to death if anyone had posted what I was barely able to code as a teenage, and I started older than him...
Regarding the code - just view source. It's all on one page, no compilation step. There's even a variable called Utah (lol, because we visited Utah months before he was working on the game)
• 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....
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.
Appreciate the feedback!
alert() was MVP style guidance on my part. Least effort way to get a modal. Quick for him to learn and implement.
I have one piece of feedback for him about the code itself, in case he's interested (of course the important part is the game, not the code, but I'm more qualified to give feedback on the JS): put `"use strict"` at the top of every <script>.
Here's the path my son followed: https://news.ycombinator.com/item?id=42313045
The way we fight is a nice surprise (the maths puzzles.)
Maybe the weapons could display a counter for how many turns they need to be available again, but that's only a time saver.
It could be nice to see the puzzles of the opponent and its response. Maybe you could reward the human fighter for solving the opponent puzzle too: dodge (not every time) when the opponent would hit (correct response) or opportunistic attack when the opponent misses (wrong response.) But if you misjudge the opponent's response you should be penalized, maybe extra damage (it was correct, you say it's wrong) or just the missed opportunity to attack (it was wrong, you say it was correct.)
The fight is too long when one always responds correctly. It's only a matter of waiting for the inevitable victory. I don't know if there is something that can be done about this. Maybe more difficult puzzles from the next years of school.
Appreciate the feedback!
Thanks for checking out the game and for the feedback!
Recommendations: - It's hard to tell when health is altered. Perhaps add a temporary color change to the health bar to inform players of the change. Or start to build in animated health that reduces the red fill with the number. - Some abilities require charge, but I couldn't find where that was tracked. Another counter could be added to show this number and any increase. - Add score for the battle. It could track correct answers, or hits, or anything that might be fun. Later versions could include a score/tracker for total monsters fought.
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!
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.
Like others, this morning is rough! Had a late night testing metal deposition machine software. (Tjat went well except for me bumping an e-stop, which killed a test I will be running again tomorrow. Just great!
Any hoo, I was grumpy looking for something to get my brain working and bump into a great game chock full of charm.
Others have expressed my feedback very well. What enemy is thinking is a nice touch! And the art!
Reminds me of both old Internet, filled with fun works like this
, and
Goofy games my peers and I would exchange at school! Mostly we used BASIC, sometimes LOGO.
Big grin over here. Stay cool kiddo. You got great parents.
I'll show him your feedback about the end-game. He was just excited to use document.write()'s side effect of blanking the page if it was the first use of the function. Partly he just wanted to do it because I told him we don't use that function anymore.
Appreciate the feedback!
Perhaps consider having the HP as HP bars, as other games do!
Well done
He was working on it the other actually!
Thanks for checking out the game. Appreciate the feedback!
Constructive feedback: 1. Insight into how "smart" the opponent is via their answers to the questions they're given. 2. Charge indicators, as everyone has said. 3. From a UI perspective, centering the interface would be great, but as we all know, grown adults with PhDs in computer science have a hard time centering divs.
Great work!
He has a link on his website to sign up for updates. He'll type up a note when the next version is out.
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.
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.
Kudos to your son and props for fostering this creativity in them!
Appreciate the feedback!
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!
Suggestions:
What about add difficulty levels? like: Easy: simple addition/subtraction problems Medium: +-/ problems Hard: +-/ problems with a timer (10 to 20 seconds to awnser)
thanks for checking out the game!
We've talked about using a visual indicator, perhaps greying out uncharged attacks.
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!
An easy thing to improve would be to center the screen. Then it would be easier to play for people with larger screens or on large tablet screens.
For the game itself, I played against a fire gollum dude and the pace felt quite slow -- it would have taken me some 10 minutes to beat him, I imagine. I also didn't know when I get to use my cool moves, since there was no UI indicator.
But pacing isn't something we've talked about much. I'll raise this with him.
Appreciate the feedback!
To put the word fun into a more positive perspective: I have over 1000 games on Steam and not a lot of those give me the same amount of fun when i first start them. This nice little game did.
It’s awesome to hear the game stood out, especially with how many you’ve played. Means a lot! I'm going to have to explain the weight of your comment to him :)
Thank you!
To all parents: https://www.zenpencils.com/comic/kevinsmith/
if you'd like an email when he releases his next version, his website has a follow journey link.
Appreciate the love
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!
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!!
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?
"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."
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. :)
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!
Appreciate your comment.
A couple of things I think would make the game a bit smoother are: - Feedback on the charging status, so I could more easily tell when I can use a move - Move the math prompt out of a modal if you can, and into the window, or something where I can click the answer
Keep it up!
He's also removing usage of prompt()/alert().
Appreciate the feedback
I wish there was a way to know when an attack was charged up, or maybe show its progress in charging.
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!
You can 'cheat' to get easier questions by clicking a move then cancelling then clicking again. It would be good if you only generated a single question per move and didn't change them when the question was cancelled.
Thanks for checking it out!
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.
I dont know about 90%. But I can say that I've worked with junior devs that were worse than him. But that is partly due to the tooling - Gemini levels him up big time. I can have a small discussion and give him some hints, and he'll go talk to Gemini about it and get a lot of contextually valuable and highly targeted information.
Thanks for checking out the game!
Keep it up! Just don’t add micro-transactions :P
his young eyes arent bothered by crazy contrast :)
I would like to recommend something else than Gemini by the way, my experience was not good with it.
And using AI is pretty awesome too. Make sure he doesn't skip the proper Software Engineering stuff too though, get his algorithms and architecture patterns right.
Btw lots of answer was 69 but I think it's just coincidence..
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.
One thing: I need a better visual feedback on which spells are charged and which aren't.
Besides that: keep on perfecting that excellent idea!
https://www.contrastrebellion.com/
Blue on red is hard to read.
Thanks!
Thanks for sharing.
This is neat, thank you for sharing!
I wonder if/how that will improve life in the future
And on the other end of the spectrum many college kids today don't know what files and folders are, having used iPhones and web apps their whole lives.
What a strange world.
I think most kids just learn on an iPad and then will consider file management "too confusing" -- why do something hard, when there's an easier way?
We've avoided too much iPad/iPhone activities and have specifically taught file management. I felt its a useful skill. He uses Piskel to make his animation, and handles the download and file movement into his repository himself. At first this was confusing, but he figured it out pretty quick.
He's doing it because he sees his parents do it, and he wants to learn. To him its achievable because he has in-house guidance.
But he doesn't know any kids who are doing what he's doing. Advanced Scratch yes, but not anybody that has broken out of scratch.
The animations are just gifs. I'd say that part is mostly creative/art efforts, though very critical for the final feel of the game.
The enemy animation is cool. The one twirling the gun. And then firing the gun is really awesome.
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.
As a parent, is fame really something you want for him?
The feedback received has been incredibly valuable. Not just for improving the game, but also for sparking conversations at home about game mechanics, color balance, coding standards, and even broader concepts like design and flow.
Ultimately, I'm showing him how we do things in the real world - build it, write about it, make sense of the feedback, and iterate.
Like most people said, I too started kinda like that. Coding/computers is an amazing journey with near infinite paths to choose from
I wish you the best and slow clap to the amazing dad that was there to set the stage and be there for him.
Made my week for sure!
Gave me the old ZX Spectrum vibes when I first started, that adds to the charm.
More of this please!
Months before starting this game, he wanted to create AI images for a story he was writing. At the time, ChatGPT didn't provide free access for image generation but Gemini did. So he got comfortable prompting Gemini.
When it came to writing code, Gemini was the natural and obvious LLM to him. At the time, I also showed him ChatGPT but he said that Gemini understands him better.
He primarily "talks" (dictates) to Gemini and his words are not precise dev-speak, so between voice-to-text & finding the right contextual info (he uses a singe long chat for development), it seems Gemini worked better for him.
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.
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.
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
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.
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.
Also 32x32 limited reduces complexity a lot when trying to make a visual.
Perhaps he can try to use Github to get more feedback and try to colleborate with others :)
This is a 3D shooting game that I discussed with my nine-year-old son. The coding part was implemented by myself and AI.
Welcome to exchange experiences and ideas.
https://github.com/bestian/3d_shoot_game https://bestian.github.io/3d_shoot_game/
*had lots of fun playing!
All of his is not clear - he plans to make it more clear for the next version
This win page is perfect. Please never change it.
It seems clear the understanding of the game idea stems from experience with Pokemon, which introduces children to numbers and the concept of hits, damage, health. Thus it is natural he would have such a game idea as an entry point.
Abstract thinking usually develops around the age of 12. My question was how he was able to make symbolic representations of abstract entities (functions) at that age. I think this is where AI shines, as it bridges the gaps in understanding, thus lifting the burden of solving those gaps instantly and instead allowing for the fun explorative process of engaging with the problem at the current level of understanding -- keeping you at the "almost there" feeling, thus continuing is engaging if not irresistible.
In pedagogy, the zone of proximal development "is a concept in educational psychology that represents the space between what a learner is capable of doing unsupported and what the learner cannot do even with support." (Wikipedia) 20 years ago, this would probably be too difficult even with support from a parent. The parent would have had to do much more of the heavy lifting to allow the child to not be too distracted by syntax and implicit conceptual relationships. For example, in setTimeout(function..., it is not intuitive, even for many adults, to declare a function within a call, let alone to grasp the concept of callbacks and an event-driven environment.
In a way, the AI allows him to "build with blocks", maybe similar to how VisualBasic abstracted away many complexities. He is able to have a creative interaction with AI that is very keen to abstract away complexities that would significantly decrease the motivation to continue. My own experience with AI is interactive, and I feel I learn things much faster, which is in stark contrast to the idea that the AI just writes it for you. You still have to learn and understand in order to formulate intent for the AI and to evaluate and connect the result.
This opened my memory of my own first game I wrote at 12. I had an Amiga 500, lots of games on floppies and among them "Workbench". I found the Amiga Basic interpreter in Workbench on a rainy day while clicking on everything to find something interesting. I figured out the English manual "Amiga Basic" on my shelf, probably related to it.
Not very familiar with the English language at the time, I later managed to make a 100 rows text-adventure consisting of only variables, print, if, then, else. I wasn't able to grasp the other concepts as I did not know what to look for. The idea of a function didn't exist to me. Merely understanding the outline of the reference manual was hard enough. The game spanned three rooms and I got stuck trying to make the inventory. This is how far I came with no guidance at all, no parental involvement, and not even knowing at beforehand what a programming/scripting language was. It would take 4 more years before I picked up programming, then with "Borland Turbo C" shared with me at school on a floppy. I remember my first for-loop deeply impressed me as I realized I could build more complicated things. Later, every time I learned a new concept in the book "Sams Teach Yourself C in 24 Hours" I would have a new game idea.
Keeping coding!
But OP has clearly put a lot of effort in and still gotten not-great results because they aren't making use of more modern tooling (game engines etc) to turn each hour of effort into more productivity.
Children do not need to "turn each hour of effort into more productivity". They need to learn stuff (and feel good about their learning, so they keep doing it).
What this 9-year old did is different. Maybe it’s a modest game, but they used an LLM as a tool to learn to code, not just to produce AI slop.
It feels crummy that you’ve taken a thread that is about celebrating a kid’s first achievement in creating a game and made it about promoting your gamified app which appears to celebrate everything that is wrong with modern games.