Code Tutorials

Websockets & HTML5 Canvas = Browser Multiplayer Game?!

I followed this tutorial and it was a total breeze to setup a basic server/client system where players can join and see each other move around:

This guy called Rob Hawkes wrote the article. I didn't know who he was at first but as it turns out, he was one of the authors of Canvas and used to work with Mozilla. The code is super simple and he explains each step very well. If you ever get stuck, you can download the final source code as reference too.

The hardest part was setting up the Node.js server, but thats only because I'm doing this on Ubuntu. Otherwise it was a short clean run to the end. The tutorial took about an hour and leaves you with enough knowledge to make some pretty complicated shit. 5 stars all round from me.

So, whats the deal with all of this? What's each part and what the heck is it for?

Canvas: Is a HTML5 element where you can setup some drawing type of work to be done(2d/3d), ask the users GPU to process it and then display it here. In lamens terms, it spits pixels to a small region of your screen. We are going to use this render our game. This is a bunch times faster then drawing with Javascript using DOM elements (html elements) and in most cases SVG.

Web Sockets: This is a cool thing that helps connect a server to a client and maintain the connection. That way they can send data back and fourth to each other without too much complication. We are going to use this to send information about the game (players co-ordinates, whether a player joins/disconnects, etc).

Node.js: This is the server backend code in a way. Using this as a base we install one of its packages '' and that is how we deal with our web sockets. Once you have this installed and running, its super easy to include web socket code into your project.

Game Logic: Its all in Javascript, which is one of the easiest and most powerful coding languages out there. Then the sky is the limit. Make some crazy ass shit, connect it to a database via PHP or integrate some web APIs like Facebook or Twitter. Go mental!

So I guess from here my goal is to make something with it. Stay tuned for that :D


Joomla BJ Metis template by