Readit News logoReadit News
Posted by u/veesahni 9 months ago
My son (9 yrs old) used plain JavaScript to make a game, and wants your feedbackarmaansahni.com/game/...
My 9 year old son has been learning to code. He learned HTML & CSS over the last year or two.

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.

ksassnowski · 9 months ago
Most of my feedback has already been mentioned by others (charging indicators, seeing what the enemy is "thinking", etc.). I still feel the urge to comment just to say how cool this is.

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.

veesahni · 9 months ago
Kids dad here.

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! ;)

cjohnson318 · 9 months ago
Dude, flying snake is my favorite. I've had a pretty bad week, and this really made my day. I miss the weird internet, with sprites and CMYK bright green. Great job.
heresie-dabord · 9 months ago
> I still feel the urge to comment just to say how cool this is.

I will add this although it is well beyond the OP's child to fully understand... Congratulations on delivering something that people like!

Cheers ^_^

veesahni · 9 months ago
Appreciate your comments. At this point, he definitely doesn't understand the depth of the attention his game is getting, but it will be good fuel for keeping him moving towards the next version!
DidYaWipe · 9 months ago
Love it.

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.

veesahni · 9 months ago
improving clarity of the charging aspect is on his roadmap for v2 :)

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!

dizhn · 9 months ago
We need something at the end when we win (or lose). Like a picture of a cat at least :)
deathanatos · 9 months ago
> I would like to know when the various weapons are "charged." It doesn't seem like we can tell from looking.

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.

Twey · 9 months ago
It's not random, you just get +1 charge every time you click an attack — including if the attack doesn't have enough charge to fire.
alexander2002 · 9 months ago
Perhaps a grey colour to indicate no charge and a coloured to indicated charged
veesahni · 9 months ago
Yes, I've talked to him about this. He's played with CSS greyscale and also with opacity. Might be a combination of both that ends up being used in the next version.
ddingus · 9 months ago
[Dons evil cloak]

Or, something small and sneaky, like a pixel changing.

[Removes cloak]

On second thought, that would kill the charm of it.

themdonuts · 9 months ago
Yeah, I was having the same issue. I couldn't tell why the weapon was not charged up. But sometimes on the second click it would work.

But well done!

ethbr1 · 9 months ago
I think there are two improvement requests here:

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

JoelMcCracken · 9 months ago
I'm sure you've gotten a lot of good feedback, but a personal message for your kid: I am well into my adulthood, but I started programming from a similar place way back when. I was probably 12-13 when I was self-studying HTML/CSS/JavaScript. Today the web tech stack is way more complicated than it was when I was a kid, but its also way more capable. You can do so much with it now that was a dream - I was into pokemon as a kid and wanted to make a "fan site", which is what got me learning (just to date how far back this was)!

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)

Aeolun · 9 months ago
> I was into pokemon as a kid and wanted to make a "fan site", which is what got me learning (just to date how far back this was)!

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.

redundantly · 9 months ago
It isn't the interest in Pokémon that dates them, it's wanting to make a webpage for it. :)
tiznow · 9 months ago
This comment made me self-date myself, mercy.
jedberg · 9 months ago
> I was into pokemon as a kid and wanted to make a "fan site", which is what got me learning (just to date how far back this was)!

If you look at the other pages on OP's website, they too are a Pokemon fan. :)

namibj · 9 months ago
I was thinking HtDP is better at teaching for people with no pre-knowledge than SICP; obviously both are very similar.

Do you have an opinion?

JoelMcCracken · 8 months ago
I haven’t read htdp, but I looked through it. It seemed more of a “teach to program” than a “teach you to think about programs at a whole new level”. But HTDP didn’t exist when I was working on sicp.
jeffhuys · 9 months ago
> I was into pokemon as a kid and wanted to make a "fan site", which is what got me learning

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!

veesahni · 9 months ago
thank you!
das_keyboard · 9 months ago
> 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. So I had to make sure that it wasn't getting the answer wrong. For which I would sometimes use Google Search.

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.

veesahni · 9 months ago
Kids dad here.

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.

lelanthran · 9 months ago
I'm skeptical too, and I started at age 10 (C64, though, not html+css+javascript).

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.

veesahni · 9 months ago
Kids dad here. There's no doubt he had a ton of guidance - both parents are experienced programmers. Many things needed explaining to a 9yo, the same things that would have needed explaining to any new developer.

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

dankwizard · 9 months ago
"Everyone dies one day. Everyone. Even wolves. But not books. Not words. Words don't die"

-- My son, 3.

youoy · 9 months ago
"Everyone lies one day. Everyone. Even dads. But not on the internet. Not HN. HN won't lie"

– My granpa, 86

efilife · 9 months ago
Quotes like this always seem smart until you realize you can just burn the books. And the words die like that
veesahni · 9 months ago
love it.
Cotterzz · 9 months ago
I started around the same age. Though sadly not with JS and modern browser tech. The most difficult concepts in use here are arrays and function calls. So quite possible for a clever 9 year old. If he was using an entity component system or monads I would be more skeptical
rahimnathwani · 9 months ago
This is awesome.

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.

veesahni · 9 months ago
We've had a long journey. Main thing is that I realized that my son doesn't learn enough from open ended tools like Scratch. So we tried a bunch of other things.

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.

sky2224 · 9 months ago
I really have to applaud how astute you've been with your observations of how your son is learning things. That's quite difficult.

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.

junon · 9 months ago
I started around 8 or 9 as well. Back then Javascript wasn't really around (was still called DHTML), so I started with Liberty Basic and shortly after that AutoIt, which I loved for a long while and would recommend if he wants to start doing things on the computer - simple to write but doesn't abstract the concepts of the machine away.

Your son has a seriously advantageous head start on life. Kudos!

rahimnathwani · 9 months ago
I'm curious how much use he got out of Tynker? I noticed they have a cyber Monday sale right now, so I might sign up for a year.
rahimnathwani · 9 months ago
Thank you. This is a very helpful description. I think the same process might work for my son.
koolba · 9 months ago
> His typing speed is better than most kids his age, but still slow (around 10wpm).

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.

rahimnathwani · 9 months ago
Thanks. Right now he's using Typing Club, a typing tutor for kids. I will probably have him finish the sequence on there (or at least get to 20wpm on the lower case keys) before moving on to gtypist, keybr or nitrotype.

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.

susam · 9 months ago
Congratulations on successfully crafting a computer game! I played the game briefly this morning and I found it to be quite fun. Glad to see a 9 year old experiencing the joy of computing!

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!

veesahni · 9 months ago
Thanks for sharing your story. Just played the game - its pretty cool. I'll have my son play it, might inspire him :)

Technology is so accessible today - the limitation is only will and desire.

blooalien · 9 months ago
Fantastic work for a 9 year old. If I had access to a computer at 9 I'm not sure I'd be making games so much as playing them. (Although I did move on from playing games to a healthy curiosity about how they worked "under the hood" fairly early on.) When he learns enough to have reached the limits of what he can do in Javascript, you should definitely look into the Godot game engine. Free/OpenSource, powerful, fairly easy to learn, tons of tutorials on YouTube, and even a game that teaches GDScript (their custom Python-like scripting language).
veesahni · 9 months ago
Kids dad here.

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 :)

Cotterzz · 9 months ago
Godot is designed for beginners, but also those that don't like to get their hands too dirty with code. Also the web export is likely inferior to what he can do with JS directly. With that in mind I'd recommend he sticks with JS. If he's interested in doing more advanced games he should look into Three.js, or Pixi, Babylon, Phaser and other engines (and eventually even just raw WebGL and using shaders), all within the browser. There's also the web audio API which can be used to synthesise sounds and music from scratch and then there's WASM which can be used as a compile target for languages like C and C++ JS itself can be used as a procedural, functional or OOP language so while it's easy to learn it has lots to master. Finally, if he does want to move outside the browser, there might be better choices than Godot, like Raylib or Defold or even more professional engines like Unity or Unreal. Not saying it's a bad choice, just that where he is now has a lot to offer, and there might be better alternatives depending on his skills and aims.
blooalien · 9 months ago
Hey, keep on bein' an awesome dad, dude! Hobbies that can double as highly profitable careers later on are the best kinda hobbies (speaking from experience). Nothin' quite beats the feeling of getting paid to do somethin' you actually enjoy doing, or the feeling of being able to create things you want or need using your own skills and hands. ;)
macintux · 9 months ago
> If I had access to a computer at 9 I'm not sure I'd be making games so much as playing them.

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.

peeters · 9 months ago
Awesome job! If you want him to get some experience with bug fixing, I found one: ask him what happens if you click on an attack and then hit escape (it cancels the attack but still charges up your attacks, so you can get to full charge on your first attack)
veesahni · 9 months ago
yikes! thanks for the bug report
peeters · 9 months ago
oh not "yikes" at all I totally peaked at the code to try to find one for him. I feel like bug fixing at that age is a fun exercise; it gets you thinking more laterally about the program you're writing.
matt3210 · 9 months ago
No jira?