The making of Snowballs

Insight: The making of Snowballs

Using node.js to create something fun

Posted on December 17th, 2012 by Bob Kreefft

Last week we released our special Christmas game Snowballs. Every year we try to create something fun in a minimum amount of time. This year we limited ourselves to two evenings of work, in which we transformed our earlier created supersnak.es game into a simple snowball throwing game. A frequently asked question we got from you is how it's all made. In this post I will explain how the magic works. Please note that this is not a walkthrough, but more of an insight.

There are three pieces of JavaScript working at the same time: one on your computer (the game), one on your smartphone (the controller) and one on the node.js server (the communication between the other two). For those of you who are not familiar with it: node.js is server software which allows very fast bi-directional communication, for use with WebSockets (open connections between host and client).

So, how does this all work together? Let's start by looking at the game itself. When you open it on your computer, all the necessary components are being loaded: the graphics, a HTML5 canvas, and the game JavaScript. As soon as this is ready, a connection with the node.js server made through a WebSocket (we use socket.io to make this really really easy), and we request the server to create a new "room" (we get to this concept in a moment). The server responds with the 4-digit code of the created room, which we then display on the screen.

From this point on, it's possible to connect with the game. So let's take a look at the controller. When you open it up on your phone and enter the code you see on your computer, a WebSocket connection is being made, just like we did before on your computer. This time we request the node.js server to add us to the room with the code we have. The server tells us whether or not this room exists, after which you enter your name, and your controller is added to the room.

An important thing to know is that your computer and your phone are not really connected to each other. They are both only connected to the server, which ties them together through the concept of rooms I talked about. A room is actually a simple JavaScript object, containing a unique code and references to the game host and controllers. It can send and receive messages and pass them through. So when you tap the red "shooting" button on the controller, it sends "throwSnowball" to the server. The server passes this command through to the game in the same room, and the game executes the command.

And that's it! Using this technique, all commands from join 'till disconnect can be passed through, and the game logic is doing the rest. Now of course a lot of things could be further improved in our game. For example, instead of using our own supersnak.es code, we could probably better use some existing game framework. However, it's just a fun side-project, done in two evenings work. So I think we shouldn't be too critical in this case.

I hope this clears things up a little bit but feel free to drop your questions in the comments below.

Bob Kreefft - Interactive Developer

Bob has great interest in concept development and new technologies and loves to bring them closer to the people.

See more posts from Bob

Comments on The making of Snowballs

Go to the blog overview
Go to the blog overview