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.
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! ;)
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!
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)
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.
Just a small comment, encourage your son (or do it yourself) to archive his site and code so he can revisit it years later. I did and it is amazing to learn again the code I did 25 years 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!
> 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.
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.
I love it! I was not expecting the math based aspect and that took me back to my younger days playing Math Blaster Plus and Number Muncher. Thank you for the trip down memory lane.
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!
I've been writing JavaScript since I was about your son's age and am now one of the editors of the JavaScript specification. His code is much much better than mine was at his age!
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>.
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:
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.
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.
As a programmer, I feel the 'fundamentals' are very important. Because, well, then there's no magic.
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.
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!
Tynker has many games in the app. But they are basically the same type of game with different themes. Your kid will gravitate to whatever theme they like (princess, dragon, space, etc).
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.
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.
For the next version, the monsters have introductory story lines. And he has a giant list of more monsters he wants to add -- we'll have to have a discussion about what's reasonable.
> 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.
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 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
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)
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.
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.
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 consider tech stuff quite everything related to the use of electronic devices: I.e. the use of a smartphone or a smartwatch or the use of a computer.
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
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.
> 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.
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).
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.
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.
I was originally interested in Godot because it had a web export. I feel like building on the web helps with shareability (eg: this post!)
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.
I'm curious to know why you think Godot's web exports are too poor to be useful even to a 9 year old? I've published multiple HTML5 games on itch.io using Godot, including some with P2P multiplayer functionality. Apart from complete inoperability on Safari, I haven't run into many issues?
> 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.
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!
It’s still impressive at 9 for both a game design loop and the coding. If this was v1 as described by the OP then I wouldn’t even judge as I know my mvps for actual paid for products have never been remotely bug free
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.)
I was young at the time, but when I TA'd, the lesson I'd try to impart here is to take the time to learn the lexicon of the compiler error, and understand what it is trying to tell you. Then it's not just "code broke yo" but "is here is what is wrong."
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.
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?
He talks about how he uses the AI in his blog post.
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)
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
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"
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.
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.
I have no feedback that hasn't already been mentioned elsewhere. I just want to say that I love this. Your son is developing a passion for programming very similar to how I did so at his age. Seeing it happen as an adult is fascinating and brings back memories. Also, both your challenge tasks and instruction about resources (Google and AI) were spot on and seemed well heeded. Lots to be proud of here :)
Curious how you did deployment. On the one hand, giving him his own live server on the net seems cool, but that's a bunch more technologies to learn in order to deploy. On the other hand, seems like it would take away from the independence of the project to be like, nice work, I'll put this on the net for you.
I've been doing something similar with my son. I set up a domain for him with an ssh key. He does his coding in a directory on a computer and has an "rsync ..." line which copies everything to his website. It's not fool proof but works so far. https://mskv.in/ is his site.
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/
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.
Exploit or nod to people who dont want to wait to charge their weapons?
function askThem(charge, TheDamage) {
TheCharge = TheCharge + 1; // TheCharge is always incremented
if (charge <= TheCharge) {
[...]
} else {
window.alert("The move you want to use is not charged up yet.Click 'ok' and then select another move.");
}
}
Amazing. Younger people (and people new in any field) often think of intersting approaches without the blessing/curse of "best practices." The process for creating the game was very good and very logical way to learn a new field.
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.
Appreciate the feedback on the code style & variables. I raised this previously but perhaps external feedback will be what he needs to get him motivated to clean it up :)
Agree 100%. Since dad helped, I was expecting to see sprites sheets, or some JS classes for some OOP, etc. Was pleasantly surprised to see how "simple" the approach was for such fun output with a decent amount of variety.
He doesn't understand what a sprite is, or really the motivation behind sprite sheets. To him they're just animated images he made in a tool. Internally he switches the "costumes" of characters (terminology he got from Scratch I believe).
He gets feedback from us from time to time when he writes really bad code. There are still many things that can be improved code wise, but I'm letting it slide to keep motivation up at the moment.
improving clarity of the charging aspect is on his roadmap for v2 :)
I loved playing the game, it was really fun, good job! Now if only I had a shield I could use against power warp core to fend off his attacks maybe I could beat him.
I just played the game on an iPhone in the DuckDuckGo webbrowser.
Works awesome and i had fun! Thank you for making lunchtime a little more fun.
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.
I pushed him for responsiveness, because I told him that when I share his game with his friends (ie their parents), they will inevitably open it on their phone!
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 :)
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.
Awesome! It's nice to see how AI can be used for learning purposes. It changes from all the negative things we hear about it :)
As personal feedback, I'd include an animation showing the attacks charging (or at least a notification once an attack is ready).
Congrats!
First, Congrats to both of you, mom and dad, for your parenting skills.
About the game,
1 - It is fun to play! Awesome ideia to make it turn based attacks and math problems
2 - The artwork is fun! good jobs.
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)
great feedback. So far the hardness of the problem increases with stronger attacks -- today the implementation switches from addition to multiplication, but that could be improved to be more nuanced.
Very impressive! Hopefully you'll excuse this question but do you foresee AI in the future also taking over the handholding & guidance that you as parents provided to your son? (In other words: Will kids soon learn exclusively from AI?)
The human component here is to understand what the child is trying to do, what the available options are, and what level of guidance he needs to steer him towards the option that makes sense (ie easy enough for a simple game for a child, just a small step from what he already knows, etc).
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.
This is really neat. I'm happy that you're encouraging your son to program at such a young age. It really helps to build computer skills to immerse yourself from your early years. I started learning programming using QBasic on my computer at the age of 6. I now know several programming languages and am the go-to person in my friend group for computer help of all kinds. I wish your son the best on his adventures in learning programming.
Great game. I'm very impressed that a 9 year old made this. A few suggestions:
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.
Some of these are already on his plan. We've talked about turning the game into a real-time game instead of a turn-based game, and he was excited about that direction.
re: (1) I know what you mean, but the prompt component is a great way leverage browser UI for input without affecting the rendered website, so it makes good sense in this case.
Awesome! Really liked the animations!!
The charged stuff confused me a bit. I played on mobile so the popup is different from the desktop one, maybe a testing area.
Perhaps consider having the HP as HP bars, as other games do!
A great start! Congratulate them on keeping the scope small. That's important when starting out. Leaves room to build on later as they're learning.
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.
It's fun! The animations are great, too! I just wanted to add, somewhat related, that the Icelandic languages has the word "tölva" for "computer", a neologism comprised of the words for "number" and "prophetess", so if you will, the game's protagonist is a very literal computer.
Very good! I love it! Hope he keeps programming. Tell him i played against a flying snake and won with every calculation right! :)
I loved the animation. There is ofc always ways to improve this but I think this is a very good result!
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.
The attack animations are superb. I did not defeat the power warp core but I will. Seeing power warp core get the question wrong is satisfying. Looking forward to future updates!
I explained frames/layers to him and an hour later he was showing me the flying snake. I was absolutely shocked at the result. The animations and character design is all his own creations - parents had no input.
He has a link on his website to sign up for updates. He'll type up a note when the next version is out.
I defeated one of the monsters. I enjoyed the game and found the pixel animations of the characters quite charming. I never was able to use the almighty exploding star however. Did I need more mana?
You need to use the throwing star 4 times to get access to exploding stars. But using any of the other stars reduces your charge value. It's not clear right now, but that will be fixed in the next version.
Fantastic! I just beat the Fire Gollum, genuinely happy about that! I love the graphics, and as for suggestions for improvement, it would be cool if you could show the relative power of each move - I imagine the Exploding Star is a stronger attack? Let's see some stats :-)
I found it very satisfying when the opponent got a question wrong. Math is hard, even when you’re an awesome monster like a flying snake or black hole.
I didn’t understand the “charging” mechanic. A little more explanation or some visual that shows charging would help.
I cant tell what my charge level is. This is crazy though, congrats... Look at the blog to see how he did it mostly using ai. It looks like the dad set it up like a series of challenges to get the kid familiar w using ai then he was able to make a game. Nice work!
Kid's dad here. My goal was only to "teach him to code" .. the motivation to build a game was all his. He mixed something something he loves (fantasy worlds) with something that's useful (learning to code), so I think that helped with the motivation to keep going.
So so so so good. First one of these games where I was hooked and wanted to beat the villain. The added but achievable effort of math was awesome.
Sending this to my 10yr old nephew.
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.
Delightful! Goodness this brings back memories of making games in PowerPoint. Where there's a will and patience, there's a way. Anyway, I have hopefully actionable feedback!
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.
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.
Great game! I'm not sure what's happening when the opponent makes a move. Also not sure why i'm losing healthHP when I seemingly score points for getting a correct answer.
All my feedback has been covered by others, so just +1 on “this is awesome, he (and you) should be proud!” Looking forward to seeing his internship projects in a decade or so.
This is really cool! I had fun playing your game, thank you for sharing it with us!
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!
My 7 year old loves it! He likes the animations, how the creatures get the questions wrong sometimes, and the math questions. Questions were - why do we play a wizard guy (he wants to play as different characters), why does the scorpion drop a star, why are some of the moves not available / charged up yet
This is pretty impressive! I didn't expect math, so that was a nice surprise. Many others have pointed out some nice changes. I have a super nitpick - the enemy's HP immediately decrements before the "hit" animation plays out. There is properly delay before the Game Over screen, so that tells me the HP decrement could probably get the same treatment easily enough.
Kudos to your son and props for fostering this creativity in them!
This will be featured in my cross-discipline AI meeting this week. The blog article your son wrote was excellent - I will be pulling a few quotes.
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.
This is awesome. I love the graphics. Your son seems 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?
This is great work.
I started around the same age, though I only had BASIC or assembly language and neither was very suitable, to the extent I almost gave up on game development.
I didn't start building games with JS until 2-3 decades later, I really wish I'd had something like this back then.
A tip to those playing: You don't have to wait for the enemy to attack before you go again. You can spam your attacks. Combat pauses while you answer the question so take your time doing the math, but you want to select your next attack very quickly so you can do more attacks than your enemy.
I used to tutor P5js, that is Processing, to 13 year olds and got them to make games, got their github profiles made as well. Got them to post their games on it. It was a fun exercise.
That's amazing! My son is also 9 and while I haven't even attempted to teach him coding, he would probably enjoy playing this game more than writing one! My only comment is to join in with the rest of the comments here and say how wonderful it is to see this (genuinely fun!) game and to encourage him to do more!
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.
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. :)
As a programmer myself, even I'm uncertain if we'll still be fighting CSS in 10 years. Or what computer science will look like when its time for him to go to university
I don't know if it's just me (checked in Firefox and Chrome), but the black text on the red buttons is really hard to read. I'd suggest using white, unless you had some reason to use black.
This feels a lot like a reddit-style post, where someone says "This is my first ever time doing X and I need feedback. Please be gentle I am total newbie hehe :)", and they post something obviously done by or significantly influenced by an expert.
Out of curiosity, what courses, books, websites etc did you give to your son to learn JavaScript? I have a similarly aged child and I haven't found anything they like so far.
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.
Some kids learning to program at impossibly young ages.
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.
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.
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.
Had my 9 year old play it and he enjoyed it, though he did say that he didn't get why weapons were charging and when he could use them. Instructions or some indicator of availability would improve it, but overall it's good!
Nice :) I feel the HP should be removed during / after the animation rather than before it. Agree with the comment on having better hit when answering faster, that would be fun
We originally posted a link to the game on on reddit in r/programming, but they removed the post because it was an "app demo" and suggested a blog post instead. That got him motivated to write about the game (And I leveraged that motivation to help him learn how to communicate better - structure of a blog posts, etc)
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.
When I was 10 I released a HyperCard based app for the Macintosh that was a Virtual Journal program. Shareware. I got $2 checks from all around the world.
That was fun. Definitely on its way to becoming a MECC-style game and getting kids to crowd around the computer in the back of the classroom. Rocking vanilla JS, too, like a boss. Good on ya, kid.
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.
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
From his past experience with HTML/CSS, he can already make a page, has VSCode, knows how to use VSCode to commit & sync. The big thing this time was that he had to learn a lot of JS and had to get much more proficient with CSS.
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.
Kids dad here. When it was time to do images, I figured something like photoshop would be way too much for him. So I found a browser based sprite editor. The 32x32 grid simplified things and actually helped him.
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.
We had art lessons in primary school back in prehistoric times when I was that age (sixty years ago). Plenty of us could create more complex artwork than that.
That's great! My eldest is quite a few years away from understanding coding but I'm excited to take on such projects with him.
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.
You haven't made any of the mistakes that I see from professional web developers. (I'd critique the use of onclick, except you've found the one context where it's acceptable (even sensible!) to use onclick.) Using the Orca screen reader, the game is almost completely playable. Some feedback:
• 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.
> Using the Orca screen reader, the game is almost completely playable.
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.
I was skeptical when I read '9 year old made a game' since often you get some polished game that looks like the parents made 99% of it. This one I actually believe and I love it, because it reminds me of when I was that age. I also really like the educational aspect!
It is an amazing process being shown here. It shows how technology, especially AI, opens new ways of learning. Examining the process, it makes sense that he was able to create it. This showcases interplay between modern technology and pedagogy, while also focusing on an explorative learning process, which, in modern pedagogy, is highly valued.
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.
yeah, I think an improvement would be not using alert(). writing the question to a DOM element and then getting the response from an input field would be much more valuable experience for real world applications as web trends have moved away from the heavy use of alerts
The scorpion is not very good at math (lucky for me!) progress bar for my charge level (or change color of attack once it’s charged) would help and a more readable color scheme.
Hey nice job.
I think you should add a timer. The faster you answer the question, the greater the hit. It’s a nice challenge code-wise and adds a little stress to the game, as us dads can’t realistically subtract 19 from 56 in less than 4 seconds.
Enemy scaling system does not make sense. A black hole should have incomprehensionable hp. It broke my immersion; which, was a shame because I was really happy with nailing 3 math problems in row. 2nd does the enemy need to do math?? What the heck! Other than keep up the good work.
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.
We hit divide by zero in testing, so he guarded against that.
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!
Games are a series of interesting decisions. That’s one formulation. Being asked what x+y is with some graphics is not an interesting decision. Perhaps an interesting decision comes later, but I wasn’t interested and bounced.
One of the hard things to do when building a game is to figure out why it's fun. It's hard enough that, in general, most folks just remake another game that's already figured out the fun.
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.
Context is everything. If I turned that in as a serious project at work, tell me all the ways it was less than perfect. If a 9 year old brings it to show and tell, you explain how much you liked the cool parts.
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.
I would also encourage the kid as much as possible, but I'd be doing them a disservice if I didn't also take the opportunity to teach them about the basics of keeping flowers alive in transit.
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.
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! ;)
> 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 ^_^
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!
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)
thank you!
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.
thank you for your feedback!
Just a small comment, encourage your son (or do it yourself) to archive his site and code so he can revisit it years later. I did and it is amazing to learn again the code I did 25 years ago!
Good point! It is already in a repository, with every single tiny commit, including many mis-spelled commit messages :)
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.
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!
We need something at the end when we win (or lose). Like a picture of a cat at least :)
Haha, good idea :)
> 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.
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.
Ugh, this bug and the "Queston" typo completely broke the immersion. I can't fight my warp core properly in these conditions.
Edit: I think the "charge" is earned when the enemy move is completed, but the logic is buggy. Pretty fun first game nevertheless.
Perhaps a grey colour to indicate no charge and a coloured to indicated charged
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.
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!
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
> tiny dev
This has me dead. To the kiddo: great work, this is an amazing start.
both are things that are on his plan for the next version.
Appreciate the feedback!
Are you giving him the full experience? :D
"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.
haha :)
For this version, I stopped at "does it work? alright, move forward"
I love it! I was not expecting the math based aspect and that took me back to my younger days playing Math Blaster Plus and Number Muncher. Thank you for the trip down memory lane.
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!
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.
I've been writing JavaScript since I was about your son's age and am now one of the editors of the JavaScript specification. His code is much much better than mine was at his age!
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>.
Great tip. Thank you! :)
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.
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.
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.
As a programmer, I feel the 'fundamentals' are very important. Because, well, then there's no magic.
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!
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!
Given how I see him accelerated by Gemini, I think the next generation will have a huge productivity boost.
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.
Tynker has many games in the app. But they are basically the same type of game with different themes. Your kid will gravitate to whatever theme they like (princess, dragon, space, etc).
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.
Thanks. I just subscribed.
Thank you. This is a very helpful description. I think the same process might work for my son.
> 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.
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.
I absolutely love this game. It is has so much personality. I love the monsters names. They’re so cool.
For the next version, the monsters have introductory story lines. And he has a giant list of more monsters he wants to add -- we'll have to have a discussion about what's reasonable.
Appreciate your comment.
> 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.
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.
"Everyone dies one day. Everyone. Even wolves. But not books. Not words. Words don't die"
-- My son, 3.
"Everyone lies one day. Everyone. Even dads. But not on the internet. Not HN. HN won't lie"
– My granpa, 86
Pardon me, but I’m rather suspicious that your grandpa never really said this.
Quotes like this always seem smart until you realize you can just burn the books. And the words die like that
love it.
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
This is amazing Armaan, and I can't wait to see how it continues to grow! I'm so glad your parents encouraged you to do this.
if you're interested to get an email update when the next version comes out, he has a follow-my-journey link on the site.
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)
yikes! thanks for the bug report
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.
No jira?
for v1 (this version) the task list was just paper and pencil
for v2 he's organizing himself using trello :)
After 25 years of professional development experience my favorite task lists are still and will always be paper and pencil. ;-)
my daily list is still just paper. There's satisfaction in striking out finished items :)
For the sake of your child, please keep him away from any and all AGILE based workflows! Such devious contraptions were not meant for the pure of soul
In the spirit of Dijkstra's quote on teaching BASIC, learning "Agile" is damaging beyond recognition. :)
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 :) )
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.
Kids dad here.
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.
> keep our children away as much as we can from tech stuf
How do you define "tech stuff" and why do you want to keep children away from that?
I consider tech stuff quite everything related to the use of electronic devices: I.e. the use of a smartphone or a smartwatch or the use of a computer.
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
It shouldn't be your place to decide what hobbies your child should and shouldn't focus on.
I must not choose their hobbies, I even encouraged them on sports I dislike but they like.
But definitely i must decide for them if something is good or bad for their growth
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.
> 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.
Thank you so much. I just read this with him and he's all gunned up.
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!
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).
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 :)
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.
I was originally interested in Godot because it had a web export. I feel like building on the web helps with shareability (eg: this post!)
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! :)
I'm curious to know why you think Godot's web exports are too poor to be useful even to a 9 year old? I've published multiple HTML5 games on itch.io using Godot, including some with P2P multiplayer functionality. Apart from complete inoperability on Safari, I haven't run into many issues?
> 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.
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!
All good points. Clarity around charging and hits is on his plan.
Appreciate the detailed feedback!
It turns out you can just spam the buttons and it charges the moves.
It’s still impressive at 9 for both a game design loop and the coding. If this was v1 as described by the OP then I wouldn’t even judge as I know my mvps for actual paid for products have never been remotely bug free
thats a bug!
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,
… but when I transcribed that onto a computer (this was in a book) I accidentally wrote, … 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.)
Today, you could paste that into an LLM and it would immediately identify the issue.
The next generation of developers have so much power at their fingertips.
I was young at the time, but when I TA'd, the lesson I'd try to impart here is to take the time to learn the lexicon of the compiler error, and understand what it is trying to tell you. Then it's not just "code broke yo" but "is here is what is wrong."
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.
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
Thank you for sharing! I've saved it to watch with him
This is just insane. Congrats to your son.
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...
He talks about how he uses the AI in his blog post.
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)
This is incredible. Nice work kiddo!
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!
Charging status will be fixed for the next version.
He's also removing usage of prompt()/alert().
Appreciate the feedback
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"
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.
Kids dad here.
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 :)
Great game from a 9yo. Some random thoughts:
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.
Oh wow, great feedback here on game mechanics! I will go through this with my son, to see what inspires him :)
Thank you!
As a father of three kids, I can say this brought me to tears. I love the raw creativity and self-expression. What an absolute gem.
Thank you for the kind words!
I have no feedback that hasn't already been mentioned elsewhere. I just want to say that I love this. Your son is developing a passion for programming very similar to how I did so at his age. Seeing it happen as an adult is fascinating and brings back memories. Also, both your challenge tasks and instruction about resources (Google and AI) were spot on and seemed well heeded. Lots to be proud of here :)
Thank you for the kind words!
Hi, if you would make your font color white on th3 red buttons it would be easier to see
Curious how you did deployment. On the one hand, giving him his own live server on the net seems cool, but that's a bunch more technologies to learn in order to deploy. On the other hand, seems like it would take away from the independence of the project to be like, nice work, I'll put this on the net for you.
Kids dad here. He uses VSCode with built in git to sync a repo to github. It deploys to github pages automatically.
His whole website is just vanilla JS, HTML, CSS. There's no build step.
I've been doing something similar with my son. I set up a domain for him with an ssh key. He does his coding in a directory on a computer and has an "rsync ..." line which copies everything to his website. It's not fool proof but works so far. https://mskv.in/ is his site.
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.
Kids dad here! Interesting, never heard of processing/p5. Will check it out!
I would go with sth more simple and geared towards game dev
https://github.com/KilledByAPixel/LittleJS
is awesome and has many examples so you can start by editing them
Exploit or nod to people who dont want to wait to charge their weapons? function askThem(charge, TheDamage) { TheCharge = TheCharge + 1; // TheCharge is always incremented if (charge <= TheCharge) { [...] } else { window.alert("The move you want to use is not charged up yet.Click 'ok' and then select another move."); } }
I suspect he doesn’t want our feedback, but you do. Feedback from his age peer group would be more appropriate.
Hi if you could do the font in red blocks as white font it would b3 easier to see
Amazing. Younger people (and people new in any field) often think of intersting approaches without the blessing/curse of "best practices." The process for creating the game was very good and very logical way to learn a new field.
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!
Appreciate the feedback on the code style & variables. I raised this previously but perhaps external feedback will be what he needs to get him motivated to clean it up :)
Agree 100%. Since dad helped, I was expecting to see sprites sheets, or some JS classes for some OOP, etc. Was pleasantly surprised to see how "simple" the approach was for such fun output with a decent amount of variety.
He doesn't understand what a sprite is, or really the motivation behind sprite sheets. To him they're just animated images he made in a tool. Internally he switches the "costumes" of characters (terminology he got from Scratch I believe).
That's so great. So many software engineers (myself included) tend to overcomplicate things.
This is how cool new ideas arrive each generation
Your sons code is surprisingly readable.
I'm a little confused on how to charge up, but overall - super impressive.
He gets feedback from us from time to time when he writes really bad code. There are still many things that can be improved code wise, but I'm letting it slide to keep motivation up at the moment.
improving clarity of the charging aspect is on his roadmap for v2 :)
I loved playing the game, it was really fun, good job! Now if only I had a shield I could use against power warp core to fend off his attacks maybe I could beat him.
But would you do some more math to bring up your shield? :)
I just played the game on an iPhone in the DuckDuckGo webbrowser. Works awesome and i had fun! Thank you for making lunchtime a little more fun.
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.
I pushed him for responsiveness, because I told him that when I share his game with his friends (ie their parents), they will inevitably open it on their phone!
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!
You are most welcome. I both patiently and eagerly await his next game. :)
To all parents: https://www.zenpencils.com/comic/kevinsmith/
omg the comic is so awesome! :)
if you'd like an email when he releases his next version, his website has a follow journey link.
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
did you get this from the source? :)
Indeed!
Very nice! At first the buttons didn’t do anything and I thought it was not mobile friendly. I quickly realized I was in a browser with JS disabled.
Maybe add some error handling around that?
Good idea - I'll have him add this to his plan.
Awesome! It's nice to see how AI can be used for learning purposes. It changes from all the negative things we hear about it :) As personal feedback, I'd include an animation showing the attacks charging (or at least a notification once an attack is ready). Congrats!
I agree - AI has its place and can be useful. For coding, problems arise when people just copy/paste instead of using it as a learning tool.
Appreciate the feedback!
First, Congrats to both of you, mom and dad, for your parenting skills. About the game, 1 - It is fun to play! Awesome ideia to make it turn based attacks and math problems 2 - The artwork is fun! good jobs.
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)
great feedback. So far the hardness of the problem increases with stronger attacks -- today the implementation switches from addition to multiplication, but that could be improved to be more nuanced.
thanks for checking out the game!
That's hilariously evil turning it into a maths game.
Be fun to add some music to this.
v2 will have sound effects. I had conversation with him about copyrights and he's recording his own audio!
Very impressive! Hopefully you'll excuse this question but do you foresee AI in the future also taking over the handholding & guidance that you as parents provided to your son? (In other words: Will kids soon learn exclusively from AI?)
The human component here is to understand what the child is trying to do, what the available options are, and what level of guidance he needs to steer him towards the option that makes sense (ie easy enough for a simple game for a child, just a small step from what he already knows, etc).
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.
This is really neat. I'm happy that you're encouraging your son to program at such a young age. It really helps to build computer skills to immerse yourself from your early years. I started learning programming using QBasic on my computer at the age of 6. I now know several programming languages and am the go-to person in my friend group for computer help of all kinds. I wish your son the best on his adventures in learning programming.
What do kids learn these days as their first programming language?
Thank you! Appreciate your comments!
Brilliant idea! I am loving the way how a strike is solved.
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!
Appreciate your feedback!
Omg this is amazing And hilarious and he should keep making games. I love that it’s both a silly fantasy game and math. Well done.
thanks for checking out the game. Appreciate the feedback! :)
Great game. I'm very impressed that a 9 year old made this. A few suggestions:
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.
Some of these are already on his plan. We've talked about turning the game into a real-time game instead of a turn-based game, and he was excited about that direction.
Appreciate the feedback!
re: (1) I know what you mean, but the prompt component is a great way leverage browser UI for input without affecting the rendered website, so it makes good sense in this case.
Kids dad here.
alert() was MVP style guidance on my part. Least effort way to get a modal. Quick for him to learn and implement.
Awesome! Really liked the animations!! The charged stuff confused me a bit. I played on mobile so the popup is different from the desktop one, maybe a testing area.
Perhaps consider having the HP as HP bars, as other games do!
Well done
HP bars on his plan for the next version.
He was working on it the other actually!
Thanks for checking out the game. Appreciate the feedback!
I love it! I'm going to show this to my 6 yo tonight. I know for a fact she'll enjoy it.
Let me know her feedback :)
Your son (9 yrs old) made a better game than I would have. Both of you should be proud!
Making me do math on my lunch break? This is outrageous
lol
A great start! Congratulate them on keeping the scope small. That's important when starting out. Leaves room to build on later as they're learning.
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.
He's adding hitsplats in the next version. And plans to make charging more clear!
Thanks for checking out the game - Appreciate your feedback!
Also health is reduced before showing the attack, tricky one, I guess.
It's fun! The animations are great, too! I just wanted to add, somewhat related, that the Icelandic languages has the word "tölva" for "computer", a neologism comprised of the words for "number" and "prophetess", so if you will, the game's protagonist is a very literal computer.
haha that's interesting. I'll share this with him
Javascript, okay, I could do this project. But the amount of CSS and animations used are stunning, I would never finish such a project!
haha. He says he learned a LOT of CSS through this process.
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.
Very good! I love it! Hope he keeps programming. Tell him i played against a flying snake and won with every calculation right! :) I loved the animation. There is ofc always ways to improve this but I think this is a very good result!
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.
The attack animations are superb. I did not defeat the power warp core but I will. Seeing power warp core get the question wrong is satisfying. Looking forward to future updates!
I explained frames/layers to him and an hour later he was showing me the flying snake. I was absolutely shocked at the result. The animations and character design is all his own creations - parents had no input.
He has a link on his website to sign up for updates. He'll type up a note when the next version is out.
I defeated one of the monsters. I enjoyed the game and found the pixel animations of the characters quite charming. I never was able to use the almighty exploding star however. Did I need more mana?
You need to use the throwing star 4 times to get access to exploding stars. But using any of the other stars reduces your charge value. It's not clear right now, but that will be fixed in the next version.
Thanks for checking out the game!
This is pure awesomeness and reminds me of how I got started programming: making games! Love it :)
Fantastic! I just beat the Fire Gollum, genuinely happy about that! I love the graphics, and as for suggestions for improvement, it would be cool if you could show the relative power of each move - I imagine the Exploding Star is a stronger attack? Let's see some stats :-)
Yes exploding star is the strongest. Increasing clarity around the attacks (power, charge status, etc) is on his roadmap!
Thanks for checking out the game and for the feedback!
It's a fun little game :) I hope he keeps improving it and learns a lot from doing that. Happy to see kids start programming (and designing) early.
I found it very satisfying when the opponent got a question wrong. Math is hard, even when you’re an awesome monster like a flying snake or black hole.
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!
Appreciate the feedback!
I cant tell what my charge level is. This is crazy though, congrats... Look at the blog to see how he did it mostly using ai. It looks like the dad set it up like a series of challenges to get the kid familiar w using ai then he was able to make a game. Nice work!
Kid's dad here. My goal was only to "teach him to code" .. the motivation to build a game was all his. He mixed something something he loves (fantasy worlds) with something that's useful (learning to code), so I think that helped with the motivation to keep going.
So so so so good. First one of these games where I was hooked and wanted to beat the villain. The added but achievable effort of math was awesome. Sending this to my 10yr old nephew.
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."
Charging isn't clear. Somebody documented how it works: https://news.ycombinator.com/item?id=42312807
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.
Delightful! Goodness this brings back memories of making games in PowerPoint. Where there's a will and patience, there's a way. Anyway, I have hopefully actionable feedback!
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.
Appreciate the feedback, will share this with him!
Cool game, well done!
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.
I would recommend different colors. It’s a little difficulty to read the text. Super cool though! He should be very proud.
Fixing colors is on the plan!
Thanks for checking out the game and for your feedback!
Awesome Job! The animations on the characters are really great and do a lot to make the game feel more alive.
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.
Thanks for checking out the game and for the feedback!
You are an amazing dad. I hope more parents will follow your example and encourage the next generation to be resourceful, passionate and creative.
Thank you for the kind words!
Great game! I'm not sure what's happening when the opponent makes a move. Also not sure why i'm losing healthHP when I seemingly score points for getting a correct answer.
Its a turn based game, but turn order isn't enforced. So it gets confusing if you attack out of your turn.
Commendable! After school, homework, sports and music we barely have time for other activites.
And its in those few minutes that he codes a little. Its like 1-2 hours a week right now haha
All my feedback has been covered by others, so just +1 on “this is awesome, he (and you) should be proud!” Looking forward to seeing his internship projects in a decade or so.
This is really cool! I had fun playing your game, thank you for sharing it with us!
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!
Already on the plan for v2!
Appreciate the feedback!
Great gameplay. I love stuff like this where you are having fun with a game while learning or using some knowledge.
I would like to recommend something else than Gemini by the way, my experience was not good with it.
This is very cool. I’ll have to read his blog. My 9yo just picked up a book on coding from the library, I hope he gets interested as well.
My 7 year old loves it! He likes the animations, how the creatures get the questions wrong sometimes, and the math questions. Questions were - why do we play a wizard guy (he wants to play as different characters), why does the scorpion drop a star, why are some of the moves not available / charged up yet
You're a math wizard solving math! :)
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!
Because you are explicitly asking for feedback:
https://www.contrastrebellion.com/
Blue on red is hard to read.
Yes, we had a talk about contrast and also showed him WCAG guidelines. Next version will be much better
Cool website about accessibility that is unresponsive and doesn't work on mobile
This is pretty impressive! I didn't expect math, so that was a nice surprise. Many others have pointed out some nice changes. I have a super nitpick - the enemy's HP immediately decrements before the "hit" animation plays out. There is properly delay before the Game Over screen, so that tells me the HP decrement could probably get the same treatment easily enough.
Kudos to your son and props for fostering this creativity in them!
Fixing the nitpick (hit timing) is on his plan.
Appreciate the feedback!
This will be featured in my cross-discipline AI meeting this week. The blog article your son wrote was excellent - I will be pulling a few quotes.
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!
> This will be featured in my cross-discipline AI meeting this week. The blog article your son wrote was excellent - I will be pulling a few quotes.
That's awesome!!
This is awesome. I love the graphics. Your son seems 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?
Appreciate the feedback!
Very cool. One of the attacks was blocked due to insufficient charge. Has he considered a charging status indicator e.g., bar or countdown timer?
charging isn't clear here. He plans to fix this for the next version.
We've talked about using a visual indicator, perhaps greying out uncharged attacks.
Yeah that's cool. Will try it again once new version ready.
there's a newsletter link on his page. He'll type up a message to send when the next version is out!
This is great work. I started around the same age, though I only had BASIC or assembly language and neither was very suitable, to the extent I almost gave up on game development. I didn't start building games with JS until 2-3 decades later, I really wish I'd had something like this back then.
Interesting concept. Reminds me of final fantasy.
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!
Appreciate the feedback. Will share this my son!
I wish I had his level in JS (i'm 46)
tbh, modern vanilla JS isn't as bad as people make it out to be.
A tip to those playing: You don't have to wait for the enemy to attack before you go again. You can spam your attacks. Combat pauses while you answer the question so take your time doing the math, but you want to select your next attack very quickly so you can do more attacks than your enemy.
I used to tutor P5js, that is Processing, to 13 year olds and got them to make games, got their github profiles made as well. Got them to post their games on it. It was a fun exercise.
That's amazing! My son is also 9 and while I haven't even attempted to teach him coding, he would probably enjoy playing this game more than writing one! My only comment is to join in with the rest of the comments here and say how wonderful it is to see this (genuinely fun!) game and to encourage him to do more!
My son sees me working every day and has been very curious about what we do and how to do it. We've talked about how software is everywhere, etc.
Appreciate the love
This is so cool!
I wish there was a way to know when an attack was charged up, or maybe show its progress in charging.
Fun game. Just a couple of nits:
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 the feedback!
This is awesome, and the graphics remind me of my mspaint.exe graphics I used to load into Game Maker 4.0 in 2001 to make games as an 11 year old :)
It gave me a lifelong obsession with programming, and I'm still a principal engineer today
haha awesome :)
It starts with a small seed. Once planted, you realize you can do anything and that software is everywhere.
Great work, I bet you're a very proud parent!
Echoing the other comment - as a tired dad, I struggle with the Math questions :)
As a parent, I'm very proud.
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. :)
Maybe we're witnessing one of the last programmers before AI takes over ...
As a programmer myself, even I'm uncertain if we'll still be fighting CSS in 10 years. Or what computer science will look like when its time for him to go to university
1. Blue on red is not nice on the eyes, at all.
You've been heard!
Amazing, a game a product finished that also mix turn-based fight and questions!
Great son and great parenting. Congrats!!!
thanks for checking out the game!
I don't know if it's just me (checked in Firefox and Chrome), but the black text on the red buttons is really hard to read. I'd suggest using white, unless you had some reason to use black.
color contrast is something we've talked about and will be fixed for next version!
his young eyes arent bothered by crazy contrast :)
This feels a lot like a reddit-style post, where someone says "This is my first ever time doing X and I need feedback. Please be gentle I am total newbie hehe :)", and they post something obviously done by or significantly influenced by an expert.
Out of curiosity, what courses, books, websites etc did you give to your son to learn JavaScript? I have a similarly aged child and I haven't found anything they like so far.
The full story of his journey is here: https://news.ycombinator.com/item?id=42313045
Specifically for JS? I didn't give him anything material actually. I gave him a serious of small challenges starting with: "write a function that displays hello world on the screen" ... he already know HTML/CSS and he talked to Gemini to figure out the best way to use a function in HTML and it guided him towards JS. He give me a solution in a JS console, with a function that he executed.
Then I built on that with more challenges. He continued to work with Gemini. He talks about how he uses Gemini in his blog post, it's an interesting learning technique he found.
So mostly he's learning by doing. He's figuring out "how to do X" either using a hint from me or just by asking Gemini which gives him some guidance. Then he has to figure out how to apply the hint/samples to his actual game. His IDE has no LLM built-in, he uses the LLM from the browser.
The color contast on the buttons are really hard to read.
The enemy animation is cool. The one twirling the gun. And then firing the gun is really awesome.
Appreciate the feedback! And yes, contrast is something we've talked about here. Will be fixed in his next version
So it seems that kids are learning programming at a much younger age these days compared to millennials.
I wonder if/how that will improve life in the future
Some kids learning to program at impossibly young ages.
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.
Kids dad here.
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.
Kids dad here.
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.
His website is amazing. I love the backis stories!!
aaaah, so much scanning effort.
the kids at school had entire games they played around this backis world he made up.
Your kid is more talented than 90%of software engineers out there. Great work
Kids dad here.
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.
Had my 9 year old play it and he enjoyed it, though he did say that he didn't get why weapons were charging and when he could use them. Instructions or some indicator of availability would improve it, but overall it's good!
fixing the charge-confusion is on the plan.
Thanks for checking it out!
I absolutely loved it!
Gave me the old ZX Spectrum vibes when I first started, that adds to the charm.
More of this please!
The fact that your son wrote JavaScript with the correct stylization makes me happy. He is going to be a great engineer.
Great story, especially for a 9y! I love to know that one can rise to occasions given time and persistence and willingness to learn, at any age.
Thanks for sharing.
He should enter it into https://online.coolestprojects.org/ Very cool game
OH that looks cool. Never heard of this, but I'm going to check it out. Looks like he can apply for the online showcase for 2025.
Thanks!
Congrats Dad and son. I was going to say something about the blue text on red being hard to read. But you know what? Keep it. Live the vibe.
Thank you!
It's very good and I like that you have to do math to attack.
Nice :) I feel the HP should be removed during / after the animation rather than before it. Agree with the comment on having better hit when answering faster, that would be fun
Appreciate the feedback!
I can't belive it, graphic is too good for 9yo very nice!
I found that damage to either my character or the opponent occurs before what looks like the damage animation (red fill) occurs.
This is neat, thank you for sharing!
This is fantastic; your son did a great job! I’m always excited to see young people take on challenging projects!
thanks for checking it out :)
Game is super fun! Graphics are awesome. I can't tell when the moves aren't charged up yet.
Okay... but.. A blog and a newsletter form? What could your 9 year old probably want to message me about? That's honestly a bit much.
We originally posted a link to the game on on reddit in r/programming, but they removed the post because it was an "app demo" and suggested a blog post instead. That got him motivated to write about the game (And I leveraged that motivation to help him learn how to communicate better - structure of a blog posts, etc)
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.
Your kid is awesome and this is so good for nine years old.
Great strongbad vibes for some reason. I loved it!
Looks amazing! Would love to know when the weapon is charged and how much each shot takes.
Btw, this game reminds me of BBS door games. Great stuff.
Appreciate the feedback!
Great graphics! I couldn't tell when weapons were charged.
Wow your son is good at projects and I am bad at mental arithmetic.
So you want your kid to triage some bugs? LOL Contrast. Use white text on dark colored buttons & controls
Kids dad here. You've been heard! :)
This scorpion is tough! Luckily I'm slightly better at arithmetic than it is. Benefit of being a wizard.
Wizard uses mental arithmetic: it's super effective!
I defeated the Power Warp Core and feel genuinely proud of myself. Great job! Love the animations too.
appreciate the feedback!
Great stuff. Really liked the interface.
Unreal. Thanks for helping me retrain my mental arithmetic
Very impressive congrats!
I also made a math question game (using QBasic) at a young age.
I had a most excellent fight with a black hole, in which I managed to emerge victorious.
Nice art!
10/10, would play again
Awesome! Thanks for checking it out!
Nice work! I would suggest changing the blue font color so attacks are more easily readable
I've had a talk with him about color balance and contrast levels. Improving colors is on his plan for the next version.
Appreciate the feedback
The indicator of what is charged and what is not are not reliably updating.
When I was 10 I released a HyperCard based app for the Macintosh that was a Virtual Journal program. Shareware. I got $2 checks from all around the world.
That was fun. Definitely on its way to becoming a MECC-style game and getting kids to crowd around the computer in the back of the classroom. Rocking vanilla JS, too, like a boss. Good on ya, kid.
This is awesome. Good job
Well done. I like it. Could use an indicator showing an attack is available.
Appreciate the feedback!
It is Perfect. Only comment is to have the text box selected when it pops up.
how did this garbage wind up here?
Like it! Keep on developing :)
I love this, I just love it! Thank you!
It feels wrong to not animate the hp bar. Also the number drops too soon. It shouldn't go down until the animation hits
Animating the HP bar is on his plan for the next version!
Fun! Give your guy a high five from Boston!
I completely agree that you can start using javascript directly without writing the so-called "children's programming language"
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/
Pretty cool!
Great work! It is fun :)
My old eyes can’t read the text on that color.
His young eyes don't understand the problem. But it will be fixed for v2 ;)
We had a talk about color contrast and WCAG
Love the graphics!
Curiosity as to why you use gemini instead of ChatGPT or Claude?
Great question!!
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.
ah, the nostalgia! my visual basic stuff was much less fun than this!
feedback: Congrats on shipping! Many professional developers can't claim the same :)
Kids dad here.
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
Khm, people will not like it, but maybe he should play outside, not code with 9 years?
This is awesome, keep going!
Great job, lots of fun. Artwork is very sweet.
Neat! Amazing work young man!
This is amazing. You should be super proud!!
Nicely done. How much did dad/mom help?
From his past experience with HTML/CSS, he can already make a page, has VSCode, knows how to use VSCode to commit & sync. The big thing this time was that he had to learn a lot of JS and had to get much more proficient with CSS.
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.
My guess would be quite a lot, since the artwork is not something a child would make despite it looking like its made for children.
Kids dad here. When it was time to do images, I figured something like photoshop would be way too much for him. So I found a browser based sprite editor. The 32x32 grid simplified things and actually helped him.
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.
You'd be surprised what kids are capable of. An 8 year old could easily create pixel art like this with the right tools.
We had art lessons in primary school back in prehistoric times when I was that age (sixty years ago). Plenty of us could create more complex artwork than that.
On paper, his art skills are quite underwhelming compared to what I've seen other kids do. So yes, totally agree with you.
Also 32x32 limited reduces complexity a lot when trying to make a visual.
I learned how to use Autodesk animator on DOS when I was 7 years old. Then again, I have been a geek all my life.
Fun game! Good job Armaan!
get outta here!
Bro you're still trolling people lol
Its awesome I love the mechanics.
That's great! My eldest is quite a few years away from understanding coding but I'm excited to take on such projects with him.
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.
Appreciate the feedback! Fixing clarity around charging is on his plan for the next version.
But pacing isn't something we've talked about much. I'll raise this with him.
Appreciate the feedback!
Seems very inspired by another game, Prodigy...
Yes, he was playing Prodigy in the months before he started making this game.
I suspect future versions will bring in mechanics from Minecraft and/or Factorio - things he's playing more these days.
Cool stuff.
You haven't made any of the mistakes that I see from professional web developers. (I'd critique the use of onclick, except you've found the one context where it's acceptable (even sensible!) to use onclick.) Using the Orca screen reader, the game is almost completely playable. Some feedback:
• 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.
> Using the Orca screen reader, the game is almost completely playable.
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.
You might find WAI's resources useful: https://www.w3.org/WAI/people-use-web/
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....
I was skeptical when I read '9 year old made a game' since often you get some polished game that looks like the parents made 99% of it. This one I actually believe and I love it, because it reminds me of when I was that age. I also really like the educational aspect!
It is an amazing process being shown here. It shows how technology, especially AI, opens new ways of learning. Examining the process, it makes sense that he was able to create it. This showcases interplay between modern technology and pedagogy, while also focusing on an explorative learning process, which, in modern pedagogy, is highly valued.
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.
Very sweet!
I want to charge up
Could have a virtual numpad
yeah, I think an improvement would be not using alert(). writing the question to a DOM element and then getting the response from an input field would be much more valuable experience for real world applications as web trends have moved away from the heavy use of alerts
this on his plan for the next version! Appreciate the feedback.
Wow, this is wildly refreshing. Definitely more interesting and fun than any crud bullshit I do every day.
Background tune needed!
in the next version for sure :)
Excellent - keep rocking!
Love it!
Keeping coding!
I really love Spider animation.
I really liked the math problems, Little bit of edutainment
So fun!
That is awesome. Keep up the good work little buddy. Love the retro feel of the wizard. :)
get him real living feedback, mot words
I love it
Amazing!
> you win refresh to go again
This win page is perfect. Please never change it.
Great game
this is really, really cool.
The scorpion is not very good at math (lucky for me!) progress bar for my charge level (or change color of attack once it’s charged) would help and a more readable color scheme.
Keep it up! Just don’t add micro-transactions :P
Hey nice job. I think you should add a timer. The faster you answer the question, the greater the hit. It’s a nice challenge code-wise and adds a little stress to the game, as us dads can’t realistically subtract 19 from 56 in less than 4 seconds.
Great idea! Appreciate the feedback.
Enemy scaling system does not make sense. A black hole should have incomprehensionable hp. It broke my immersion; which, was a shame because I was really happy with nailing 3 math problems in row. 2nd does the enemy need to do math?? What the heck! Other than keep up the good work.
Appreciate the feedback!
this is brilliant.
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.
We hit divide by zero in testing, so he guarded against that.
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!
Games are a series of interesting decisions. That’s one formulation. Being asked what x+y is with some graphics is not an interesting decision. Perhaps an interesting decision comes later, but I wasn’t interested and bounced.
A child can build a game that would be interesting to other children. If it's also interesting to an adult, that's a bonus, if anything.
That said - thanks for checking it out :)
One of the hard things to do when building a game is to figure out why it's fun. It's hard enough that, in general, most folks just remake another game that's already figured out the fun.
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.
Assumption: wanted feedback, saying kid was not saying shibboleth.
Context is everything. If I turned that in as a serious project at work, tell me all the ways it was less than perfect. If a 9 year old brings it to show and tell, you explain how much you liked the cool parts.
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.
I would also encourage the kid as much as possible, but I'd be doing them a disservice if I didn't also take the opportunity to teach them about the basics of keeping flowers alive in transit.