roadeo

2018

(no longer) playable at game.hakron.io

How it started

roadeo began as a school project for a Computer Networks class, demonstrating basic WebSocket communication. I had the idea to make an online game like agar.io a couple months before that, and decieded a school project was a good excuse to start it, two birds with one stone etc. etc.

The name "roadeo" actually came from my friend, whom I paid $0.99 to send me a long lists of posible names, all of which had to be short, easy to say/spell, and were somewhat similar to agar.io.

I hadn't messed with WebSockets prior to this, and thought socket.io looked appealing (and easy). So I looked up some tutorials and worked on sending the basic movement of the little circles between client/server, and had a little game before I knew it.

How it works

The main goal of the game is to use the arrow keys / WASD to move your little circle man to get the bigger gold circle, or coin if you want to look at it that way. If you collided with it, it would respawn somewhere else and you would get a point.

I used HTML5 canvas to very simply draw things to the screen, and updated/handled all the movement with javascript.

The concept of 1 minute rounds and 20 second breaks came when I modified the game for HAkron uses. I forked the project and added a couple other features including round/break, and also a player/watcher mode where you could either join as a player and you'd have to look at a separate device's watcher screen to see your character move, or join as a watcher and just see all the players zoomin' around. This was good for demonstrations where a main projector or monitor could have a watcher screen, and you could control your character from your phone.

All player movement happens client-side, and player position is sent constantly to the servrer, which collects all player and goal positions, then pushes them out to all players.

All other game mechanics like the round/break cycle, update messages in the bottom left, and general debugging console logs are done server-side.

Problems I ran into

Being my first online multiplayer game, I had to make a lot of decisions as to what events should happen on the client, and what should happen on the server.

One of the first things I tried was having just the player inputs sent to the server, then the server returning a player position. This didn't work, because there's a good 10-30ms delay in sending a message from the client to the server, so multiply that by 2 and you get 20-60ms delay between when you press the right arrow and when your character actually goes right.

Another similar conflict was collision detection. Because of the same problem, I ended up doing collision detection on the client-side. If it was done on the server, then you would be well inside the "coin" before your screen updated with a new goal and a point for you, because of that same 20-60ms delay. I ended up having to do collision checking client-side, gneerate a new goal position, and have that sent to the server.

Because of the latter, there still exists a bug where 2 players can get the same goal. If a second player collides with the goal in that 20-60ms window that the server is still processing the last player's goal and sending out the new goal position, then that second player can also get a point, and send the server another new goal position.

This can be solved by "locking" the goal when it receives the first player's collision, so when the second one comes through, it doesn't give that player a point and doesn't take the new goal position it sends it. I haven't implemented this yet, but will if I ever keep developing the game.

Conclusions

Developing this game has taught me a lot about game design and WebSockets. I plan to continue making improvements and adding game mechanics (see the GitLab repo issue list) and possibly making an app out of it or hosting it on its own website, maybe roadeo.io. I should really change the name though.