WingNews logo WingNews GitHub [2]
top | item 18866500

Show HN: I taught my little brother JS, and he made this videogame in a week

1079 points| lovasoa | 7 years ago |s-poony.github.io

270 comments

order
[+] juretriglav|7 years ago|reply
Hasn’t been mentioned before: try this on a phone. It uses the gyroscope for control and it quickly becomes second nature to balance/guide the square around the screen. Also a very nice and rewarding discovery process, as it starts out with squares speeding by, until you realize it’s the tilt of your phone that is causing it. Congrats, super fun!
[+] crystalmace|7 years ago|reply
Or your Macbook Pro if it originally came with an HDD. Apparently the device orientation API can utilize the triaxial accelerometer that Apple used for drop detection. Really neat experience tilting my laptop around like a mad man.
[+] colordrops|7 years ago|reply
Kind of disturbing that Chrome just provides gyroscope data without any notification to the user.
[+] nkrisc|7 years ago|reply
Oh that's funny. I thought the block was always supposed to be falling because of the angle I hold my phone at.
[+] anonytrary|7 years ago|reply
Good call. I'm impressed they implemented it that way. It's hard at first, but once I got used to the sensitivity, I found the mobile version of this game a lot easier to use than the desktop one.
[+] beatgammit|7 years ago|reply
Yeah, that was super cool. I'm a little annoyed that you can't lose (red block goes away under 10 points), but it was way more fun on my phone.

In fact, I didn't realize that the gyro worked in both dimensions! I thought it was just a fast downward fall and it was actually hard to hit the red block since it kept moving. Then I found out you could lay the phone flat and slow the green block down and it was way more fun!

I like the concept and could see a more complete game making a ton of sense.

[+] dom96|7 years ago|reply
Indeed. Very cool concept.

I think it needs some sort of prompt about the tilting. Also the mechanism might need some calibration, I tested it with my SO and the tilting was too sensitive for her to control it accurately.

[+] alphakappa|7 years ago|reply
Nitpick: It's not just the gyroscope. DeviceOrientation (at least on the iPhone) uses blends both the accelerometer and gyroscope (and if specified, the compass too)
[+] komali2|7 years ago|reply
Wooooah, that's why it was speeding around without any input from me! My laptop has a gyro in it as well that I forgot about!
[+] andyidsinga|7 years ago|reply
holy crap - works on my hp spectre 360 too! - i'm doubly impressed.
[+] daliusd|7 years ago|reply
Note: mobile Chrome but not Firefox.
[+] ronilan|7 years ago|reply
Indeed.

This is awosome on mobile!

[+] quadcore|7 years ago|reply
Look at the code guys [1]. I love it. This is simple. There is not a single line of bullshit. I hope he gonna become a great programmer and continue to make beautiful code like that.

[1] https://github.com/S-poony/Ultra-Square-Catcher-USC-/blob/ma...

[+] userbinator|7 years ago|reply
Agreed. There are so many JS projects these days composed of a dozen abstraction layers and barely-used libraries all mixed together and spread out across multiple files with an insanely complex "build system" on top, that it's very refreshing to see simple, self-contained JS.
[+] apo|7 years ago|reply
Really well done and I like the brevity. Here are some ideas for revising the code:

1. There are two functions called "distance" and they're identical. Only the outermost appears to be needed.

2. As written, the game places variable and function names into the global scope. It doesn't matter for this game, but will be a problem for larger games. One idea would be to use the Immediately Invoked Function Expression (IIFE) pattern [1]. Another would be to take advantage of ES6 modules[2] (<script type="module">) to limit variable scope.

[1] https://developer.mozilla.org/en-US/docs/Glossary/IIFE

[2] https://www.contentful.com/blog/2017/04/04/es6-modules-suppo...

[+] sbov|7 years ago|reply
But what if he wanted to turn it into a AAA FPS game with RTS elements in a persistent online world that supports millions of simultaneous users?
[+] finaliteration|7 years ago|reply
My only complaint is the global scope pollution with the top-level variables and lack of ‘var’ for those. But other than that, I agree.
[+] jeena|7 years ago|reply
> There is not a single line of bullshit.

Don't want to be the killjoy here but isn't line 77-79 the same as 85-87? With the rest I can agree.

[+] 11235813213455|7 years ago|reply
The mix between French and English variable names or comments is a bit irritating, even for as a French guy
[+] HighSaysBob|7 years ago|reply
From the source, Shift = Brake
[+] natecavanaugh|7 years ago|reply
As far as logic goes, I totally agree, but personal preference nit pick, from a code writer and reader perspective, I think all subproperty access (`hero.acceleration.x`) could be cached to a variable, or just operate on plain variables and assign property access after mutations and only manipulate objects as needed. It makes the code easier to write and read, IMHO, and I believe older engines had infinitesimal changes in performance with updating objects, so it's more of a habit and code clarity thing for me. Of course, that's far less important than the fact that the logic is clear and concise, especially after learning JS in a week :)
[+] Satsana|7 years ago|reply
Sure, with a duplicate distance function and one 100-line function? For me that in itself is horrible lol. But as a new programmer he should still be commended but bro, give credit only to where its due. And here its the fact that he's new, not that the code is "beautiful". (You're making me doubt what you think of beautiful code, but i guess since he's your brother you're definitely biased.)
[+] carlosdp|7 years ago|reply
This is... really impressive actually. Such a simple mechanic, but well executed. I like how the red block concept is introduced to you after the first few points are scored. The details of the implementation are really impressive for a first project, or even for a game project in general tbh.
[+] greenpizza13|7 years ago|reply
Anyone noticed that you can click the game board to go full screen. This kid is doing more with less than many developers do with years of training. I think he's got a career in programming ahead.
[+] dwild|7 years ago|reply
Actually based on the commit message, that's from the big brother.

That's not actually the impressive part of the code though so it remove nothing from him.

[+] goldcd|7 years ago|reply
That it? Presume I use the arrow keys OK, I pick up the other blocks.. Oh, I do like the inertia and the smaller points give me more points wakes up screaming at 3am as the red terminator block endlessly hunts me down
[+] all2|7 years ago|reply
I found as the speed to the red block increased that sticking to the edge of the screen worked quite well to lure the red block away from where I wanted to be.
[+] jpeanuts|7 years ago|reply
The red block reminds me of the monster in the film "It Follows". It very slowly but relentlessly heads straight for you wherever you are. Surprisingly unnerving.
[+] bduerst|7 years ago|reply
Just hangout in the corner and cheese the red block AI like in the game.
[+] bbno4|7 years ago|reply
Wow... Thought I was going to play for 10 maybe 15 seconds... I've never played a game for that long... This is seriously good. If you released this game without "little brother" I would think this was one of those amazing minimalist games. Thank you so much for making this!!
[+] aerovistae|7 years ago|reply
I don't understand, am I missing something? You just pick up blue and teal blocks while a red block slowly chases you? Why are people so excited about this? I feel like I'm missing something.
[+] GuB-42|7 years ago|reply
Nicely executed game.

But looking at the source, the weird part is that it is half English, half French. It definitely doesn't look like the work of a single person.

I also looked at the commit history and I liked the teaching comments.

Clearly, there is a story behind that code. I suspect you did the first part together (moving square, ...) and that your brother played with it by himself later, adding the enemy, etc...

[+] dosshell|7 years ago|reply
My code when i was kid was half english and half swedish, heck even today when i write simple "run once"-code they often have some swedish named variable.

Funny story from ~2005, a company developed a jvm for a special cpu and was aquired by a bigger company. After the aquasition 2 developers had to search the code base for two weeks after swedish swear words, they replaced them with the word of dandelion in swedish ("maskros").

What I want to say is that it is very common to mix english and ones native language.

[+] sandov|7 years ago|reply
When I don't care about who's going to see it, my comments can be half Spanish and half English.
[+] baalimago|7 years ago|reply
In "taught" did you mean "write 80% of the code"? This follows coding conventions far too much for me to believe it's written by an complete beginner.

To me it smells like karmafarming. How is everyone buying this? Where's your reasonable doubt?

[+] sonofgod|7 years ago|reply
... that is seriously fun.

The red block turning up later was AMAZING.

[+] omni|7 years ago|reply
I love that the red block doesn't understand the concept of wrapping. It reminds me of playing with my dog.
[+] icholy|7 years ago|reply
Cool game, but am I the only one who's a little skeptical about the title?
[+] kelvin0|7 years ago|reply
Simple, yet addictive. Great work!

Watch out for the red block ... took me some time to realize it's a 'bad' block which subtracts from your score when touched.

[+] automathematics|7 years ago|reply
As someone who founded a company based on javascript game development, looks like I'll be hiring your little brother within a few years :)
[+] phkahler|7 years ago|reply
Nice game, shortly after I started it dawned on me... Because it allows wrap-around you can just hold down the up arrow key and it becomes more of a 1-D game and seemed easier to play. Then the red thing showed up and started getting in the way and I found it easier to use all the arrows again.
[+] rcarmo|7 years ago|reply
This thing is deceptively subtle and fiendishly addictive. Well done!
[+] cowpewter|7 years ago|reply
Very nice. I had fun with it. Maybe a little description of the goals on the page underneath the play area would be good? Took me a while to realize picking up the red squares was actually reducing my score. I initially thought they were just meant to be more challenging to pick up since they moved.
[+] nsxwolf|7 years ago|reply
Finally, one of these stories that didn't make me feel like an utterly talentless moron. This feels like what someone might be able to learn how to do in a week, but so often it seems like what you see here are 10 year olds writing real time ray tracing engines that use deep learning for some reason, and have source code that just happens to be a radiation hardened quine.