Hi HN!<p>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.<p>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.<p>Happy to answer questions, and please let me know if you have any feedback on the game. Thanks!
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.
Let me use this thread to tell this somewhat related story of mine.<p>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.<p>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.<p>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 ;)<p>Back on the topic: love the implementation OP, pretty addictive. And, as can be read above, it brought back some nice memories.
"flappy badminton" - the shuttlecock aka a "birdie" is traditionally made with feathers <a href="https://wikipedia.org/wiki/Shuttlecock" rel="nofollow">https://wikipedia.org/wiki/Shuttlecock</a> )
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!
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.<p>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.<p>[0] <a href="https://www.cnet.com/tech/services-and-software/no-flappy-bird-developer-didnt-give-up-on-50000-a-day/" rel="nofollow">https://www.cnet.com/tech/services-and-software/no-flappy-bi...</a><p>[1] <a href="https://news.ycombinator.com/item?id=29921419" rel="nofollow">https://news.ycombinator.com/item?id=29921419</a>
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!<p>* <a href="https://news.ycombinator.com/pool" rel="nofollow">https://news.ycombinator.com/pool</a>, explained at <a href="https://news.ycombinator.com/item?id=26998308" rel="nofollow">https://news.ycombinator.com/item?id=26998308</a>
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.<p>Edit: oh wait, it's way more fun on Safari. On Firefox it feels slow and slugish, but on Safari it's great!
If this isn't working for you on Firefox, check that dom.webaudio.enabled isn't set to false.<p>If Web Audio is disabled then window.AudioContext is undefined, causing a crash:<p><pre><code> 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</code></pre>
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]<p>[0] <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResT...</a>
This is funny. I feel this could evolve into a different game based on the number of players:<p>1 Player = Almost Pong<p>2 Players = Pong<p>3 Players = Pong + Almost Pong
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 :)<p>I especially appreciate the "loads no assets" aspect. I will take a look at the code in the morning!<p>p.s. have you considered the name "Flappy Pong"?
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.
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.
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...
I find it fun to write scripts to play games like this, here's my solution:<p><pre><code> 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)</code></pre>
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?
My best score at Almost Pong is 49! <a href="https://www.lessmilk.com/almost-pong/" rel="nofollow">https://www.lessmilk.com/almost-pong/</a><p>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).
Very nice. Well done. I love takes like this which subvert the ideas from the old classics. Reminds of of <a href="http://hcs64.com/efp.html" rel="nofollow">http://hcs64.com/efp.html</a> which is Pong but from the balls point of view.
Good Job, I hate you for tempting me to play more.<p>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.<p>Otherwise excellent execution, and I think you pulled off a nice, simple runner style game with a classic look and good polish!
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<p>[1] <a href="https://haxeflixel.com/demos/Flappybalt/" rel="nofollow">https://haxeflixel.com/demos/Flappybalt/</a>
This is fantastic! I love it. "I don't even like video games" :D<p>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".<p>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!<p>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.
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.”).<p><a href="https://store.steampowered.com/app/1066900/qomp/" rel="nofollow">https://store.steampowered.com/app/1066900/qomp/</a><p><a href="https://twitter.com/wombatstuff" rel="nofollow">https://twitter.com/wombatstuff</a>
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.
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? <i>cough</i> I gave up pretty quick. But kinda an intriguing thought experiment!
The highest I got was 20, having to stop as I could spend an hour on this.<p>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!
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.<p>(max score of 47 on macOS Safari)
My best score at Almost Pong is 34! <a href="https://www.lessmilk.com/almost-pong/" rel="nofollow">https://www.lessmilk.com/almost-pong/</a>
Is the name a nod to Almost Pizza <a href="https://www.youtube.com/watch?v=KLHRjaUBb3o" rel="nofollow">https://www.youtube.com/watch?v=KLHRjaUBb3o</a> ?
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
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.
flappy pong!<p>Great game-feel and sound.<p>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...
amazing Little game and other games are also next level.<p>I will feature this in upcoming issue of <a href="https://proddducts.com" rel="nofollow">https://proddducts.com</a>
This is addicting!
Make it a mobile app! (Should be simple with Unity)
Create a launching website, add branding (keep it simple)<p>And ad a daily challenge / and allow users to share it.
80% sure your game will grow fast in MAU