284 comments

[ 4.3 ms ] story [ 262 ms ] thread
Wow this actually kinda fun. Tell your bro props.
This is really nice, simple and fun game. Absolutely a great first project. I love how the physics feel.
Super fun, your little brother did a great job!

Only criticism I would say is to add some directions if possible, even though for most people it's common sense it took me a little while to figure out I needed to use my keyboard :P.

Admit it - you were tilting your monitor!
I played so long, I forgot I was at work.
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.
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 might be nice to have something like:

Move arrow keys or tilt your phone. When I pulled this is on my phone, I thought it wasn't working until I saw that someone mentioned that tilting it worked.

Impressive, I wanted to make an RPG type of engine in Processing[0] and did similar, just made blocks that could move around based on keyboard input. Didn't continue on with it though.

[0]: https://processing.org/

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.
That's cool, also similar idea to a game I made some time ago for a lisp game jam

https://orbaruk.github.io/

https://github.com/OrBaruk/squares-lgj

(comment deleted)
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.
> One issue I noticed is that the red blocks can spawn right in front of your block, making it nearly impossible to avoid.

...I'm having a strange amount of trouble describing what I'm doing, but there's a strategy to avoid this that I got the hang of after a few rounds. Basically, you can't move too fast at the moment you're collecting the green squares.

Yea, that was an issue that I skipped over and never got around implementing a fair enemy spawn
So fun. I like the AI logic, if he wants a fun addition he should add more enemies as the score increases and implement something like the pac-man ghost logic so that they all behave differently: http://gameinternals.com/post/2072558330/understanding-pac-m...
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 !
For a reasonable number of enemies-- e.g., Pinky, Inky, Blinky, Dot-- global variables should scale just fine.

Maybe learn arrays if he wants to enter the realm of Robotron enemy count... :)

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

My little brother is 15. He had programmed before, but only on his graphic display calculator.
Right click and view source is probably the best thing about the web. You can learn so much. The source code for this game is simple and straight forward. I find it hard to come up with any critique - it looks like it's written by a pro! I like that he use objects instead of "classes". The game should adopt to window resize and aspect ratio.
(comment deleted)
(comment deleted)
(comment deleted)
Nice work. Hope he keeps it up!
Fun! Wonder how high people will go. 69 points.
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
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.
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!
Indeed.

This is awosome on mobile!

Haha, took me a while to figure out that it doesn’t handle different screen rotations but once I did it’s quite neat how intuitive it is.
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.
It looks to me that they’re just adding a permission for gyro access instead of turning it off altogether. Did I misread it?
That comment does not say the APIs are in the process of being removed.

And asking people to comment on the issue to say that they shouldn't be removed would not be helping the discussion, because that point has already been made in the thread by at least three people that I count.

Since it's GitHub, just add a thumbs up or whatever to the comment in question, don't just add me too comments. That's the way I've seen voting work best in GitHub.
If the app doesn't want to ask permission before gathering my data, they can pound sand.
It seems to me that gyroscope data is merely input, rather than personal data. In other words, I'm not sure asking permission before accessing gyroscope data makes any more sense than asking permission before accepting touch screen input. Or for desktop applications, asking permission before accepting keyboard/mouse input.
Collecting gyroscope data is quite passive, though. It's easy to forget that an app/website has access to this.
And it's also more concerning from a privacy perspective since it's the position of something outside of the app (the phone) instead of inside of the app. Mouse coordinates work this way (only get cursor updates within your browser tab content area), so it makes sense to require permission from the user before accessing it.
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.
Worked just fine on Android Firefox.
Not sure what you mean, but it works for me on ff/android. Nice game, well executed!
Worked excellent in brave mobile as well. Actually fairly addictive
Kind of disturbing that Chrome just provides gyroscope data without any notification to the user.
What would one feasibly do with this data? I guess an app could tell if someone is holding their phone in their had, and maybe put together a pedometer bases on gyroscope input. Maybe a concern if a app has access to gyro input over a period of days.

But as long as it's only for actively open apps and web pages I don't really see much harm.

The gyroscope is a datapoint that can be used for fingerprinting. Plus it gives quite a bit of information about you: whether you are lying down, sitting, walking, etc.
doesn't this assume the user is walking around with the page open, the front tab, and the phone unlocked for a reasonably long period? which websites do I spend enough time on for that to be true? I don't generally walk and read
Browsers now have service workers that run in the background even when the browser UI isn't loaded.
> I don't generally walk and read

That's how I spend 10-ish% of my time on Hacker News

With sufficiently high-frequency gyroscope data, it is possible to infer what a user types in with moderate precision. In some cases, it has even been shown to be possible to recover coarse audio data from the surrounding environment.

https://bugs.chromium.org/p/chromium/issues/detail?id=421691

Browsers have added rate limiting to mitigate this threat. (Prior to that, my former team in Google Ads added our own rate limiting to the gyroscope API we provided for ads.) The risk now seems pretty minor, but I wouldn't be shocked if someone clever still managed to find some way to abuse it.

> gyroscope API we provided for ads

Whaaaa?

Yeaaaaah. Our clients thought it was super-cool to add distracting battery-destroying parallax effects to their mobile ads. :|
What business model do you think Google has?
Facebook has a patent for using gyroscope data in conjunction with location to know who you are facing with other people around to enhance friend suggestions.

You can also determine things like health and other physical characteristics, similar to gait detection.

...wait, how do you get orientation relative to things around you (rather than just your own previous orientation and gravity) from just gyro/accelerometer data + location?

If you do have some source of absolute orientation, like a compass, surely you just use that and don't need the gyro.

That's a good question. I suppose it may be possible to use GPS data to estimate the phone's absolute heading.

I just took a quick look at https://developer.mozilla.org/en-US/docs/Web/API/Detecting_d..., and it seems to provide orientation, and not angular velocities. So it could also be that browser implementations fuse magnetometer and inertial sensors to produce the orientation estimate. Is there another gyro API?

(comment deleted)
Maybe the compass gives you noisy absolute information which is ok, but combined with accurate relative information from the gyroscope and accelerometer is better?
How is this disturbing at all? Do you get disturbed that websites know your mouse pointer location?
If the mouse cursor is outside the browser window, sure. Gyroscope data is relatively personal and not easy to modify, so it serves as a much better tracking tool than the mouse cursor.
My thought exactly. Totally surprised me. I thought the only inputs a web site could get from me from hardware without asking permission is key presses and cursor movement.
FWIW, Safari on iOS didn't ask me either. I'm actually kind of disappointed.
It worked just fine for me.
GP meant that Safari doesn’t ask for permission to use the accelerometer. In that sense, it can’t have worked just fine for you since Safari doesn’t have that as a privacy option.
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.
That's…quite surprising. It's a cool feature, but I'm afraid that it's just another surface that can will be used for browser fingerprinting.
Surely it asks explicitly for permission to use the sensor?
Mobile safari on an iPhone XR just worked.
Do MacBooks that shipped with an SSD not have the accelerometer?
My 2012 Macbook Air had an accelerometer and of course shipped with an SSD. No idea if it's in the newer Airs, or why it's there.
My MacBook with an SSD (12", 2017) does not have an accelerometer as far as either my web browser or `pmset -g` can tell.
My understanding was that the accelerometer was there to stop the drive in case of a fall. You wouldn't need that with an SSD, though perhaps if it still had an optical drive?

EDIT: I should add that both the HDD Macs I owned (a 2009 Macbook Pro and a 2004 or 03 Macbook) had accelerometers and I found a cool app for oldest that made a lightsaber noise. This was pre smartphones, so it was novel. My Late 2013 Macbook Pro does not seem to have one.

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.
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
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.
(comment deleted)
Just hangout in the corner and cheese the red block AI like in the game.
This is a really fun game! I love how fast the player moves, it reminds me of my max sensitivity trackpad and mouse :)
I really enjoyed the "feel" of the movement!
Cool game! Congrats to your brother.

Doesn't work on current Firefox.

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.
Linux (Debian derived Bunsen) Firefox Nightly: worked
Worked for my FFs, both desktop Linux and Mobile Android.
FWIW it works for me on Firefox for Android.
so cool!

maybe dumb question - where's the link to the source code? adding that to the actual page would be great.

on chrome: right click -> View page source
Why is this so enjoyable
The elegant game design is easily the most impressive part of this.
Seriously. This is like when 2048 was posted on HN.
Didn't expect something significant when I opened the page, but it was great!
... that is seriously fun.

The red block turning up later was AMAZING.

don't forget the tasty light blue boxes
I stopped after about 60 points, but the fact that new block colors had shown up every dozen points or so made me want to get going for a while to see if there were any more mechanics.

This really is a fantastic little game.