My son (9 yrs old) used plain JavaScript to make a game, and wants your feedback

[veesahni]

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]

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]

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

[heresie-dabord]

> 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 ^_^

[DidYaWipe]

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]

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!

[deathanatos]

> 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.

[alexander2002]

Perhaps a grey colour to indicate no charge and a coloured to indicated charged

[themdonuts]

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!

[JoelMcCracken]

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]

> 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.

[jedberg]

> 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]

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?

[jeffhuys]

> 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]

thank you!

[das_keyboard]

> 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]

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]

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.

[dankwizard]

"Everyone dies one day. Everyone. Even wolves. But not books. Not words. Words don't die"

-- My son, 3.

[Cotterzz]

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]

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]

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.

[koolba]

> 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.

[susam]

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]

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]

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]

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

[macintux]

> 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]

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]

yikes! thanks for the bug report

[taylorbuley]

Congrats kid! It's a fun app incorporating strategic and visual play. The code is well structured and clean.

`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.

[immibis]

I'm down voting this because two of these three suggestions make the code more complicated for no actual improvement and probably aren't advice that will help a 9 year old, in my opinion.

[ivanjermakov]

I would suggest instead of inline comments write block comments, describing the behavior of a function or reasonably big and not straightforward section of code. Basically documenting what is not obvious just reading it without context.

[veesahni]

thank you for your feedback!

[deathanatos]

One of the best games I played as a kid was this top-down RPG; the graphics were 2D tiles, pretty clearly drawn with MS Paint or something close. UI was just Visual Basic 6. Indie dev. Fun game. This reminds me of it.

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

… but when I transcribed that onto a computer (this was in a book) I accidentally wrote,

  List 1st = new List();

… because typography is hard, and the font the book used had a l/1 confusable. Compiler error, one of my first. Took me forever to figure it out. (No access to the Internet, then.)

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

[drjasonharrison]

Ah, a fun game, with math!

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"

[drjasonharrison]

Also, looking at the code, I don't think you use "question_array" or "answer_array". And I don't know what "utah2" means.

Sorry I'm not great at games but I like looking at code and interfaces.

[faizshah]

I love this, I first learned Java and “Kids Programming Language” (a strange action script-y flash inspired thing) in elementary school and the lessons I learned there stuck with me until today.

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.

[esun]

Posted to reddit four months ago:

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.

[andretti1977]

Nothing more to add to what has been said ("charging" enhancement is the top one feature needed), this is a great work!

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.

[noufalibrahim]

This is very nice. Love the sprites. Thanks for the information on Piskel. Some possible "enhancements"

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.

[grvbck]

> His site is up at https://mskv.in/ and if the folks here have feedback

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.

[veesahni]

The next version has an animated HP bar. He's also working on improving clarity of the charge mechanic (right now its very confusing).

Thanks for the detailed feedback!

[CM30]

Based on my feedback, it seems pretty good. The main improvements I'd recommend are more user interface things, to make the game feel a bit less luck based.

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!

[owenpalmer]

From the blog post:

> 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.

[veesahni]

He learned about LLM hallucination the hard way, when it recommended things that didn't actually work.

This next generation will have deep understanding of power and limitations of these tools.

Appreciate your comments!

[cookiengineer]

There was this amazing talk called "juice it or lose it" that's meanwhile a little famous among game devs that I would recommend watching with him [1] because it shows how much of a game is effects, tweening and animations.

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?

[1] https://youtube.com/watch?v=Fy0aCDmgnxg

[jfactorial]

I just beat the pounder monster AND got all the math questions right EVEN the division ones and the arithmetic ones where you had to carry a one, so THE GAMEY GAME has me feeling pretty good about myself today.

[WesleyJohnson]

For those wondering, the current charge mechanic is shared amongst all attacks. You start with 0 "charge". Each time you click an attack button (regardless if it lets you attack or not) you gain 1 charge. If you have enough charge, the attack triggers and you're deducted its "charge" cost.

Throwing Star = +1, Cost 0

Shooting Star = +1, Cost 2

Blasting Star = +1, Cost 3

Exploding Star = +1, Cost 4

[veesahni]

did you get this from the source? :)