Michal Paszkiewicz
Blog
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!
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
Great, now we can get started coding!
Generate an ID for yourself, preferably a random number and create a peer.
Create an object to hold your connected peers.
Select what happens on the opening event of your peer connection.
Tell your program what should happen when a peer connects.
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.
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.
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.
And eachActiveConnection() is defined as follows, from divs containing IDs of connected peers:
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.
A game of go built with PeerJS
LinkSo 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.
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.
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.
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.
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!