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.