Creating an online multiplayer web game using Socket.io and Quintus Part 2

In the previous post, I talked about how to set up Quintus and Node.js for a simple single player web game. Unfortunately, because we’re coding up a game of tag, keeping our game single player doesn’t make all that much sense.

Socket.io

Listening for connections/disconnects

We’ll write the code to monitor connections and disconnects on our server-side app.js:

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
app.get('/', function(req, res){
res.render('/index.html');
});
var playerCount = 0;
var id = 0;
io.on('connection', function (socket) {
playerCount++;
id++;
setTimeout(function () {
socket.emit('connected', { playerId: id });
io.emit('count', { playerCount: playerCount });
}, 1500);
socket.on('disconnect', function () {
playerCount--;
io.emit('count', { playerCount: playerCount });
});
});
server.listen(80);
console.log("Multiplayer app listening on port 80");

Lines 6-7: Declaring variables that are used to track the number of players and assign a unique id for each player respectively.

Lines 12-15: We wrap these socket emit events in a timeout because if a connection event was fired to the user right when they started connecting to the webpage, they wouldn’t have loaded the proper javascript files yet and the event wouldn’t do anything. A 1.5 second delay on connection gives a nice buffer time.

Read More

Creating an online multiplayer web game using Socket.io and Quintus Part 1

One of my coworkers introduced me to Quintus, a young Javascript engine that makes developing simple games a breeze. In this multipart tutorial I’ll be showing you how to combine Quintus with Socket.io to make a simple multiplayer game.

Installation and setup

Node.js

We’ll be using Node.js for our runtime environment. It’s super fast to pick up and start developing with, and works great for our multiplayer game. If you don’t yet have it installed, go to their website for the installation link.

Getting the proper node modules

Now that we have Node.js installed, let’s create the folder where our game will be located.

1
2
$ mkdir quintus-tag
$ cd quintus-tag

Once inside, we’ll create a package.json file, which will hold information about our Node.js application.

package.json
1
2
3
4
5
6
7
8
9
10
{
"repository": {
"type": "git",
"url": "git@github.com:mliu95/quintus-tag.git"
},
"name": "quintus-tag",
"author": "Michael Liu",
"version": "0.0.1",
"dependencies": {}
}

Now to install express and socket.io, which will handle the routing/server and multiplayer respectively.

1
2
$ npm install --save express
$ npm install --save socket.io

By including the --save in our install calls, our package.json file will automatically update its dependencies object.

Now that we have our necessary modules, let’s set up our webserver with Express and Socket.io…

Read More

Hello, World! It's Michael.

This is my small piece of the internet, where I plan to write whatever I deem appropriate for a blog. I’m currently a rising sophomore at Virginia Tech studying computer science and business. I’ll keep this intro short, so come take a look around and let me know what you think!