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

Indeed.

This is awosome on mobile!

Oh that's funny. I thought the block was always supposed to be falling because of the angle I hold my phone at.

The APIs powering this are in the process of being heavily restricted or removed altogether -- if you think games like this should exist, you should voice your concern here: https://github.com/w3c/deviceorientation/issues/57.

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.

Note: mobile Chrome but not Firefox.

Kind of disturbing that Chrome just provides gyroscope data without any notification to the user.

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.

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.

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!

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.

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)

holy crap - works on my hp spectre 360 too! - i'm doubly impressed.

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

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.

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

The mix between French and English variable names or comments is a bit irritating, even for as a French guy

From the source, Shift = Brake

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.

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?

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

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

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.

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.

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.

Just hangout in the corner and cheese the red block AI like in the game.

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.

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.

When I don't care about who's going to see it, my comments can be half Spanish and half English.

I don't believe either.

Your game is faster paced, I like it. One issue I noticed is that the red blocks can spawn right in front of your block, making it nearly impossible to avoid. Rage quit inevitable.

don't forget the tasty light blue boxes

I was actually going to ask what the rationale behind this was. I found that because of this, the best strategy was usually to wrap around to distract the block. I personally felt like the game would have worked better without that, although hard to know without trying it.

exactly i call bs

I thought it was a really clever way to "teach" you about the game without having an actual tutorial (which I personally always hate).

I especially like how it lets you build up enough of a score before introducing the red block so that if you hit it a few times you are still in the game and the only setback was some time!

I think with some additional effects on the score (like some red flashing and showing it remove the score) when hitting a red one and it would be a lot easier to understand very quickly that it's bad.

It's red and it's chasing you! Was pretty clear it was bad to me :)

His little brother could be a 40-year-old for all we know!

He hasn't learned about arrays yet : every element of the game is its own global variable. But this is something I would love to implement with him !

I actually thought there was something really enjoyable about not have it super obvious and shoving pointers and instructions at you.

It felt fun to explore and learn what it is

It seems his little brother understands how to properly scope a project while learning, and seems to have a decent handle on game mechanics design.

I'm super impressed, despite (and because of?) how simple it looks.

FYI the code is visible with "view source."

How old is your brother? Has he programmed before? The code doesn't look like what someone with no programming experience could do in a week (unless perhaps working from a similar example as a starting point).

This one could easily be an entry to js1k: https://js1k.com/

Admit it - you were tilting your monitor!

I... definitely did not just watch this play itself for like five straight minutes...

I think I need to get more fresh air or something.

I did the same, but played around a bit more and made an "AI" mode:

  maxScore = 0;
  setInterval( function() {
  	if (score > maxScore) {
  		maxScore = score;
  	}
  	if (distance(hero.y, hero.x, ennemi.y, ennemi.x) < (vitesseEnnemi * 15 + 30)) {
  		hero.y += (hero.y - ennemi.y) * speedLimit / distance(hero.y, hero.x, ennemi.y, ennemi.x);
  		hero.x += (hero.x - ennemi.x) * speedLimit / distance(hero.y, hero.x, ennemi.y, ennemi.x);
  	}
  	if (spawn > PowerUpspawnRate) {
  		hero.y += (powerUp.y - hero.y) * speedLimit / distance(hero.y, hero.x, powerUp.y, powerUp.x);
  		hero.x += (powerUp.x - hero.x) * speedLimit/ distance(hero.y, hero.x, powerUp.y, powerUp.x);
  	} else {
  		hero.y += (reward.y - hero.y) * speedLimit / distance(hero.y, hero.x, reward.y, reward.x);
  		hero.x += (reward.x - hero.x) * speedLimit/ distance(hero.y, hero.x, reward.y, reward.x);
  	}
  }, 25);

It's oddly fun to watch the little green guy pull off some sick dekes.

If you want your green guy to flat-out avoid the enemy, just wrap the second set of conditions there in an else block.

edit: Formatting for readability/copy+paste

Of course I can. My brother is 15, he is smart and he had programmed before, but only on his calculator (in TI-BASIC, I think). He already knew the basics of programming. He got his first real computer for Christmas. I was with him at my parents house, behind his shoulder as we created the skeleton of the game together over a weekend. After that I left, and he kept adding features on his own.

It already uses the gyroscope in mobile!

we are from France :)

Il est en première. Do not underestimate the french education system ;) What you need for such a game are Pythagorean and Thales's theorems. I gave him hints so that he poses the problem correctly, but he came up with the formula for moving the red square on his own!

I think I got to around 65 points before the red square began catching up to me and taking away my points.

It's definitly a fun little game, I love the simplicity of the code with regards to dependencies. If you look through the code, you can also find that the shift key acts as a brake, definitly not something that is very discoverable.

I wish there were more ways to control the green square, the arrows keys on my touch bar macbook pro are pretty bad and my hand began to cramp a little bit.

I got up to about 100. Stick to the edges of the screen, and tap the arrow keys for finer grained movement.

I used the console to set my score to 20000, and at that point the red block blinks and its movement behavior stops working correctly.

Got to 230 by constantly going in circle

Nice

Managed to get over 120. Because the red terminator can't cross the edges, but you can, the key is to use the edges as much as possible and to avoid going through the center unless you are lined up to get the food.

Source code: https://github.com/S-poony/Ultra-Square-Catcher-USC-

It’s canvas based. Interesting choice as a starting point of a learning path.

on chrome: right click -> View page source

Maybe because he is not on hackernews? I told him I did this post, and he reads your comments, though.

He is 15. I should have written younger brother and not little brother; english is not my native language.

The elegant game design is easily the most impressive part of this.

Works for me on the Fox. Though I'm probably not on the absolute latest.

It should work on firefox :( Did you click on the page before using the arrow keys ? Do you have JS errors in the console ?

Worked fine for me on Firefox Quantum 64.0 on Windows 10.

Worked for my FFs, both desktop Linux and Mobile Android.

FWIW it works for me on Firefox for Android.