• juretriglav 3 months ago

    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 3 months ago

    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.

  • saagarjha 3 months ago

    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.

  • dddddaviddddd 3 months ago

    Surely it asks explicitly for permission to use the sensor?

  • pedrocx486 3 months ago

    Chrome does not, no.

  • crsv 3 months ago

    Mobile safari on an iPhone XR just worked.

  • chupasaurus 2 months ago

    Can confirm that HP Probooks had the same accelerometer in 2011-2014. Win8 used it for screen orientation OOTB.

  • firmgently 2 months ago

    pioneered I believe by ThinkPads in 2003 http://www.thinkwiki.org/wiki/Active_Protection_System

  • JCharante 3 months ago

    Do MacBooks that shipped with an SSD not have the accelerometer?

  • stinkytaco 3 months ago

    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.

  • Wowfunhappy 3 months ago

    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.

  • geofft 3 months ago

    My MacBook with an SSD (12", 2017) does not have an accelerometer as far as either my web browser or `pmset -g` can tell.

  • colordrops 3 months ago

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

  • manfredo 3 months ago

    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.

  • JeremyBanks 3 months ago

    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.

  • gowld 3 months ago

    > gyroscope API we provided for ads

    Whaaaa?

  • JeremyBanks 3 months ago

    Yeaaaaah. Our clients thought it was super-cool to add distracting battery-destroying parallax effects to their mobile ads. :|

  • tomaskafka 2 months ago

    What business model do you think Google has?

  • colordrops 3 months ago

    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.

  • tsukikage 3 months ago

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

  • gugagore 3 months ago

    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?

  • 2 months ago
    [deleted]
  • jefftk 3 months ago

    Maybe the compass gives you noisy absolute information which is ok, but combined with accurate relative information from the gyroscope and accelerometer is better?

  • saagarjha 3 months ago

    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.

  • tokyodude 3 months ago

    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

  • colordrops 3 months ago

    Browsers now have service workers that run in the background even when the browser UI isn't loaded.

  • saagarjha 2 months ago

    > I don't generally walk and read

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

  • sgspace 3 months ago

    How is this disturbing at all? Do you get disturbed that websites know your mouse pointer location?

  • saagarjha 3 months ago

    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.

  • saagarjha 3 months ago

    FWIW, Safari on iOS didn't ask me either. I'm actually kind of disappointed.

  • jonathankoren 3 months ago

    It worked just fine for me.

  • zapzupnz 3 months ago

    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.

  • choward 3 months ago

    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.

  • nkrisc 3 months ago

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

  • anonytrary 3 months ago

    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 3 months ago

    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 3 months ago

    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 3 months ago

    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 3 months ago

    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!

  • ronilan 3 months ago

    Indeed.

    This is awosome on mobile!

  • scarejunba 3 months ago

    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.

  • andyidsinga 2 months ago

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

  • daliusd 3 months ago

    Note: mobile Chrome but not Firefox.

  • Drdrdrq 3 months ago

    Not sure what you mean, but it works for me on ff/android. Nice game, well executed!

  • daliusd 2 months ago

    Maybe it was fixed :)

  • PaulBGD_ 3 months ago

    Worked just fine on Android Firefox.

  • zrobotics 3 months ago

    Worked excellent in brave mobile as well. Actually fairly addictive

  • KenanSulayman 3 months ago

    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.

  • snazz 3 months ago

    It looks to me that they’re just adding a permission for gyro access instead of turning it off altogether. Did I misread it?

  • teraflop 3 months ago

    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.

  • beatgammit 3 months ago

    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.

  • zchrykng 3 months ago

    If the app doesn't want to ask permission before gathering my data, they can pound sand.

  • doodpants 3 months ago

    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.

  • saagarjha 3 months ago

    Collecting gyroscope data is quite passive, though. It's easy to forget that an app/website has access to this.

  • beatgammit 3 months ago

    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.

  • quadcore 3 months ago

    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 3 months ago

    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.

  • beatgammit 3 months ago

    You don't need complexity until you do.

    Our company needed an internal tool, and they wanted remote access to it, but it was basically just a tool to generate a file based on a few inputs. We already had a command line program for it, so I wrapped it up in a web server and had it take input as a form input without any JS. It worked great for years, and then someone got tasked with updating it (mostly just combining it with other tools). He couldn't figure out how it worked, so he rewrote it to use a ton of JS, using Angular and other stuff. And guess what? He took longer to rewrite it than I spent the first time and made no functional changes besides some CSS and a ton of JS.

    With all these fancy new frameworks and browser features, it seems that many developers have forgotten (or never learned) how to do things simply. Frameworks and browser features have their place (I built an interactive HTML5 app as my first project at that company), but they're often completely unnecessary.

  • jb3689 3 months ago

    To be fair, in my experience rewrites always take longer regardless of technology choices. You are often reverse engineering requirements which is really consuming both in time and energy. That said, I agree with the point you're trying to make though (I strongly prefer software with less dependencies/frameworks)

  • akuji1993 2 months ago

    Also, he apparently had to update / upgrade the application, so it's kinda to be expected that he will take longer for this.

  • kennybomber 2 months ago

    Yes one should assume most frameworks will be dead 2 years from now. Dependencies problems suck. And create security holes. When development starts going into the cloud get ready for a lot of pain the world has never seen before.

  • tracker1 2 months ago

    It depends on your needs... Are you building a complex application with several developers. You probably want a build system and module based JS. I prefer react + redux + material-ui. Some of the new stuff around hooks and context could displace redux for smaller apps easily.

    If you need a one-off page that does a little dynamic stuff? Drop in jquery+bootstrap and a little wiring js and be done with it. Not a huge fan of the size of jquery + bootstrap, but it's a fast path to done depending on your one-off needs.

  • jianzong 3 months ago

    My brain hurts just imagining this.

  • croh 3 months ago

    Mine too

  • apo 3 months ago

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

  • tim1994 2 months ago

    Also never use Math.pow for squaring numbers (used in the distance function) because it is significantly slower as it is designed for abitrary real exponents, not just integer ones. Cannot be learned soon enough IMO :)

    Still a very good job for just a week of coding though.

  • fenomas 2 months ago

    > Also never use Math.pow for squaring numbers (used in the distance function) because it is significantly slower...

    Modern JS engines optimize hot functions at runtime - advice like this won't affect actual performance.

  • ghusbands 2 months ago

    This advice is incorrect. Experimenting in the console in both Firefox and Chrome shows that there's not a significant speed difference between the two, even if you make sure you only call a given function with integers <10000.

  • tim1994 2 months ago

    On my laptop it is about 30% slower (tested with Firefox 64). However I agree, this was not very good advice for someone who just started programming with JS...

  • therein 2 months ago

    Definitely great job. Reminds me of when I taught my physicist friend C and he wrote a raytracer and a game to demo it the next day. I had never witnessed so many trig functions used on a global context.

  • Sean1708 2 months ago

    Does the JS JIT not handle this? Seems like it would be incredibly trivial...

  • johnwyles 2 months ago

    Fork it and submit him a PR!

  • sbov 3 months ago

    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?

  • nurettin 3 months ago

    That was the next logical step during the early 2000s. Every bright-eyed college freshman on IRC was "recruiting" for his next awesome MMORPG idea.

  • skocznymroczny 2 months ago

    It's still a thing. On gamedev forums and subreddits you still have people assembling a team. Of course he can't do any programming, he's only an idea guy and needs 5 programmers, 3 writers, 7 artists etc.

  • kungtotte 2 months ago

    No he can't pay you anything, you'll get shares in the company which eventually will be worth gazillions because the idea is so good.

  • baud147258 2 months ago

    No, right now it's the RPG elements that are trendy, RTS is soooo 2000.

  • crooked-v 2 months ago

    RPGs are soooo 2016. The current thing is battle royale games.

  • baud147258 2 months ago

    Touché. Between CoD, CS and BattleField, it's quite true.

    I was more thinking of Assassin's Creed and Far Cry when I wrote that comment.

  • cududa 3 months ago

    If you're not joking and actually making that statement seriously you need to close your computer and go take a few hour walk.

  • MetalGuru 3 months ago

    He’s joking.

  • 2 months ago
    [deleted]
  • finaliteration 3 months ago

    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.

  • etatoby 3 months ago

    That's a complaint about the JS language itself, that variables are global unless otherwise specified.

  • finaliteration 3 months ago

    I do agree it’s a complaint about the language. However, I think it does ultimately fall on the developer to know how to work with the language including the bad/ugly/awful parts. I also think not polluting the global scope is a pretty foundational thing to know or be aware of. It’s really easy to shoot yourself in the foot or have naming collisions/overwrites happen if you aren’t careful.

    Another example would be memory allocation/freeing in a non-GC language. Sure, it’s a pain that I have to deal with it, but it’s still on me to make sure my application works in the language I’ve chosen and doesn’t leak memory all over the place.

  • klyrs 3 months ago

    > However, I think it does ultimately fall on the developer to know...

    This person has been programming for a week. I think we can let this slide

  • test1235 2 months ago

    Well, no - not if everyone's raving on about how great the code is. Code quality is objective, not dependant on experience.

    I don't get to write crap code at my work if I'm inexperienced, I have to learn to write good code.

  • nicoburns 2 months ago

    Feedback is pretty useful for new programmers though. It's how they learn!

  • finaliteration 2 months ago

    I’m not at all saying they should be an expert after a week. But learning those things is part of being a software developer/programmer and I don’t think, “Well the language sucks” is a valid argument.

  • ngcc_hk 2 months ago

    Great comment. Great comment.

  • 3 months ago
    [deleted]
  • jeena 3 months ago

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

  • lucisferre 3 months ago

    I'm going to guess that isn't intentional.

  • 11235813213455 3 months ago

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

  • 3 months ago
    [deleted]
  • HighSaysBob 3 months ago

    From the source, Shift = Brake

  • Imagenuity 2 months ago

    You would never know this unless you read the source. It's unlikely that you'd stumble across it.

  • Satsana 3 months ago

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

  • natecavanaugh 3 months ago

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

  • tmdroid 3 months ago

    He did the game in a week, not learn JS from what I understand from the title

  • natecavanaugh 3 months ago

    Ahh thanks for the clarification :)

  • carlosdp 3 months ago

    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 3 months ago

    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 3 months ago

    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 3 months ago

    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 3 months ago

    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 3 months ago

    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.

  • 3 months ago
    [deleted]
  • bduerst 3 months ago

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

  • bbno4 3 months ago

    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 3 months ago

    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.

  • steve_adams_86 3 months ago

    For those of us who appreciate simple little distractions, this is a really fun and easy way to blow away a few minutes. It isn't that easy to build such intuitive but fun mechanics into a game, so it's impressive that a newcomer nailed it so well. Some people tend to require something more engaging or rewarding, and you might fall into that category. Definitely a different strokes thing.

  • simpsond 3 months ago

    I appreciate the minimalism of the game. It has the concept of progression down well. More captured blocks increases the speed of the red block, making the game more challenging as you progress. The friction of the movement makes the controls just the right amount of challenging.

  • zrobotics 3 months ago

    Same could be said of tetris, though. Sure, it's very minimalistic, but it is well done and the mechanics are fun to play.

  • Drdrdrq 3 months ago

    Did you try it on the phone, using tilt? Other than that - yeah, that's all there is to it.

  • Darkphibre 3 months ago

    The red block gets faster and faster, introduction of smaller squares worth ten points, it became quite a challenge for me to keep a score above 100 on PC with arrow keys.

  • barbarr 3 months ago

    It's an interesting control scheme to get used to.

  • GuB-42 3 months ago

    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 3 months ago

    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.

  • GuB-42 2 months ago

    Yes, I've done it too (I am a french native). Especially common is writing code in English and commenting in ones native language. There are other cases, like when the english word is not known or to stay consistent with a data source.

    I've also seen the native word to avoid conflicts, like adding "2" at the end of a variable. That's bad, don't do it kids ;)

    But here, the "hero" has a "speed" while the "ennemi" (french for "enemy") has a "vitesse" (french for "speed"). That's why I thought that the enemy is more likely to be a later, less supervised addition.

    And BTW, I didn't notice any french swear word in that code. That kid is more mature than I was :)

  • aaronmdjones 2 months ago

    It can also go the other way, of course (variables in native language, or just single-letter variables, and comments in English). I seem to remember that Linus Torvalds commented all of his code in English without ever thinking about it.

  • pvorb 3 months ago

    Even in a professional context it's reasonable to use the language your customer (business expert) is using. Beware of mapping technical terminology into another language! And if that means you write Swedish code, that's perfectly valid.

  • icebraining 3 months ago

    I've definitively had the case of having all the codebase in English (not our native language), since all concepts mapped easily, and then a new concept appears and damned if I know how to translate it! So now we're stuck with a single non-English term in the codebase, which is a blot on the whole work :(

  • sandov 3 months ago

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

  • baalimago 2 months ago

    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?

  • atilkan 2 months ago

    I don't believe either.

  • OrBaruk 3 months ago

    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

  • anonytrary 3 months ago

    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.

  • Wowfunhappy 3 months ago

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

  • OrBaruk 2 months ago

    Yea, that was an issue that I skipped over and never got around implementing a fair enemy spawn

  • 3 months ago
    [deleted]
  • sonofgod 3 months ago

    ... that is seriously fun.

    The red block turning up later was AMAZING.

  • zild3d 3 months ago

    don't forget the tasty light blue boxes

  • kemitche 3 months ago

    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.

  • omni 3 months ago

    I love that the red block doesn't understand the concept of wrapping. It reminds me of playing with my dog.

  • Wowfunhappy 3 months ago

    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.

  • ubershmekel 2 months ago

    I felt wrapping added a strategic depth for me to explore and a positive sensation of "outsmarting" the red block.

  • andreareina 2 months ago

    Could simply be that ignoring the wraparound is the naïve way to provide a direction for the red dot. Navigating a wraparound world is also unintuitive, so the player would be at a disadvantage if the enemy could take advantage.

  • megaman8 3 months ago

    That's a neat little game. So creative, simple and intuitive to play. Best of all I didn't have to read any tutorials to get started.

    By the way, if you're interested in making your own tile based RPG game, I'm developing some tutorials to help you learn how: https://codeorc.com/learn-web-development-by-programming-a-r...

  • icholy 3 months ago

    Cool game, but am I the only one who's a little skeptical about the title?

  • sebringj 3 months ago

    exactly i call bs

  • kelvin0 3 months ago

    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.

  • Klathmon 3 months ago

    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.

  • a13n 3 months ago

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

  • automathematics 3 months ago

    As someone who founded a company based on javascript game development, looks like I'll be hiring your little brother within a few years :)

  • airstrike 3 months ago

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

  • phkahler 3 months ago

    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.

  • maxmcd 3 months ago

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

  • lovasoa 3 months ago

    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 !

  • jancsika 3 months ago

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

  • rcarmo 3 months ago

    This thing is deceptively subtle and fiendishly addictive. Well done!

  • cowpewter 3 months ago

    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.

  • zild3d 3 months ago

    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

  • beatgammit 3 months ago

    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.

  • nsxwolf 3 months ago

    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.

  • wccrawford 3 months ago

    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.

  • ams6110 3 months ago

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

  • lovasoa 3 months ago

    My little brother is 15. He had programmed before, but only on his graphic display calculator.

  • z3t4 3 months ago

    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.

  • 3 months ago
    [deleted]
  • 3 months ago
    [deleted]
  • backpropaganda 3 months ago

    Very cool. Nice trick you guys did there with the lighter colored block, and the red enemy not being able to follow across the boundary. A lot of game developers I respect and whose games I've enjoyed started programming at a young age with simple tools which allowed getting their hands dirty. While javascript is a great language to do this, you might want to consider Game Maker Studio as well.

  • cphoover 3 months ago

    Wow this actually kinda fun. Tell your bro props.

  • mcintyre1994 3 months ago

    This is a really fun game! I love how fast the player moves, it reminds me of my max sensitivity trackpad and mouse :)

  • tchaffee 3 months ago

    Maybe your brother would be interested in this contest?

    https://js13kgames.com/

    Like most everyone else, I was impressed. Way more interesting than I first thought possible with such a minimal game. The little red guy made the difference.

  • wensley 3 months ago

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

  • giancarlostoro 3 months ago

    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/

  • coldtea 3 months ago

    Didn't expect something significant when I opened the page, but it was great!

  • virtuexru 3 months ago

    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.

  • goldcd 3 months ago

    Admit it - you were tilting your monitor!

  • joshwcomeau 3 months ago

    Amazing work. Your brother should continue pursuing this :D super impressed!

  • eagsalazar2 2 months ago

    Wow I really enjoyed that! When I was still trying to "win" my eyes were watering like crazy because you just can't blink once the score gets high. Am I the only one who at some point got suicidal? You're like OMG I need a break and the only way is to start chasing the red dot. When I got back below 10 and the red dot disappeared I was like holy shit there is no way out! Felt like a great twisted ending to some intense psycho thriller. Also my right (arrows) hand is now aching.

    Great job!

  • krozgen 3 months ago

    Snowcrash mode :) (In console): setInterval(function() { hero.x = powerUp.x; hero.y = powerUp.y; }, 50); setInterval(function() { hero.x = reward.x; hero.y = reward.y; }, 100);

  • wrayjustin 3 months ago

    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

  • krozgen 3 months ago

    I love when the red square comes close and the green one jukes in a tight spiral around it, just thinking "Whoa nope nope NOPE ah it's okay"

  • wrayjustin 3 months ago

    LOL yeah, it's like watching a sport. By about a score of 300 the enemy is just too fast for our hero. =/

  • toabi 3 months ago

    Interesting, I just watched it and for me the limit is around ~130.

  • toabi 3 months ago

    Lower the timeout from 25 to 5 and it's like Neo fighting agent smith :D

  • lmitchell 3 months ago

    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.

  • undershirt 3 months ago

    A great reflection on both the quality of the teacher and the promise of the student. And I really liked all the subtleties captured in such simple code. Refreshing!

  • schnevets 2 months ago

    Simple game design really is a beautiful thing. You find a mechanic that is fun to noodle with (like the slippery control logic), throw in a hook to get people ("oh look! a green square!") and then you can refine and refactor into a billion different permutations.

    My favorite part about this was how the red square would get faster in bursts. It was like the baddie was getting increasingly exasperated about his whole damn situation.

  • Zelphyr 3 months ago

    That's impressive. Can you provide more info such as how old he is, did he have any kind of programming experience prior, and how did you go about teaching him?

  • lovasoa 3 months ago

    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.

  • milesdyson_phd 3 months ago

    Nice job, just an FYI it looks like movement speed is tied to refresh rate. I was having a difficult time at 144hz but lowering to 60hz made it way more manageable.

  • ccho 3 months ago

    Congratulations to your brother and hope he continues to create and learn!

    This demo reminded me of this tutorial livestreamed a few weeks ago: https://youtu.be/Z3OnwkPOfY4

    While your brother's demo adds more advanced input and gameplay elements, I'm just curious whether it helped inspire him.

  • hsnewman 3 months ago

    Should it have some type of timer, perhaps a countdown for accomplishing a mission, with time lessening each round?

  • deaps 3 months ago

    I played so long, I forgot I was at work.

  • ninjakeyboard 3 months ago

    You should show him nibbles - this was something I made in C when I was 17 or 18 - could be the next step in his production of this game! https://classicreload.com/qbasic-nibbles.html

  • ilovetux 3 months ago

    This is really nice, simple and fun game. Absolutely a great first project. I love how the physics feel.

  • 27182818284 3 months ago

    Seconding everyone else. I was surprised by how dope this was. I played until like the 70s or 80s.

  • Ancient 3 months ago

    I thoroughly enjoyed the little distraction. Great job and keep on hacking it! So much potential.

  • nfriend 3 months ago

    Brings back memories of Squares 2, a Flash game I was addicted to in high school: http://www.officegamespot.com/freegames/squares2.htm

  • kennybomber 2 months ago

    Nice but damn long code block. Maybe ask if he can break it up into smaller functions. Better to get him thinking about quality and reuse. Like that comments though, better than most code out there.

  • PopeDotNinja 3 months ago

    Pretty fun. Please make the score a little bigger so I can read it without my glasses :)

  • TheGrassyKnoll 3 months ago

    I'm an old man and a bad programmer. I will learn a lot from this game. Thanks.

  • simlevesque 3 months ago

    Toutes mes félicitations Noé ;)

  • maxwellito 3 months ago

    French variables names <3 So nice to see, it reminds me some memories :-D Good job! Big Kudos for your little brother!

    PS: J'espere qu'il gardera cette curiosite et cette envie de creer!

  • mcnichol 3 months ago

    This is awesome. Straight-forward mechanics, engaging, and it could really just end there.

    I hope to inspire in my own kids something you have shared with your little brother. A true gift!

    Thank you for sharing.

  • faissaloo 3 months ago

    Why is this so enjoyable

  • michaelchisari 3 months ago

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

  • scarejunba 2 months ago

    Seriously. This is like when 2048 was posted on HN.

  • grendelt 3 months ago

    When I was fooling around with JS, I made Conway's Game of Life.

    http://n5dux.com/life/

  • dynamoa 3 months ago

    Let him know there is a minor bug with the brake.

    If you hold an arrow key and then hold brake, the square will slow down but then speed up briefly and finally slow down for good.

  • runjake 3 months ago

    Surprisingly fun game.

    Seems pretty basic enough in the beginning, but then turns into a serious predator/prey challenge and involves a lot of hand/eye coordination.

  • jotato 2 months ago

    this is awesome, and very similar to what got me into dev.

    when I was 11 an online friend showed me a "game" he was working on using VB6. There was a little star you moved across the screen by clicking buttons for u/d/l/r. His end goal was a top-down RPG.

    Seeing projects like this always hold a special place in my heart. Best of luck to your brother. I hope his passion grows and he does amazing things

  • tabtab 2 months ago

    Sounds like my experience with BASIC in the early 80's. I made a cheesy Space Invaders clone. Although, I think I was longer than a week.

  • cschep 3 months ago

    I really enjoyed the "feel" of the movement!

  • greybox 3 months ago

    Putting the - you made a game in a week and you only just started - aside

    The mechanics in this are really well thought out! Great job!

  • hathawsh 3 months ago

    This is really cool. It could be the next Flappy Bird / 2048. Do more enemies show up when you score 100? :-)

  • geetfun 3 months ago

    Nice game! How old is your little brother?

  • aaronsnoswell 3 months ago

    Amazing success story! The game is really fun! You should challenge him to add mobile support via accelerator!

  • sid_maddy 3 months ago

    It already uses the gyroscope in mobile!

  • Globz 3 months ago

    This impressive!! I love the gameplay.

    Are you guys from Québec or Europe? I noticed the french comments in the source code hehe

  • lovasoa 3 months ago

    we are from France :)

  • Smithalicious 2 months ago

    I'm very impressed with how fun the game is. Your little brother has talent for game design.

  • kahlonel 3 months ago

    It's amazing how something so simple can be so fun. Really awesome accel/deceleration feel.

  • pdpi 2 months ago

    This is a great start, and, if you want, a natural progression from here is an Asteroids clone.

  • sheikheddy 2 months ago

    What I like about this project is that the game board is topologically a torus.

  • bovik 3 months ago

    there is a bug if you try to change direction by rolling over left and right at the same time or up and down at the same time. hitting uo/down together and left/right together when changing direction has a weird pause effect.

  • gsaga 2 months ago

    How do I get this game working on my device. I have chrome on android lollipop.

  • kowdermeister 3 months ago

    Nice job, deceptively simple, yet has the fun factor.

    Also notice the GH repo, it has 43 commits.

  • nikkwong 3 months ago

    Your little brother ruined my day. Because I can't stop playing. :p

  • gboone 2 months ago

    Yeah dude! Love this. It got difficult at 33. I'm hooked.

  • SomeT 2 months ago

    From a game design perspective this is a good game.

  • vinitagr 3 months ago

    Loved the Gameplay, haven't see anything like this. :)

  • mslip 3 months ago

    Very fun game! I cheered when I got my first square.

  • rsgrafx 3 months ago

    This is really Really cool. Hats off to little bro.

  • cwhsu 3 months ago

    Somehow, I find it interesting, so not bad at all.

  • ttoinou 3 months ago

    Wow, the maths are more impressive than coding IMHO

    Bien joué Noé :)

  • lovasoa 3 months ago

    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!

  • greybox 3 months ago

    Surprisingly well thought out mechanic!! Good job!

  • nyfresh 3 months ago

    Good work. It's fun and has clean code too!

  • Avi-D-coder 3 months ago

    Very cool. A high score counter would be useful.

  • WhtWsThtAgn 3 months ago

    Fun! Wonder how high people will go. 69 points.

  • simongr3dal 3 months ago

    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.

  • hyper_reality 3 months ago

    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.

  • all2 3 months ago

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

  • ggerganov 3 months ago

    Got to 230 by constantly going in circle

  • om3n 3 months ago

    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.

  • whateveracct 3 months ago

    Nice

  • 3 months ago
    [deleted]
  • maty13 3 months ago

    Ha it’s dope The best games are so ‘simple’

  • xparadigm 3 months ago

    Played for a while and it's very good.

  • jrochkind1 3 months ago

    i would have no idea how to make this game.

  • Abishek_Muthian 3 months ago

    You have taught him well, congratulations.

  • 3 months ago
    [deleted]
  • nwhatt 3 months ago

    The mobile version is oddly satisfying

  • SilasX 3 months ago

    Pretty good fun/complexity ratio.

  • ryantuck 3 months ago

    so cool!

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

  • ronilan 3 months ago

    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.

  • Retr0spectrum 3 months ago

    HTML5 canvas was where I wrote my first game, it has a relatively simple API, once you've copied the boilerplate from somewhere.

  • zild3d 3 months ago

    on chrome: right click -> View page source

  • systematical 3 months ago

    Very nice. Bounds detection please.

  • inscionent 3 months ago

    That's really fun and simple!

  • micah94 3 months ago

    Nice work. Hope he keeps it up!

  • NKCSS 2 months ago

    Very, very enjoyable! Amazing.

  • pabloacastillo 3 months ago

    Ok, that was fun to play. Wow!

  • sebringj 3 months ago

    how little is little? why didnt he post it here himself? feels a little suspect.

  • lovasoa 3 months ago

    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.

  • sebringj 2 months ago

    If he truly did it, that's great and seems like you guys could start an indie studio and work part time on upwork or something until you get funded.

  • sebringj 2 months ago

    i was 7 when i programmed on a commodore 64... and walked to school in 1 foot of snow... (kidding on the last one) sorry but he's not little but nice game.

  • joelthelion 3 months ago

    You're a good teacher :)

  • nidhalbt 2 months ago

    isn't the game fun! :)

  • juniusfree 3 months ago

    Great!

    How did you teach your little brother?

  • spotlmnop 3 months ago

    Does he want a job?

  • 3 months ago
    [deleted]
  • mikorym 2 months ago

    Pretty cool.

  • jeffrallen 2 months ago

    Awesome!

  • runnr_az 3 months ago

    Nice!

  • xylon 2 months ago

    wow, great game!

  • mamby 2 months ago

    wow fantastic !

  • lyte 3 months ago

    this is awesome

  • herpes 2 months ago

    Not mentioned: his little brother is 38.

  • foxfoxmoose 3 months ago

    4/10. bad graphics

  • dotdi 3 months ago

    Cool game! Congrats to your brother.

    Doesn't work on current Firefox.

  • kgwxd 3 months ago

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

  • lovasoa 3 months ago

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

  • jakelazaroff 3 months ago

    Works for me on latest Firefox!

  • FroshKiller 3 months ago

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

  • TheGrassyKnoll 3 months ago

    Linux (Debian derived Bunsen) Firefox Nightly: worked

  • Glyptodon 3 months ago

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

  • edanni 3 months ago

    FWIW it works for me on Firefox for Android.