2 Player Puzzle using EaselJS and NodeJS
14 Apr 2012
Last modified: 06 Feb 2017
This game utilizes a variety of Javscript libraries to stitch together the puzzle game:
- EaselJS - nice way to deal with the HTML5 Canvas rather than directly using the API
- NodeJS - our multiplayer TCP platform server so we can use only HTML5 and Javascript
- ExpressJS - simplifies the intricacies of dealing directly with NodeJS
- SocketIO - wrapper for WebSocket so we have an ovesimplified interface to make our s ocket calls
- TweenJS - tweening animation that directly compliments EaselJS.
- SoundJS - responsible in creating the musci and sound sfx in our game
You’ll need to install NodeJS. The following I have already included in the zip file - ExpressJS, Node-Supervisor and Socket.IO as local node modules. They are all installed via NPM.
The Game Files
Server.js
The server has a pretty short code and only responsible in the following areas:
- Generating the 2D array of X and Y puzzle pieces starting position. This way when a new player joins a room, the new player will see the same puzzle position as the first player.
- Listens for client connection and handles automatic room creation and assignments. Only 2 client connections are allowed in each room.
- Broadcasting and sending game packets to all connected clients or to specific rooms
Client.js
This file receives all the packets that the server is sending out and executes the operations necessary.
Game.js
Contains various game related logic.
Game Initialization Flow
- Preloads images and sounds
- Connects to the server
- On established connection, create the puzzle pieces
That’s about it. The game specific code are fairly short.