infini-footy ⚽️

Monday, July 12, 2021

Back in April when I tried making a Jackbox-style game, I mentioned that I was probably doing it "wrong", because after the fact I learned about Socket.io. Socket.io is a framework that enables realtime communication between your server and one or more clients, meaning that you can send the same information to everyone connected to your app at the same time. This lets you build things like a chatroom super easily, and that's actually their first demo. Teams like Jackbox use it to facilitate the "room" behavior, which I was trying to emulate with repeated database queries, efficiently enough to support their tens of thousands of simultaneous users.

A couple weeks ago, I finally gave it a try! While the chat demo waits for someone to start typing before sending information out, I wanted to see what would happen if we wanted to play a game with persistent elements, meaning we needed to keep all clients updated at all times. Because the whole country has had football on the brain, here's what I came up with:

Click here to play infini-footy

infini-footy is a persistent football game for potentially hundreds of players (I'm not sure how many it will take to break), using Glitch and Socket.io. You can check out the source code here.

When the server starts up, it begins sending an "update" event to everyone viewing the page. In it, we include an array of each player's currently position and trajectory, and the position and trajectory of the ball. Unlike the chat demo, we repeat that "update" event every 0.033 seconds, to simulate animation on the client's end by giving them 30 "frames" per second. Every "frame" prompts each player to automatically send back their position and trajectory, so that it can be shared with the other players. The ball is then handled on the server's end, checking to see whether it collides with any players, and whether any goals have been scored.

All in all, I'm pretty happy with how this turned out! It only took a few hours over a weekend, most of which was sorting out how to draw shapes in a canvas element correctly. I've been working on some more advanced progressions of this, as well, one of which you can see here. With a little extra work to add a database and some more gameplay elements, it looks like this may even let us set up a tiny browser-based MMORPG, just using Javascript.