GUNPONG is inspired by the classic arcade game Pong, with our own little creative twist and unique implementation that makes it both a great multiplayer game and an innovative use of the real-time Gun database.

What it does

GUNPONG is a simple multiplayer game that can be visited in a web browser and played with the arrow keys. The objective of the game is to keep the ball from escaping a small circle with a paddle that follows a rotary track around the circle. Many players join this game and are able to participate with the real-time syncing made possible with Gun.

How we built it

Most of us having extensive web development experience, we decided to write the game entirely in JavaScript, a decision that would later make it very difficult for us to implement the physics we required on the game. It is built on top of the Phaser.js 2D game framework using the P2 Physics Engine with a Node backend that serves a Gun database that updates all clients instantaneously with the positions of the new ball.

Challenges we ran into

JavaScript gaming frameworks being what they are, we struggled to find a framework that allowed us to create a custom collision bounding box on our uniquely circular paddle. As a result, we had to scrap a different implementation of our game that used Quintus and learn Phaser, which none of us had prior experience in. Another challenge was the math and physics involved in calculating angular velocities off of the paddle, since in Pong, each hit from the paddle sets the ball in a new direction based on the part of the paddle it hits. In GUNPONG, not only did we need to find the angle that the ball needed to leave the paddle, but we needed to recalculate this for every hit at a different rotation, since the coordinates at any point were not nearly as reliable as a vertical paddle. The only thing that could have made this more difficult would have been to write this in whitespace.

Accomplishments that we're proud of

We were proud of being able to leverage Gun's unique real-time, decentralized database syncing with our unique use case of pushing position data quickly across all clients. Because Gun is fully peer-to-peer, it met our needs perfectly and was able to dynamically update all of the positions of the paddle between different players without compromising on speed or relying on other connections.

What we learned

We went from being completely unfamiliar with Phaser.js to using different physics engines and complex sprite sheets and undocumented features. Michael, with the help of Mark from Gun (whom without this project would have been impossible), learned a lot about Gun's backend features and technology, even finding a couple of quirks along the way!

What's next for GUNPONG

GUNPONG could be improved by using more accurate models for the paddle and ball, since what we have right now is a very rough approximation.

"paddle": [{
            "density": 2, "friction": 0, "bounce": 0, 
            "filter": { "categoryBits": 1, "maskBits": 65535 },
            "shape": [   301, 44.5  ,  276, 32.5  ,  259, 4.5  ,  292, 15.5  ,  311.5, 26  ]
        } ,

Built With

Share this project: