Sardines! - Jumping into Multiplayer Web Games - Part I

I didn't have any experience with working with NodeJS, or the various other JavaScript based servers. I also didn't have any experience in making games. When me and my roommates were brainstorming for winterim projects, one of the ideas that came up was using an iPhone as a controller for a game that would be played on your computer screen. There were a lot of directions that we could have gone with that, but I decided to start simple.

I created a new directory on my web server, and installed Node. I then used npm to include Socket.IO, a great piece of JS library for multiplayer connections, and Express, an essential library for using Node as a server. From there, I got started working on the most basic version. Using the main index.js file, I created a server on port 3000, and set it up so that based on the headers, you would either be served the mobile version of the site or the pc version of the site.

For the mobile site, I used NippleJS, a fantastic JS library albeit horribly named. This made it easy to create a customizable joystick. 50 times a second, the mobile site would send the current joystick data to the server. From the server, the information would get forwarded to all of the pc connected users.

On the PC side, it would update the position of a red box by using jQuery to edit the "top" and "right" css attributes. This worked, but it wasn't really interesting.

It needed to be spiced up. I was talking with my brother, he had the idea to make a game about fish! So, I loaded in some basic fish assets.

I then loaded in a fish icon, and a fish icon with just the body colored in, which would serve as a mask.

I made it so that when you connected on a phone, it would send a message to all of the pc's saying to create a fish with that image at the origin, and update its position whenever joystick data came in. All of the fish looked like this:

Unfortunately, the game was pretty laggy, the whole thing happened in DOM, and opening the game on multiple PC's would desync the fish's location. Additionally, it was difficult to tell which fish was which.

Read in part 2 about how I tackled these problems.