Michal Paszkiewicz


How to create a multiplayer game with Peer JS

Peer JS is a cool tool for connecting two browsers using Web RTC. What does this mean? This means we can easily connect two browsers without needing to handle all the date in a server in between. Sure, we still need a server to handle the IDs and connections of the browsers, but so long as you don't expect your app to have more than 50 connections, you can use the cloud based API that PeerJS provides for free. Awesome!

If you expect more than 50 connections, you can of course pay some money to have access to the more advanced versions of the API, but they also detail how you can easily create your own server to do what their API does! On top of all this, its all open source and we can look at it all on GitHub.

A cool example to study before embarking on creating your game is this chat app. Not bad, eh?

Connecting through Peer JS

First of all, you will need to include Peer js!

Including peerjs in your project

Next you will need to connect to the peer js API (for free!!), or create your own server. here we will show what it looks like when you connect to the api

Connecting to peerjs API

Great, now we can get started coding!

Generate an ID for yourself, preferably a random number and create a peer.

Create a peer js peer!

Create an object to hold your connected peers.

Create object for connecting peers

Select what happens on the opening event of your peer connection.

Make stuff happen on the peer 'open' event

Tell your program what should happen when a peer connects.

Make stuff happen on peer 'connection' event

Define your connection function. Here I have defined what should happen when a peer connects, when he sends you some data, and when he closes the connection.

Define your connection function

Create an input textbox where you will put in your friend's id. Now, inside your $(document).ready() event, create actions, such as connecting to your friend using a button.

Connect to a friend on document ready event

Now add other functions to your $(document).ready() event. These can be anything, from sending messages so you can chat, or sending information on what your friend has clicked or pressed - this is where you can send updates on what is happening at the other player's side if you are creating a game. Here we show a quick example of how to send a quick message.

Send your friend a message via peer js

And eachActiveConnection() is defined as follows, from divs containing IDs of connected peers:

Define the each active connection function

Now you just need one more function to ensure you close your connection properly when you close your tab/window. This will ensure your friend knows you have left.

On close, destroy your peer!

A game of go built with PeerJS


So now, some details on how to create a basic game. I won't go too far into it, as you could keep working on this forever. If you would like to see my source code for my own project, it is here.

So, now that we have a working chat app, we now need to create a game. For a basic board game like noughts-and-crosses (tic-tac-toe) or go, we can start by creating a table in your html file. I have done this by just creating a table element, then I populate it with rows and cells via script, so I can later easily change the size of the table.

A function for creating a table/ changing table size

Once you have created your table, you will want to style it with css. In this example, I have added different images to the sides and corners, so when the table size is changed, the css will still create a beautiful board.

Peer JS game board CSS

Now all that you need to do is make things happen when you do something to the board.

Inside the document ready event, I have created an onClick event, that will send data when you click a td, and add a class to that particular td, that in this case will show up a white circle on the board.

td click javascript code

You can see here I am sending the td's id preceded by 'goMove='. To make something happen on the other player's table we now just need to add a function inside their connect function in the 'on data' event.

On data JS function

This will read the id and add the relevant class to the correct cell. Now you can add similar functions for other moves to allow all the options in the game, so you can play it!

The last things you might want to consider are whether you want to implement some rules in the program, to ensure noone does illegal moves and possibly some sort of security system whereby you ensure noone cheats by changing the code.

Good luck!