Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: I made a web game called Almost Pong (lessmilk.com)
1135 points by lessmilk on March 2, 2022 | hide | past | favorite | 181 comments
Hi HN!

I made many small web games in the past with Unity or Phaser. But this time I wanted to make something completely on my own. So I coded a basic game framework in plain JavaScript, and used it to make Almost Pong.

This was a really fun project that taught me a lot about JavaScript, and I plan to make more minimalist games with this framework. Interesting fact: Almost Pong doesn't load any assets, all sprites and sounds are generated with code.

Happy to answer questions, and please let me know if you have any feedback on the game. Thanks!




I like small games like this. We can have a simple playing while resting.


This is a wonderful little game. The concept and execution is extremely concise but the thing that really sealed the deal for me was noticing the escalating difficulty by making the paddles shrink.


Awesome, thanks for the comment! Yes first the paddle shrink, and then later the ball starts to speed up.


Excellent. My favorite implementation of Pong is PLBM Pong from the DOS days: you can make the ball crawl at first and speed up gradually until it's all frantic jiggling of the paddles. Much fun've been had in the two-player mode.

https://archive.org/details/PLBMPongOut_1020

You could in fact do likewise: let the player choose the initial parameters and the speed of change. Maybe with preset difficulty tiers if high scores are kept.


Difficulty +1 ; Let the ball split into multiples at some stage


Let me use this thread to tell this somewhat related story of mine.

When I was still at university we had a C class and were doing it in a computer lab with partners (back then very few students could afford a laptop). I was always partnering up with the same friend. Since we were a bit bored with the class we started building our own pong in C. Rendering was done in ASCII in the command line, with paddles being 3 pipes, the ball a capital 0 and the walls "#". We would spend some time at the beginning of the class building/improving it and at the end playing it. We used keys like "W" and "S" for the left player and "O" and "L" for the right player. Since the initial setup with rendering and "physics" of the game went quite fast, we thought about how to improve it and make it more fun.

What made it incredibly fun (at least for us) in the end, was the addition of bonus squares. So, between the two paddles, if the ball that you just touched hit a bonus square, it would activate an effect for you or for the game depending on the bonus. We had: - "wall", would create a 3 squares wall at the location of the bonus - "turn of the lights", would hide everything but the ball (even the paddles) - "gun", would allow you to shoot and destroy walls and bonuses - "bigger/smaller paddle", self explanatory - "net", would temporarily put a net behind you preventing you from missing the ball - and some more, like speed up the ball, add an extra ball, etc.

It's been my one and only experience building a game but I think it was the most fun I've had programming… If anybody is up for re-building a pong with bonuses I'd be definitely up for that ;)

Back on the topic: love the implementation OP, pretty addictive. And, as can be read above, it brought back some nice memories.


Ever heard of Arkanoid[1] ? Your changes maps pretty much to what the bonus pills did in Arkanoid. Some possibility in Arkanoid that you did not mention in your version:

   - Makeing the paddle wider or narrower
   - Multi-ball
   - Capturing / releasing the ball when it hits the paddle.
   - Destructive ball (pass through walls)
   - Extra life
[1] https://www.classicgame.com/Arkanoid


Absolutely! I loved playing that game so much! And indeed, most of the inspiration for the bonuses came from Arkanoid, trying to experience this feeling of getting the bonuses again.

Sharing to good and bad bonuses between us (the two players) definitely added a cherry on top of this experience though.


"flappy badminton" - the shuttlecock aka a "birdie" is traditionally made with feathers https://wikipedia.org/wiki/Shuttlecock )


I was gonna go with “Flappy Pong”, but either way, has major Flappy vibes. Great little game, though. Has the element that makes you want to keep playing it.


"Flappy Pong" exists, as an Atari 2600 game no less: https://www.atariage.com/store/index.php?l=product_detail&p=...

I helped the author track down and fix a certain bug: the paddle would get stuck to the ground, when the fractional subpixel value of its y-coordinate was very slightly below zero. He sent me a free cartridge and T-shirt as thanks.


This feels like a playable version of Flappy Bird. The physics are sane and feel right. Flappy Bird seemed designed just to frustrate.


>>designed just to frustrate.

We calls thems engagement in these here neck 'uh tha woods.


You were one of my biggest inspirations for going into software engineering, I absolutely loved your website in high school and would always mess around with the source code to your games. Happy to see you’re still going!


This is awesome to hear! I stopped making games for a few years to focus on other things, but now I'd like to get back to it.


Remember when Flappy Bird was making $50k a day (or something like that [0]) and the creator should shut it down? Ah, memories. You could potentially recreate this to put on the mobile app stores and see how it does, I think a lot of people would play it.

Oh, and soon you'll see people here on HN competing to hack the top score as with previous games [1], either though writing an AI to play the game or by modifying the JS itself on the site.

[0] https://www.cnet.com/tech/services-and-software/no-flappy-bi...

[1] https://news.ycombinator.com/item?id=29921419


I think the second-chance pool* lobbed this one onto the front page while the OP was offline. I emailed to let him know that it's at #1...twill be quite a thread to come back to!

* https://news.ycombinator.com/pool, explained at https://news.ycombinator.com/item?id=26998308


That's a fun concept, but you might want to speed it up a little bit. I stopped at 20 because I got bored, it's way too slow. The ball moves too slowly and the paddles should shrink a bit faster. The change that occurs between 1 and 20 should probably happen between 1 and 5, or 1 and 3 instead.

Edit: oh wait, it's way more fun on Safari. On Firefox it feels slow and slugish, but on Safari it's great!


It's fun on Chrome 98 / Ubuntu as well ;)

I think the game should scroll up infinitely as you progress. It will enhance the psychological feel of falling in space when the pong drops. And you can introduce levels, bosses, goals, etc.

The basic game play mechanic here is solid. Just like keeping a party balloon from hitting the ground!


Chrome on m1 mac - laggy and frustrating in a bad way

Safari on m1 mac - no lag and frustratingly fun :)


Hi. I've had the same (good) experience on both. Could it be something in your FF?


Ah, I also stopped at 19 and didn't even notice the paddles were shrinking! Yeah, maybe speed up.

And powerups in the middle that make ball bigger or grows one paddle again would be interesting.


If this isn't working for you on Firefox, check that dom.webaudio.enabled isn't set to false.

If Web Audio is disabled then window.AudioContext is undefined, causing a crash:

    Uncaught TypeError: AudioContext is not a constructor
        Sound https://d33wubrfki0l68.cloudfront.net/bundles/72f7c09a3e8485a33911cdf084acaeaf58ce17ce.js:5
        startGame https://d33wubrfki0l68.cloudfront.net/bundles/72f7c09a3e8485a33911cdf084acaeaf58ce17ce.js:482


Impossible to play on a 280hz monitor. I see you're using Date.now() to calculate the delta. Instead, use the first argument given to you by requestAnimationFrame for higher resolution, which is a DOMHighResTimeStamp[0]

[0] https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResT...


Just curious, what benefits do you see using a 280Hz refresh rate?


The benefits are mostly realised when playing games:

* Higher refresh rates means more frames can be displayed each second by the monitor

* Lower latency between some input action (mouse, keyboard) and the frame being drawn on the monitor (provided your game can run at a matching number of frames per second; FPS)

* Synching your FPS to refresh rate (e.g. if you're game can run at a locked 280fps and your monitor is running at 280hz) will remove tearing and provide a very smooth experience

On the desktop the benefits are less pronounced: Everything just feels a bit smoother, like moving your mouse point/open windows around the monitor.

Such high refresh rate displays normally aren't very colour accurate when compared to displays used for media editing.


This is funny. I feel this could evolve into a different game based on the number of players:

1 Player = Almost Pong

2 Players = Pong

3 Players = Pong + Almost Pong


3-player pong: two people control the paddle, one person controls the ball — switch off every time a point is scored? sounds like fun!


with no indicators to which player is controlling which object before the ball drops would cause another level of chaos in the fun


and player roles should randomly rotate


Hey! Your 12 games in 12 weeks thing (back in ...2014? Jesus, time flies) was what got me into HTML5 game dev! So I wanted to say thank you for the inspiration :)

I especially appreciate the "loads no assets" aspect. I will take a look at the code in the morning!

p.s. have you considered the name "Flappy Pong"?


That's awesome to hear! And yes my "one game per week" challenge was in 2014.

This game was definitely inspired by Flappy Bird, but no I didn't think about that name before today.


I'm having a hard time believing it but Flappy Bird was launched over 8 years ago in 2013!


Really fun and addictive. I would extend the screen downwards so there is a clickable area that is not part of the play area. Then you will be able to see what is going on better. Just an idea.


Yeah, on mobile my thumb blocking the paddle made it much harder, which led to me clicking the extreme side until I accidentally opened my side bars and lost.


That's a good point. I'll see what I can do about this, thanks!


It would be great if tapping anywhere on the page made the ball jump.


This was pretty fun to play. Half way through the game I realised this was like flappy birds but within one screen. In saying that, this felt more fun to me because the space between each challenges was bigger, letting me I feel like I was more in control.


Yes, I was definitely inspired by Flappy Bird for this game. I could have called it Flappy Pong I guess.


I came to the comment section just to say that I was surprised this wasn't called Flappy Pong.

Nice game!


Pongy McPongface


I also saw the Flappy Pong similarties.


Be careful, especially if you do anything commercial with this: "Pong" is trademarked by Atari. Fun game, but might need to choose a different name...


“Not Trademarked Pong” would be the snarky name for it. But probably wouldn’t hold up in court.


This issue took down PlasmaPong: https://en.m.wikipedia.org/wiki/Plasma_Pong


Call it Ping then.


Call it "Bong" because in "Pong" you control the [P]addles but in "Bong" you control the [B]all. Is that too close to the trademark, though?


I find it fun to write scripts to play games like this, here's my solution:

    setInterval(() => {
      function jump() {
        function fireSpaceBarToDocumentElement(eventName) {
          const SPACE_BAR = 32
          const ev = new KeyboardEvent(eventName, { bubbles: true, keyCode: SPACE_BAR })
          document.documentElement.dispatchEvent(ev)
        }

        fireSpaceBarToDocumentElement('keydown')
        fireSpaceBarToDocumentElement('keyup')
      }

      function shouldJump() {
        function goingLeft() { return ball.speedX < 0 }
        function goingRight() { return ball.speedX > 0 }
        function leftPaddleAboveBall() { return ball.y < paddle1.y }
        function rightPaddleAboveBall() { return ball.y < paddle2.y }
        if (goingLeft() && leftPaddleAboveBall()) return true
        if (goingRight() && rightPaddleAboveBall()) return true
        return false
      }

      if (shouldJump()) jump()
    }, 1)


I'm working on a game right now, and one of my roadblocks is how to handle the myriad of resolutions, aspect ratios, and portrait vs landscape modes, plus the overriding some mobile browsers do for touch (scrolling the screen, etc). What has been your approach to consolidating all of those differences so a game "just works" on all platforms?


Use the source[0], Luke...

0: https://d33wubrfki0l68.cloudfront.net/bundles/72f7c09a3e8485...


My best score at Almost Pong is 49! https://www.lessmilk.com/almost-pong/

Good game! I had fun playing it.


Ha! I read the instructions and did exactly what it said. Hit space once and the "ball" started to move on non-touch device, I was trying to figure out how to move the paddles so continuously kept watching the ball drop with 0 score. I was halfway convinced that it was a joke game (which would have been pretty clever).


yes, to the game creator, you should clarify that, happened the same to me. Something like "keep tapping spacebar"


Very nice. Well done. I love takes like this which subvert the ideas from the old classics. Reminds of of http://hcs64.com/efp.html which is Pong but from the balls point of view.


Missed the chance to name it Flappy Pong


Pongy Ball


Flappy Ball


Pongy Flap


Phong


blinn


Flong


Good Job, I hate you for tempting me to play more.

I'm afraid to play more because I think a bunch of random objects will pop up and make me go crazy, and its a little too late at night for me to start doing that and get sucked into something.

Otherwise excellent execution, and I think you pulled off a nice, simple runner style game with a classic look and good polish!


This has THE MOST satisfying sounds of any game I've ever played


Another game he made, also has an epic soundtrack: https://www.lessmilk.com/gravity-snake/


Bug report: On an iphone with text size larger than default, you can’t see the whole game area. I read with text at 115% (hit the “aA” next to the url on the mobile browser to access font size), so it took me a while to even realize there was supposed to be another paddle on the right side that was off screen.


Reminds me very much of AdamAtomic's Flappy Jam entry [1] that was later cloned as a fairly popular mobile game called Don't Touch The Spikes

[1] https://haxeflixel.com/demos/Flappybalt/


You have about 48h to be the first to put it in a mobile app store if you're into that. Cool concept!


This is fantastic! I love it. "I don't even like video games" :D

Having the experience of fail, score 1, score 1, score 14,... is really fun. I think it has just the right mix of difficulty/friction and reward, such that it's pretty easy to get success once you "lock in".

I'd be curious what your creative process is, if you start with a goal idea and then code to build it, or if you go the opposite direction, starting with what can be built and seeing how to make something fun out of it. I've never written any games, though it's something I think about.


Cant belive your project of making a game a week was 8 years ago. it was such a nice project! Over the years lessmilk stuck in my mind as a example of a very cool project that also made some money.


Cool gameplay loop! Lots of short jumps makes it easier. Maybe change it so that every time a paddle is hit the player gets 10 points but looses a point every time they jump.


Cool game!

It would be even better if every time you hit the paddles the speed increases, this way it becomes more difficult with time and makes the game less boring.


The game does increase in difficulty (shrinking paddles, increased speed).


My immediate reaction was pong + flappy bird. I think the execution, engagement and yes, frustration, matches your intended goals, so good job!


It's really hard to play on the phone. At first I kept tapping on the links below the game when I focused more on the game and less on my finger position. After I got used to tapping a bit higher and not letting my finger slip down I got another problem: when the paddle was really low, my thumb would block the view so I couldn't see the paddle or the ball.


Reminds me of qomp by Stuffed Wombat (“You are the Ball. Escape.”).

https://store.steampowered.com/app/1066900/qomp/

https://twitter.com/wombatstuff


Haha nice. Hard to play on my QMK based keyboard, probably because I mapped space to be ctrl if hold and that causes some latency


One thing to consider to increase the difficulty is to make jumping add to the vertical velocity a la flappy bird, rather than fix it to a certain positive vertical velocity. Right now a reliable strategy is to let the ball fall to a certain angle below the paddle, then spam jump to get a fixed trajectory to the paddle.


I disagree with this. I think it is fun as is


I think it's just fine as it. The paddle gets smaller and the ball gets faster so it becomes more challenging to do that.


It's incredible how in a matter of minutes the game becomes so much simpler compared to the first times.


HAHAH, Fun little thing I did with this fabulous game was... I'm running a userscript. The game isn't VISIBLE. How far can you get, only with SOUND? cough I gave up pretty quick. But kinda an intriguing thought experiment!


On mobile, it would be useful if the tap area was extended below the board by an inch or so.


The highest I got was 20, having to stop as I could spend an hour on this.

Fun experiment for simple games like this: Play this game every day just for 5-10 rounds before bed and in the morning. You'll get a little better every time you get sleep.


This has a real chance to be a successful mobile game, if I were you I may start thinking about an app. Every project has to stop somewhere, though, so leaving it as a fun little game in the browser would be fine too!


It is a mobile game. Used to play it years ago. Different style, but same idea. https://apps.apple.com/us/app/dont-touch-the-spikes/id895942...


There's gotta be some law about the finite set of "truly different" mobile games that can be created - forget oil: the real disappearing resource is game concepts!


This is a lot of fun! I can’t wait until this gets released on the Atari 2600!


Wow, the parabolic motion for this is spot-on. It seems you faithfully reproduced s=(a*t^2)/2, or got extremely close to it - very impressive :) It's also very responsive.

(max score of 47 on macOS Safari)


My best score at Almost Pong is 34! https://www.lessmilk.com/almost-pong/


Is the name a nod to Almost Pizza https://www.youtube.com/watch?v=KLHRjaUBb3o ?


Missed a golden opportunity to name it "Flappy Pong".


This is a really cool idea, it has flappy bird vibes. The only complaint is that it's a bit too easy and gets boring after a while because there's no challenge.


Great game! On mobile my finger naturally drifted toward the bottom of the hit pad for visibility and I ended up clicking the link below it a couple times. Disappointing. :(


I really like this one. My hope is that the upcoming Play date console would be full of these kinds of “I have 30 seconds and want to play a game” jewels.


Reminds me of one of the standard version Easter eggs in Android a few versions ago was a game with this exact same 'press to make float' action


Android Lollipop (5.0) easter egg game https://youtu.be/pTuJztsquzE

Yes, I guess also inspired by Flappy Bird.


Fun game. On the mobile it would be great if I could tap anywhere on the screen and not just the black area as my thumb obscured the paddles sometimes.


And in 1 week from now AppStore will be full of clones.


His other games didn't load on firefox for me.


A lot of fun! What might also be fun is if you could hold space / mouse 1 to «charge» the jump so that you jump higher if you hold.


73 on my first try :)

https://i.imgur.com/2M6ce5h.jpg


This is excellent, creative and could also serve as a much less boring than pong project for starting reinforcement learning.


You don't need RL to compute the trajectory of a falling object.


Nice! What a fun little game. Ended up with 36, and I feel like after 30, the bars stopped getting smaller, not sure though.


Thanks for looking like a dump ass to my coworkers for hammering my mechanical space-bar for 5 minutes strait......


These games are so much fun (I'm talking about your other games too). Especially loved gravity snake and square


Cool.

Would be handy if the main page indicated which games were mobile capable so you didn't have to click through to find out.


Great game.

Now to modernize it ; NFT ball colors! and store every successful bounce in a blockchain! Grandma will get it. haha


Can anyone hear audio on mobile? I’ve tried it with both safari and chrome on iPhone and it’s completely mute


Works for me in Firefox Android.


For more fun you should play it on the beats of "another brick in the wall" (with some beats skips).


Fun game! Also Kudos for the "Wordle"-esque share function, i.e. no stupid Twitter or Facebook.


* flappy pong *


FYI: Your old games (Run, Pixel War etc.) seem to not work in firefox for me while they work in safari.


Hah! I recognize this website from the “one game a week” stuff a while back. Had some fun playing those.


This is awesome! I did however accidentally click on the links below the game, ruining my streak


I think I'm too old to do any better, I got 29. What a neat little idea, very clever!


Flappy Pong. Fun stuff! Well done


flappy pong!

Great game-feel and sound.

Only complaint is a standard one: on mobile, your thumb obscures the play area. Maybe have a surrounding area be touch sensitive? Or say it's part of the challenge, to switch thumbs, like you're playing both sides...


Gnop


Very good! The secret is to focus the eyesight on the target, not the ball


Nice..

minor feedback...sometimes I mistakenly tap `Follow Me on twitter` which opens up twitter app :(


First 5 attempts I couldn't make it past 4, after that I could get to 20 :D


Next I would like to play a basketball game where I play as the basketball.


Pong meets Flappy bird. Nice.


Very cool!

Brought back old memories of the "Paddle War" in Commander Keen.


amazing Little game and other games are also next level.

I will feature this in upcoming issue of https://proddducts.com


I have no idea why your games make me laugh so much when I play them.


I dont know why but I love one button games, really enjoyed it cheers


That's lovely, thank you. I just laughed out loud playing it.


Just burnt my hour playing this. Goes on to say how awesome it is.


OK, well done but boy I'm really bad at playing games. ha ha


Gosh that was fun to play! Thank you so much for sharing.


Gravity Snake is great!


This is addicting! Make it a mobile app! (Should be simple with Unity) Create a launching website, add branding (keep it simple)

And ad a daily challenge / and allow users to share it. 80% sure your game will grow fast in MAU


>Make it a mobile app!

May I ask why? Like Wordle, this game seems perfect for the web browser. Not every game needs to be an app; virtually all mobile browsers allow you to shortcut a website to your phone's dashboard. Wordle demonstrates the general public is still perfectly happy to access a web based game.

I also can't see need to rewrite it in a fully fledged game engine, such as Unity? That seems to me to add a lot of overhead for what is a really simple game.


Retention and engagement is much higher in mobile apps. Allowing you to get a much higher ARPU. Especially for games with In App Purchases.


Why does it need to be monetised?


I was under the impression the game was built with a game engine thus allowing easy rollout to mobile without having to rewrite.


What we really need is a backstory for the ball. How did it end up between these two paddles? Why does it want to hit them? What happens when it goes into the void? What sort of love interest might a ball have?


This is such a good take on a classic. I love it!


Nice. Simple and fun for a few minutes. I got 45


This is kind of brilliant

Great fun


Great thinking outside the box on a classic!


29 on fifth try, on iPhone Safari. Love it!


best score was 21. my strategy was to keep the 'ball' as low as possible until it came time to hit the paddle.

Nice Work!


Flappy Balls... Like mine in old age ...


This is great, I love it. Max score of 20.


Cool game! Also has an addictive element.


Congrats for the dead simple creativity!


Awesome work! Super fun to burn 10mins on


I applaud this, simply devilishly hard.


I like it. Also the sounds are neat.


If you can get the sounds to speed up, it sounds like the WOPR playing tic-tac-toe


It's got a good feel to it.


love seeing this kind of thing, a simple concept perfectly executed


why does this have so many upvotes???????????????????????????


Why does this have so many question marks? Some things shouldn't be explained.


ah, i see, the game is much better when you don't have a 165hz monitor. maybe fix that. lol


This is brilliant.


Fun game. Love it


Flapping Pong?


this is awesome!


I made it to 7.


Source code?


https://d33wubrfki0l68.cloudfront.net/bundles/72f7c09a3e8485...

Although nowadays if people don't see a GitHub link they think there is no source code available.


Nice bit of readable code.


are you asking for the source code to a webpage?


Yes, might sound like a stupid question, but since most website use heavy minification nowadays it could make sense.

But still he could just have taken a look into the DevTools


very nice, it needs full screen


Great game!


Genius.


ctrl+f "flappy pong"

7 hits

yep


26


27


39


61


10


32


19


30




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: