[HN Gopher] Show HN: Looptap - A minimal game to waste your time ___________________________________________________________________ Show HN: Looptap - A minimal game to waste your time Author : vasanthv Score : 736 points Date : 2022-01-13 15:01 UTC (7 hours ago) (HTM) web link (looptap.vasanthv.com) (TXT) w3m dump (looptap.vasanthv.com) | butz wrote: | Feature request: show where the ball was on game over screen, | because now it quickly resets to start position. Maybe show its | "ghost" in different color or just outline. | mxmilkiib wrote: | https://i.imgur.com/liFqyj3.png felt like i might have clicked | too early, but it's showing in on game over | danbolt wrote: | I feel like the variation in placement and length helps. Or, it | pushes towards the "randomness" that makes some skinner boxes | more sticky than others. | TomGullen wrote: | Right click resets it, otherwise good game! | rayrag wrote: | Request: add info about how many loops game had. less loops | should add bonus points or more loops should have penalty points. | | Otherwise fun game :) | deeviant wrote: | Some sort of measurement or score for more hits per unit time | would be cool. Overall, fun little game, nice job. | y4mi wrote: | You already get more points of you click correctly before a | full rotation. | | https://github.com/vasanthv/looptap/blob/4953700d0e8b58dd57d... | michaelhoffman wrote: | Without a "share" button that creates an emoji summary of your | results, this will never get as viral as Wordle | tasha0663 wrote: | Wow, I never noticed that | laumars wrote: | Good game though there seems to be a bug where if you tap twice | quickly, not even a doubt tap but just relatively quickly, it | doesn't register the second tap. | | Safari, iOS (whatever the latest update is) | thom wrote: | It seems possible to click when the circle intersects the shape, | but still lose. I guess it's based on the centre of the circle, | but feels a little frustrating to me. | [deleted] | awb wrote: | I'm of the opposite opinion. The entire circle should be in for | it to count. Basing it off the center feels generous. | | Great little fun game though! | djfdat wrote: | This is a great little time waster! | | Couple of recommendations, in no particular order: | | 1. Keep the ball moving even after you die. Instead of pressing | start, the user will just click when the ball is back inside the | colored area. 2. You can click anywhere to restart, but you have | to click the play button to restart. You should allow the user to | just click anywhere to restart. 3. When you fail, show where the | ball was. 4. As for collision detection, I think you should err | on being lenient and count success if the bounds of the circle | overlap, rather than the center or entirely. I think this is also | due to the rounded linecaps for the arc potentially not counting | as part of the valid area. 5. Show where the next arc will be. | This is more of a game design thing. If you do this, quick fade | out of the old and fade in on the new would look nice. | | I understand that this was probably a small little one off | project, and that there's always more you can iterate on, so I | just want to say nice job in putting out a fun little time | waster! | dagurp wrote: | 6. Delay showing the share button. I kept clicking it | accidentally after failing | slightknack wrote: | Yes, but this almost seems intentionally genius at the same | time. | mesozoic wrote: | I think the score should go down when the ball makes a full | revolution. Encourage more same revolution taping | Shadonototra wrote: | it's basically a clone of what is already playable in the link | they provide | | literally the same | | what is the point other than pure 100% identical copy | | no shame? | | https://coogyloop.com/ | hombre_fatal wrote: | Well, I don't need to download an iOS app to play OP's game. | AtNightWeCode wrote: | When you come to the white beans it becomes sooo difficult. | papa2034 wrote: | Nice game! | [deleted] | tyingq wrote: | For autoplay, paste this into the console and click the play | button. setInterval(function() {loopTapApp.arc=[0 | ,359];loopTapApp.tap(document.createEvent('Event'))},5); | nacs wrote: | There's a pastebin from another user that actually "autoplays" | the game. | | This version is more of a hack/cheat as it doesn't obey the | rules of the game and just fires the tap event all the time. | IAmNotAFix wrote: | The ryhtm should accelerate each N clicks so that the game | eventually ends. Otherwise no matter how many points you get by | clicking fast it's possible to accumulate the same amount by | playing it safe. | colejohnson66 wrote: | It does. If you use the "autoplay" code elsewhere, it | definitely starts speeding up. | robbiejs wrote: | Cool game, works nicely on my android phone. | | One thing that you could improve is add user-select:none to the | page. Quickly tapping the document did select the counter text | and opened a google mini popup, distracting from the game. | | Well done! | [deleted] | leetrout wrote: | Feature request: | | Start the game by pressing "space" as well. | vasanthv wrote: | Added this :) | leetrout wrote: | Thank you | dheera wrote: | ``` loopTapApp.startPlay(); setInterval(() => { | if(loopTapApp.getBallAngle() > loopTapApp.arc[0] && | loopTapApp.getBallAngle() < loopTapApp.arc[1]) { | loopTapApp.tap({preventDefault: ()=>{}, stopPropagation: | ()=>{}}); } }, 50); ``` | dcow wrote: | There might be a bug. I "died" but the ball appears in the live | zone https://i.imgur.com/XJdKgDL.png. Happened to my partner too. | murtio wrote: | Nice minimal game! | nathas wrote: | One of my favorite things to do with these neat little games is | to build something that plays them for me by just pasting stuff | into the browser JS console. | | https://pastebin.com/aTYuaNVS | | At a score of 1,619 the ball is moving so fast it no longer | works! I switched to a new tab (hoping that the event loop would | be sent to the background/context switch/whatever) and ta-da - it | misclicked. High score of 1,637. | jagged-chisel wrote: | 1,665 and the dot is just sitting in the center where the play | button goes. | | Safari Version 15.2 (16612.3.6.1.8, 16612) macOS Big Sur 11.6.2 | (20G314) iMac Pro 2017 | Wingy wrote: | It's not exactly playing the game, but this was my approach: | setInterval(() => { loopTapApp.arc = [ -Infinity, | Infinity ] loopTapApp.tap({ preventDefault: () => {}, | stopPropagation: () => {} }) }) | air7 wrote: | This is just "console.log("You Won!");" with extra steps... | /s | acidburnNSA wrote: | Brilliant, thanks. | | Are you usually able to do this when e.g. it's more of a SPA | and you have to drill down more to get to the state of some | deeply nested component? | nathas wrote: | I haven't really tried. Most of the time I do this and use | the actual game functions for autoclicker games like e.g. | Cookie Clicker. It makes progression a lot simpler and I get | to see the "fun" aspects of the game (like the super weird | late game stuff) without actually breaking the fundamental | game code. I like operating within the game's own code | boundaries. | 2Gkashmiri wrote: | sad. i got stuck in a loop at 1477. it just kept going round | and round. | [deleted] | air7 wrote: | Thank you! | | I didn't peek and ended up with the same solution as you, so | for an extra bit of fun I tried to golf it to be as short as | possible. There's probably room for much improvement: (94 | chars) | | setInterval("l=loopTapApp;b=l.getBallAngle();a=l.arc;b+6>a[0]&b | -6<a[1]&&l.tap(new Event(1))") | Minor49er wrote: | This effectively turns this game into a spinning animation that | appears to get increasingly frustrated that whatever is being | loaded hasn't completed yet | hbn wrote: | Here's my solution: loopTapApp.score = | Number.MAX_SAFE_INTEGER; | ruined wrote: | high score! | dheera wrote: | Mine was this loopTapApp.startPlay(); | setInterval(() => { if(loopTapApp.getBallAngle() > | loopTapApp.arc[0] && loopTapApp.getBallAngle() < | loopTapApp.arc[1]) { | loopTapApp.tap({preventDefault: ()=>{}, stopPropagation: | ()=>{}}); } }, 50); | vthallam wrote: | that works. If there was a leaderboard, this thing will win for | sure :) | only4here wrote: | this is the reason that most FOSS games (especially browser | games in JS) don't really do well with a leaderboard. Still a | neat trick to mess around with! | elwell wrote: | No requestAnimationFrame? | paxys wrote: | Mine gave up at 1683 | [deleted] | CobrastanJorji wrote: | This is neat. | | Also, in retrospect, I probably should have read the code | before pasting it into my console. | nathas wrote: | Most definitely :D | alfon wrote: | You beat me to it, haha, This is what I just did: | | function intersectRect(rectA, rectB) { return !( rectB.left >= | rectA.right || rectB.right <= rectA.left || rectB.top >= | rectA.bottom || rectB.bottom <= rectA.top ); } | | const arc = document.getElementById("arc"); const ball = | document.getElementById("ball"); | | setInterval(() => { if | (intersectRect(arc.getBoundingClientRect(), | ball.getBoundingClientRect())) { window.dispatchEvent(new | KeyboardEvent('keypress', { keyCode: 32, })); } }, 10); | | My code seems to go on forever, closed the tab after it reached | 60K | nathas wrote: | Oh neat! You did the Harder version and didn't use the game's | own code to check it. I find that with JS games it's better | to imitate the game's exact logic and call it's functions to | make sure the state is working/updates correctly. | | Of course, for how delightfully simple this one is, your | approach is definitely faster/better! | capableweb wrote: | Definitely seems like alfon's solution is faster/better, as | it's more accurate when the game speeds up. However, it's | also more resource intensive! getBoundingClientRect (used | to at least, long time I go I did browser performance | stuff) forces a new layout calculation each time it's | called, which is one of the most expensive things you can | do in the DOM, and can lead to jank in the website. Some | more information here: https://developers.google.com/web/fu | ndamentals/performance/r... | | Just adding this information for the ones who don't know | and like to know more about browser performance :) | alfon wrote: | Thanks for the note! | redsummer wrote: | philosopher1234 wrote: | Hypnotic | VishwaGauravIn wrote: | Nice one | skurtcastle wrote: | Not a bad time waster. Simple. Could be used for office fun as | well. | | "Martha. If you beat my score on 1st attempt, I'll do those TPS | reports." lol. | bap wrote: | Fantastic. | | Feature Request: I'd love to see the ratio of successful points | to number of times the ball traverses the circle. I think others | have already said things about scoring mechanisms for faster | taps, I wonder if there could be one around a sweet spot on the | line (earlier is better? Later?!) | | Well done, you've made me late for a meeting! | tinyprojects wrote: | This is great! You've got something here | ChemiSpan wrote: | WOW FANTASTIC GAME HOW DID YOU MAKE IT | [deleted] | jckahn wrote: | Awesome work! I strongly recommend monetizing this. If this was a | native iOS/Android app, you could show an interstitial ad after | each Game Over and offer a small in-app purchase to remove all | ads. It worked for 2048, and I believe it would work here as | well! | | Addictive drop-dead simplicity is repeatable recipe for success | in games. I'm working towards this same strategy in my own | projects, but I think you've really nailed it here! | | EDIT: Whoops, I just noticed that this was based off such an app. | Still, great work on the implementation! | csilverman wrote: | Nothing gets a one-star/delete from me faster than grubby | monetization efforts like interstitial ads. Banners below the | game, removable via a _one-time_ IAP, are one thing, but an ad | that takes over the entire screen for half a minute just makes | the whole game seem shabbier. Especially considering that the | ads displayed are invariably horrible. | umvi wrote: | You have to get a lucky/viral head start though, because the | moment you monetize it and it proves successful you'll | immediately have a bunch of clones competing from Zynga, | Ketchapp, etc. That's what happened with 2048 as well as Flappy | Bird. | schleck8 wrote: | looking forward to the trashy ripoff ads on youtube | cousin_it wrote: | Great stuff, got 315 on third try. I made a game in the same vein | sometime ago: https://vladimirslepnev.itch.io/zigzag | | One thing to note about this kind of endless runner games is the | scoring system. Everyone uses the system "get as much points as | possible in one run, each run starts from zero". But that forces | people to slog through the early parts each time, and also makes | them more likely to stop playing after an especially good run. I | thought about this for a while, and came up with the idea that a | better system would _dock points for mistakes_. The run would | continue, a misclick would just give you a short breather and set | you back fifty points or so. | | I made some prototypes like that and the effect was striking: you | stick with one run for a long time, falling into a kind of | meditative state, never wanting to stop. Eventually you find an | equilibrium where wins and losses balance out, and keep playing | there, at the best of your ability. If I ever release an endless | runner again, it will use that system. | scythmic_waves wrote: | It took me a while to understand what was going on with your | game. Once I got it it was fun, though! | | For anyone else confused: the goal is to keep the light colored | "snake" moving through the dark colored "tunnel". When the | snake stops moving, it's because it's at a junction in the | tunnel. You're goal is to tell the snake which direction to go | (either left or right) _from its perspective_. | y4mi wrote: | so nauseating though. got a headache within seconds of | playing from the constant and completely random camera | movement | tgarv wrote: | Wow, that's a great test of spatial reasoning (or something | akin to spatial reasoning). You kind of have to rotate the | shape in your brain to figure out which direction to turn | from the line's perspective. I've driven with people who | can't follow GPS directions unless it's in "first person" | mode, e.g. if the line is moving "down" but then heads to the | "right", you actually need to turn left, but they think you | need to turn right or are just confused in general because | the orientation is different - and I wonder if they could | train their brain to work that way by playing something like | this. | nemo1618 wrote: | Hey, that's the Barkley: Shut Up and Jam: Gaiden title music! | https://www.youtube.com/watch?v=lWKQiZVBtu4 | | I really like your idea for solving the "endless runner | problem." I guess the reason we haven't seen mobile games adopt | this already is because each restart is an opportunity to show | you an ad. :/ | jordiburgos wrote: | This game is hooking! | 1-6 wrote: | Thanks, you've just wasted valuable engineering time of multiple | people. The actual cost of this game is much more than what we | realize. | quickthrower2 wrote: | But can they capture that lost value? I suspect not. | dumpHero2 wrote: | Or not! They will completed the tasks in the last hour anyway. | What's the cost of HN? | Aachen wrote: | Nice! My grandma enjoys mobile games but is, uh, let's say she's | not a pro just yet. This is something she can do! Let's see if | she'll enjoy it :) | marxdev3 wrote: | Cool game, but the collision detection needs to work better. | Currently can lose if partially touching, does not seem | intuitive. | slingnow wrote: | Disagree, should be within the bounds. Git gud. | ericskiff wrote: | Fun! 171 on my second round. | xavhan wrote: | it remind me of Super Hexagon :D | | You could change the dot rotation direction on each success ... | [deleted] | nashashmi wrote: | Keep this one advancing. Great job with maintaining simplicity. | Lots of forks will come your way | jugg1es wrote: | A cool variation would be to show the bar that's up next in a | faint outline. | marcos100 wrote: | Played twice. Immediately knew that I should stop. | | Great game! | MrOrelliOReilly wrote: | It'd be more fun if you somehow got "bonus points" for reducing | the time between clicks. I kept playing it safe trying to time | the ball but it kind of felt like cheating! | tgarv wrote: | I think it would be neat if you could get bonus points for | multiple clicks within the same arc. So like if you click right | when the ball enters the arc, and there's sufficient distance | left before the end of the arc, you could click again (multiple | times, quickly) and get bonus points until the ball reaches the | end of the arc, at which point a new arc would be generated as | usual. I just think it would be fun to line up a long arc and | mash the space bar for a bit. | albrewer wrote: | This is in the event handler for the tap: | this.score = this.score + (tapInterval < 500 ? 5 : tapInterval | < 1000 ? 2 : 1); | MrOrelliOReilly wrote: | So funny I missed this behavior. Maybe the feedback then is | there could be more gradations/tweaking for us slowpokes out | there (especially since it appears other folks missed it as | well) | | Also I should have lead my original comment with kudos to the | maker, didn't mean to only leave (apparently inaccurate) | critical feedback! | quag wrote: | It does give you more points if you click fast. | Aachen wrote: | It took me way too many loops to figure this out. I was | thinking the same as GP, someone next to me already proposed | a penalty for letting it slip a loop and wanted to fork it, | but this whole time the game has been ahead of us! | quickthrower2 wrote: | A half point lost per revolution would spice it up. | edoceo wrote: | Sometimes it increases the hit counter by one, others by two - | why? | phaer wrote: | Seems to be correlated with how much time passed between two | hits. | almostarockstar wrote: | Pretty sure you get two points if you hit it quicker. So if you | let the dot rotate around to get the segment the next time you | miss out. | bentcorner wrote: | You can get more than 2 if you hit two in quick succession. I | think the max is 5 (tested with blind double-clicks until I | hit two in a row). | kmm wrote: | You get 5 points if you tap twice within 0.5 seconds, and 2 if | the interval is within 1 second. The source code is very | readable. this.score = this.score + | (tapInterval < 500 ? 5 : tapInterval < 1000 ? 2 : 1); | menkar wrote: | codevandal wrote: | Nice! Reminds me of the Cyclone / "stop the light" arcade games. | If anyone wants to play a similar game on iOS, I made one about 7 | years ago called hyper*loop https://apps.apple.com/us/app/hyper- | loop/id944029806 | snihalani wrote: | so good | misterbwong wrote: | Cool game! I know you're trying to keep it simple but a couple | suggestions that might help and won't increase game complexity | too much: 1. Add a share button to share your | score 2. Add a timer component (can be hidden). It will | add urgency. 3. Speed up the ball as time goes on (maybe i | haven't gotten far enough for this to happen...?) 4. If | you're adding more points for "same rotation hit", make it clear | that it's doing that and don't just add more points to the score | (shake the number, throw some fireworks, or something). Your | focus is on the ball not the score so you won't even notice the | number went up a little bit more than usual until you lose. | Aachen wrote: | You use share buttons in games / on websites? I've never even | clicked one, what even should that do, give a copyable text or | a URL to a picture to share or so? | misterbwong wrote: | I _personally_ don 't but one look at wordle and you'll see | that there are a lot of people that _actually_ do :D | usmannk wrote: | Wordle has the most fantastic share button I've seen. It | copies a spoiler-free version of your game board into your | clipboard so you can share as you wish, no links or growth | spam. Normally I avoid the buttons because they just try to | paste a link to my twitter profile. | TheSalarian wrote: | On point 3, there are speed ups around 40, ~80, and on. The | colors change at the same points. | johnmorrison wrote: | I love it, accurate description | andy_ppp wrote: | Should get marginally faster every 10 clicks... | hnburnsy wrote: | Great game! Suggestion, penalize each rotation that does not have | a click. | xbar wrote: | Best: 1 | johncs wrote: | Oh hey, it's one of Fable's mini games! Very cool to see | mattfrommars wrote: | Reminds me a hamster game from back in the gay - the hamster | would go in a loop. | typon wrote: | This is very similar to the popular game "Pop the lock" | RankingMember wrote: | Simple addictive games like this always remind me of that ball- | in-a-cup game that everyone got addicted to in that "The Game" | episode of "Star Trek: The Next Generation". | laumars wrote: | Every time I rewatch that episode it reminds me about when | smart phones and social media first swept through, turning | people into zombies staring at their phone screens and barely | interacting with people physically around them. | alex_smart wrote: | Because it had to be done: let robot = function | () { const ballAngle = loopTapApp.getBallAngle(); | const arc = loopTapApp.arc; if (ballAngle + 6 > | arc[0] && ballAngle - 6 < arc[1]) { | window.dispatchEvent(new Event('mousedown')); } | } var timer = setInterval(robot, 10); | y4mi wrote: | at ~1600 the ball started to spin too quickly for an | intersection with that 10ms timer and there were 6 balls | visible at the same time with my 144hz display. fun stuff. | fullstop wrote: | 3 visible at ~1600 here. I then set the timer to 1ms and it | got a few more points and then put the ball in the very | center of the circle. When I clicked, the game ended. | GrifMD wrote: | This was delightful, and now I will get no work done today. | bentcorner wrote: | Love the mechanic where the more quickly you click the next one | the more points you get. | | There should be a timed mode to encourage rapid clicking (i.e., | score the most points within 30s or 1min). | wnolens wrote: | I love this. Added to my home screen. | nope96 wrote: | This reminds me of this cat toy - the circle with a ball in it | (or at least it made me feel like a cat for a minute) | | https://m.media-amazon.com/images/I/617M1m5N-aL._AC_SS450_.j... | scrozier wrote: | "Thanks." | catskul2 wrote: | Missed opportunity to name it "ball tap". | MerelyMortal wrote: | "tappy ball" | | A play on "flappy bird". | charleshan wrote: | This is well made! Easy to understand, challenging, and a hint of | variable reward. | atum47 wrote: | Simple yet addictive | kpmcc wrote: | Good game, clever concept, appreciate the simplicity. ___________________________________________________________________ (page generated 2022-01-13 23:00 UTC)