vnglst/pong-wars

Pong Wars

It's the eternal battle between day and night, good and bad. Written in JavaScript with some HTML & CSS in one index.html. Feel free to reuse the code and create your own version.

preview.mov

Development

Run:

npx serve

Open up the link and you're ready to start.

Credits

I saw this first here, but it appears to be a much older idea. There's some more information on the history in the Hacknernews discussion.

The colors are based on the Mindful Palette by Alex Cristache.

Submitting PRs

I love getting feedback and PRs with improvements for this, but I also want to keep this simple and the code minimal. If you want to extend the game, feel free to create your own. If you found a way to improve the collision detection (or a better way to add some randomness), feel free to open a PR.

Links

• Original post on Mastodon: https://hachyderm.io/@vnglst/111828811496422610
• On Twitter: https://twitter.com/vnglst/status/1751278052154179770

Alternate version

If you've created an alternate version of Pong Wars and would like to share it, please feel free to create a pull request to add the link here.

The alternate versions are listed below in alphabetical order:

• ASCII Python
• Atari 2600
• BBC Micro Bot
• C version
• C# (Cross-platform on iOS, Android, WebAssembly, MacOS, Linux, and Windows)
• C# with DIKUArcade
• C++
• C++ with SFML
• Earlier version with padels
• Eternal Bounce Battle (GDevelop)
• Flutter
• Godot
• Gold Wars (This version has an end!)
• Java
• Kotlin/Wasm
• Land-Or-Water
• Pico8
• Pong-Wars Fireballs
• Processing
• Pygame version
• Python
• React Native
• Rust/Wasm
• Scratch
• Seasons Pong
• Swift (SpriteKit)
• Tag-Team (Live)
• Yin-Yang Pong
• Ying Yang

pong-wars's Issues

Missing break?

Hey, just curious, aren’t you lacking a break or something here? What if multiple angles produce a match?

pong-wars/index.html

Line 143 in d232625

}

At high speed, colision detection misses blocks

With a sufficiently fast velocity (easily obtained with long runtimes), balls will phase through blocks entirely.
I speculate that this happens when the velocity of the ball is greater than one block size per frame, but I haven't read the code to see how collision checks work.
Checking for blocks between the last position and the current position would help prevent such warping.

Which license applied?

Balls are stuck in mirror positions at intersection point

Left it on for about 30 minutes and it looks like the balls got stuck inside of each other's collision boxes.

Screen.Recording.2024-01-29.at.11.47.10.AM.mov

Replace day/night with yes/no

Replace day/night with yes/no and allow to put a query string as a title. Would result in the perfect link for no clear yes or no answer, the eternal battle. Possible titles: "Will we finish the project before the deadline?" "Will our client ever be happy with what we do?"

add a graph with scores over time

would be very pleasant

Speed varies

This might be intentional, but when the ball's direction vector is updated, it adds some randomness to both components, regardless of the ball's speed. Over time, this can result in some large speed differences, which in turn can result in very uneven distributions:

stuck in endless periodic loop :-(

After some time, the game goes into an endless periodic loop, so is stuck, as you can see in the screenshots and video:

Video: https://github.com/vnglst/pong-wars/assets/86577857/433db503-9c39-4765-897c-82fdde8943da

Screenshots:

Sometimes ball punches tunnel

After some time, one ball can be on a quite shallow angle. If it then bounces on the right spot on a wall (probably just on the edge between 2 bricks), it starts to dig itself in quite far instead of bouncing off.

Tapping the screen should speed up time

When it starts out, it's a bit boring. I tried tapping and holding my screen to speed up the simulation.

You could even make the left side of the screen reverse time...

keep it running for more than 2 hours and seems there is a bug

Pong.wars._.Koen.van.Gilst.-.Google.Chrome.2024-01-29.12-32-38.mp4

There are some blocks that are transparent and will not cause rebounce...

Night punches in more squares, making it always dominate.

Night always punches in more squares than day, regardless of x,y or dx,dy, making it always the winning side.