A simple multi-player online game (HTML5 + node.js) - Part II

Thursday, July 16, 2015

This is the second part of a 4 part series story where I describe what it took me to build a simple multiplayer online game, ([part 1](http://www.valyouw.com/2015/07/a-simple-multi-player-online-game-html5_77.html){_blank}).

## Intro
In this part we are going to dive into the code, obviously I wouldn't go over all the code but rather try to explain the concept, the code is well commented (I believe) so exploring it should be easy ([GitHub](http://github.com/ValYouW/SnakeMatch){_blank})

## Folder Structure
This is the entire project folders and files.
```
SnakeMatch
+-- common (client/Server shared files)
|   +-- game-objects (classes that represents the different game objects)
|   |   |-- board.js
|   |   |-- pellet.js
|   |   |-- snake-part.js (represent a single part of a snake)
|   |   |-- snake-head.js (represnt the snake head, inherits from snake-part)
|   |   |-- snake.js (represent the snake, a collection of snake-part and head)
|   |-- protocol.js (protocol functions for encoding / decoding messages)
|   |-- rectangle.js
+-- client (client code)
|     +-- deploy (holds the files for deploy)
|     +-- js
|       +-- lib
|       |   |-- graphics.js (functions for drawing on the canvas)
|       |   |-- util.js (Polyfill for necessary node.js util functions in the client)
|       |-- index.js (common client functions/enums, also declare our namespace on window)
|       |-- connector.js (responsible for sever communication)
|       |-- snake-engine.js (manages the game on the client)
|       |-- game-state.js (object to hold the current game state)
+-- server (server code)
|   +-- game
|   |   |-- snake-engine.js (manages the snake game on the server)
|   |   |-- match.js (manages a snake match between 2 players)
|   |   |-- player.js (represnts a single player, basically sending/receiving messages)
|   |-- server.js (starts the web server, our main file)
|   |-- lobby.js (manages client connections and pair players to matches)
|-- Gruntfile.js (grunt build tasks)
|-- .jshintrc (some jshint rules)
|-- package.json
```

## Common objects (Client + Server)
As described in the previous, the snake game is run on both the client and the server, hence there are parts of the code that can be shared (especially what we call "game objects").
Using JavaScript on the client and the server makes it very easy to share common classes, there are only few simple tweaks needed in order to make client code run in Node.js and vice versa (one could use [Browserify](http://browserify.org/){_blank}) but I've decided to go vanilla...
In order to not make a mess on the client we will use a namespace for our app, will call it `VYW`, it is declared on `index.js` as follow: `window.VYW = window.VYW || {};`.
The main difference between the browser and node.js is that node.js uses the `module.exports` object in order to export functions, while the browser uses the `window` object, so all we need is to make sure that our code knows on which object to export its functions.
We will make a use of Immediately-Invoked Function Expressions (IIFE) in order to create a closure and pass the correct "parent" object (note that we can inject any dependency we need into the module, see `util` in the example below).
```js
(function(parent, util) {
    function SomeClass(input) {
        var isArr = util.isArray(input);
    }
    ...
    ...

    // Export SomeClass on parent (this is either the module.exports object (server) or VYW object (client)
    parent.SomeClass = SomeClass;

// Pass the correct dependencies into the module, if window is undefined assume it is node.js, otherwise it's the browser
}(typeof window === 'undefined' ? module.exports : window.VYW,
  typeof window === 'undefined' ? require('util') : window.VYW.Util));
```
That's it, now this code can be used in the client as well as be required in node.js (of course that on the client we would have to create a `util` class that resembles the node.js util class).

## Game Objects
Snake is relatively a simple game, there are no many objects involved, we have the game Board, the Snake and the Pellets, under the `game-objects` folder we created a class to represent each of those.

### Board
The board class gives us methods to interact with the board (dah), as described in the first post, the board is divided into cells (boxes) with fixed size, so the `Board` class exposes methods that converts from box index to screen pixel and vice versa.
I include here the full file just to show how the IIFE looks like:
```js
(function(parent, Rectangle) {
    /**
     * Creates a new game board instance
     * @param {number} w - The board width
     * @param {number} h - The board height
     * @param {number} boxSize - The box size of each box on the board
     * @param {string} color - The board color
     * @param {string} borderColor - The board border color
     * @constructor
     */
    function Board(w, h, boxSize, color, borderColor) {
        this.rectangle = new Rectangle(0, 0, w, h);
        this.boxSize = boxSize;
        this.color = color;
        this.borderColor = borderColor || '#000000';

        // Hold the number of boxes we can have on the board on X/Y axis
        this.horizontalBoxes = Math.floor(this.rectangle.width / this.boxSize);
        this.verticalBoxes = Math.floor(this.rectangle.height / this.boxSize);
    }

    /**
     * Convert a box index to screen location
     * @param {number} boxIndex - A box index
     * @returns {Rectangle} The screen location on the box
     */
    Board.prototype.toScreen = function(boxIndex) {
        var y = Math.floor(boxIndex / this.horizontalBoxes) * this.boxSize;
        var x = (boxIndex % this.horizontalBoxes) * this.boxSize;
        return new Rectangle(x, y, this.boxSize, this.boxSize);
    };

    /**
     * Gets the box index of an x/y location
     * @param {number} x - The box x
     * @param {number} y - The box y
     * @returns {number} The box index on the board (box index run from 0 to the TotalNumberOfBoxes-1)
     */
    Board.prototype.toBoxIndex = function(x, y) {
        return Math.floor(y / this.boxSize) * this.horizontalBoxes + Math.floor(x / this.boxSize);
    };

    /**
     * Draws the board
     * @param {Graphics} graphics - The game graphics
     */
    Board.prototype.draw = function(graphics) {
        graphics.fillRectangle(this.rectangle,  this.color);
        graphics.drawRectangle(this.rectangle, this.borderColor);
    };

    parent.Board = Board;

// This file is shared between the client and the server, in case "window" is defined we assume it is the client
}(typeof window === 'undefined' ? module.exports : window.VYW,
  typeof window === 'undefined' ? require('../rectangle.js').Rectangle : window.VYW.Rectangle));
```

### Pellet
The pellet has no special logic what-so-ever, all it knows to do is to draw itself.

### Snake
The snake is our main object, we need the snake to know how to move, grow, change direction etc. 
How the snake moves? The snake keep moving in a certain direction until it is changed, on each step (update interval) it moves to the next box on the board, while the rest of the body just follows the head. In order for that to happen, we keep all the snake parts in a linked list, where each part has a reference to the part it is following, when a part `update` method is called, it saves his current location in a `prevLoaction` variable, and update its current location to the `prevLocation` of the part it is following.
Below are the interesting parts of the `Snake` class, note how in the constructor the initial snake is built as a linked-list.
```js
/**
 * Creates a new snake
 * @param {number} startX - The snake head X
 * @param {number} startY - The snake head Y
 * @param {number} partSize - The size of a single snake part
 * @param {number} length - The total number of parts of the snake
 * @param {Direction} direction - The direction of the snake
 * @param color
 * @constructor
 */
function Snake(startX, startY, partSize, length, direction, color) {
    /* @type {SnakePart[]} */
    this.parts = [];

    // Create the head
    var part = new SnakeHead(startX, startY, partSize, color);
    this.parts.push(part);
    ...
    ...
    // Create the rest of the snake body
    for (var i = 0; i < length - 1; ++i) {
        // Create the snake part, the last arg is the part it should follow
        part = new SnakePart(startX, startY, partSize, color, this.parts[this.parts.length-1]);
        this.parts.push(part);
    }
}

/**
 * Adds a new tail to the snake
 */
Snake.prototype.addTail = function() {
    var currTail = this.parts[this.parts.length-1];
    var newSnakeTail = new SnakePart(currTail.prevLocation.x, currTail.prevLocation.y, currTail.size, currTail.color, currTail);
    this.parts.push(newSnakeTail);
};

/**
 * Changes the snake direcion
 * @param {Protocol.Direction} newDir
 */
Snake.prototype.changeDirection = function(newDir) {
    if (newDir === this.direction) {
        return;
    }

    // Make sure we can do the change (can't do 180 degrees turns)
    if (newDir === protocol.Direction.Right && this.direction !== protocol.Direction.Left) {
        this.direction = newDir;
    } else if (newDir === protocol.Direction.Left && this.direction !== protocol.Direction.Right) {
        this.direction = newDir;
    } else if (newDir === protocol.Direction.Up && this.direction !== protocol.Direction.Down) {
        this.direction = newDir;
    } else if (newDir === protocol.Direction.Down && this.direction !== protocol.Direction.Up) {
        this.direction = newDir;
    }
};

/**
 * Updates the snake
 * @param {number} [newSize] - The new snake size
 */
Snake.prototype.update = function(newSize) {
    // Check if the snake grew
    if (newSize && newSize > this.parts.length) {
        this.addTail();
    }

    // Update the head first
    this.parts[0].update(this.direction);

    // Update the rest of the snake
    for (var i = 1; i < this.parts.length; ++i) {
        this.parts[i].update();
    }
};

/**
 * Draw the snake
 * @param {Graphics} graphics - The Graphics object
 */
Snake.prototype.draw = function(graphics) {
    for (var i = 0; i < this.parts.length; ++i) {
        this.parts[i].draw(graphics);
    }
};
```
And here is the update method of `snake-part`, note how it just follows the location of the part ahead of him.
```js
/**
 * Updates the snake state
 */
SnakePart.prototype.update = function() {
    // Save the current location as previous
    this.prevLocation = this.location.clone();

    // We are just followers here...
    if (this.following !== null) {
        this.location = this.following.prevLocation;
    }
};
```
### Don't lose you head
The snake head is slightly different, it is not following anyone, it inherits from `snake-part` and overrides its `update` method.
```js
function SnakeHead(x, y, size, color) {
    SnakePart.call(this, x, y, size, color);
    this.direction = null;
}
// Inherit from SnakePart
util.inherits(SnakeHead, SnakePart);

/**
 * Updates the snake head
 * @param {VYW.Direction} newDirection - A new direction for the snake
 */
SnakeHead.prototype.update = function(newDirection) {
    // Do the base update
    SnakePart.prototype.update.call(this);

    // Update location based on updated direction
    this.direction = newDirection;
    switch (this.direction) {
        case protocol.Direction.Right:
            this.location.x += this.size;
            break;
        case protocol.Direction.Left:
            this.location.x -= this.size;
            break;
        case protocol.Direction.Up:
            this.location.y -= this.size;
            break;
        case protocol.Direction.Down:
            this.location.y += this.size;
            break;
    }
};
```

## Protocol
The game is using a custom protocol (why? see the previous post) for messages, each message has a type (number), and some fields in a predefined order. A field can be either a primitive (number/bool etc), or an object.
Fields are separated by `#` where object properties are separated by `,` .
The general structure of a message is: `MsgType#field1#field2#objFieldProp1,objFieldProp2#field3#...`
For example this is how the update message is encoded:
```js
var updMessage = {
  type: 5,                     // Message type
  timeToEnd: 53,               // Time to game end
  directions: [ '6', '4' ],    // The directions each snake is heading
  sizes: [ 6, 6 ],             // The snake sizes
  pellets: [ 34, 21, 67, 54 ], // The cell indices where we have pellets
  score: [ 6, 5 ]              // The players score
};

var encoded = '5#53#6,4#6,6#34,21,67,54#6,5';
```
The Protocol module (`protocol.js`) is responsible for encoding/decoding messages, it starts with exposing some enums to be used by other modules:
```js
// Private constants
var DATA_SEP = '#',
    OBJ_SEP = ',';

/**
 * Player direction enum
 */
Protocol.Direction = {
    Up: '8',
    Right: '6',
    Down: '2',
    Left: '4'
};

/**
 * Game over reason
 */
Protocol.GameOverReason = {
    PeerDisconnect: '1',
    Collision: '2',
    End: '3'
};

/**
 * Server messages enum
 */
Protocol.Messages = {
    Pending: '1',
    Ready: '2',
    Steady: '3',
    Go: '4',
    Update: '5',
    GameOver: '6',
    ChangeDirection: '7'
};
```
Then we define a class for each message type with the relevant fields, all messages inherits from a base Message class (this is our data model).
```js
/**
 * Creates a new message
 * @param {string} type - The message type
 * @constructor
 */
function Message(type) {
    this.type = type;
}

/**
 * @constructor
 * @extends {Message}
 */
function GetReadyMessage() {
    Message.call(this, Protocol.Messages.Ready);
    this.playerIndex = 0;
    this.board = { width: 0, height: 0, cellSize: 0 };
    this.snake1 = { x: 0, y: 0, size: 0, direction: 0 };
    this.snake2 = { x: 0, y: 0, size: 0, direction: 0 };
}

/**
 * @constructor
 * @extends {Message}
 */
function SteadyMessage() {
    Message.call(this, Protocol.Messages.Steady);
    this.timeToStart = 0;
}
...
...
```
Then we have our encode methods, these methods get the data they need as arguments, and return a string result (which is the encoded message), for example this is the encoding of the update message:
```js
Protocol.buildUpdate = function(tte, snake1, snake2, pellets, board) {
    // Update msg: 5#timeToEnd#playersDirection#snakesSize#pellets#score
    // playersDirection - player1Direction,player2Direction
    // snakeSizes - snake1Size,snake2Size
    // pellets - cellIndex,cellIndex,cellIndex...
    // score - player1Score,player2Score

    var msg = Protocol.Messages.Update + DATA_SEP + tte + DATA_SEP + snake1.direction + OBJ_SEP + snake2.direction + DATA_SEP;
    msg += snake1.parts.length + OBJ_SEP + snake2.parts.length + DATA_SEP;

    // Now add the pellets
    if (pellets) {
        var currPellet;
        var delim;
        for (var i = 0; i < pellets.length; ++i) {
            currPellet = pellets[i];
            delim = (i === pellets.length - 1) ? '' : OBJ_SEP; // Don't add separator for the last element
            msg += board.toBoxIndex(currPellet.location.x, currPellet.location.y) + delim;
        }
    }

    // Finally add the score
    msg += DATA_SEP + snake1.parts.length + OBJ_SEP + snake2.parts.length;

    return msg;
};
```
Finally we need methods to decode the messages, we start by split the encoded message into the different fields, check the first field (which is the message type), and call to the appropriate decode method based on the message type:
```js
/**
 * Parse a message
 * @param {string} msg - The message
 * @returns {Message}
 */
Protocol.parseMessage = function(msg) {
    // Message: "CODE#DATA"
    if (!msg) {return null;}

    var parts = msg.split(DATA_SEP);
    var code = parts.shift(); // This also removes the code from the parts array
    switch (code) {
        case Protocol.Messages.Pending:
            // No specific data for this message type
            return new Message(code);
        case Protocol.Messages.Ready:
            return Protocol.parseGetReadyMessage(parts);
        case Protocol.Messages.Steady:
            return Protocol.parseSteadyMessage(parts);
        case Protocol.Messages.Go:
            // No specific data for this message type
            return new Message(code);
        case Protocol.Messages.Update:
            return Protocol.parseUpdateMessage(parts);
        case Protocol.Messages.GameOver:
            // No specific data for this message type
            return Protocol.parseGameOverMessage(parts);
        case Protocol.Messages.ChangeDirection:
            return Protocol.parseChangeDirectionMessage(parts);
        default:
            return null;
    }
};
```
Here is the decode method for the `update` message, note how the message is parsed field-by-field, and each field is being verified to have the expected structure and data types:
```js
/**
 * Parse an update message
 * @param {string} data - The encoded message
 * @returns {UpdateMessage}
 */
Protocol.parseUpdateMessage = function(data) {
    // Update data: timeToEnd#playersDirection#snakesSize#pellets#score
    // playersDirection - player1Direction,player2Direction
    // snakeSizes - snake1Size,snake2Size
    // pellets - cellIndex,cellIndex,cellIndex...
    // score - player1Score,player2Score

    if (data.length < 5) {
        return null;
    }

    var res = new UpdateMessage();

    // Parse tte
    res.timeToEnd = parseInt(data[0]);
    if (isNaN(res.timeToEnd)) {
        return null;
    }

    // Parse players directions
    var dirs = data[1].split(OBJ_SEP);
    if (dirs.length < 2) {
        return null;
    }

    res.player1Direction = dirs[0];
    res.player2Direction = dirs[1];

    // Parse players sizes
    var sizes = data[2].split(OBJ_SEP);
    if (sizes.length < 2) {
        return null;
    }

    res.player1Size = parseInt(sizes[0]);
    res.player2Size = parseInt(sizes[1]);
    if (!res.player1Size || !res.player1Size) {
        return null;
    }

    // Parse pellets (if we have)
    if (data[3]) {
        res.pellets = [];
        var pellets = data[3].split(OBJ_SEP);
        for (var i = 0; i < pellets.length; ++i) {
            res.pellets.push(pellets[i]);
        }
    }

    // Parse players scores
    var scores = data[4].split(OBJ_SEP);
    if (scores.length < 2) {
        return null;
    }

    res.player1Score = parseInt(scores[0]);
    res.player2Score = parseInt(scores[1]);
    // The reason we check isNaN instead of (!player1Score) is that 0 is a valid value for this field
    if (isNaN(res.player1Score) || isNaN(res.player2Score)) {
        return null;
    }

    return res;
};
```

## End of part II
This is the end of the second post describing the common objects in the game, those modules are being used both in the client (browser) and the server (node.js).
In the [next part](http://www.valyouw.com/2015/07/a-simple-multi-player-online-game-html5.html) we will check out the client-side code.

No comments :

Post a Comment