Checkers Online — How to create and deploy a Javascript application
And there goes another of my brilliant ideas: Doing a multiplayer online checkers so I could write about it. What could go wrong?
Well, this is not the objective of this article, but to tell what went well, so I will talk about:
- How I’ve done this game
- How to deploy a JavaScript project to Heroku
- How I used the server to communicate between two players’ game
- The Walking Dead’s last episode
- Future works in this project.
About the game
After my JavaScript’s Capstone project I wanted more, I needed to build another game. Playing a game is great. Coding is awesome. But coding a game is beyond that. So, came the idea of checkers, a game that wouldn’t require a lot of animation or designing. It will be easy, my brain said… Why do I continue to hear my brain?
To create this game I used Phaser 3. Phaser is a JavaScript’s “fast, free and fun open-source framework for Canvas and WebGL powered browser games”. With it, you can easily create different scenes, game objects and simple effects for your game. You can even count on the framework’s — and its community — help to implement more complex animations and game mechanics. You should really give it a try.
Doing the game
I gave myself two rules about this game: 1) It would be simple; 2) It would be functional to 2 people play it online. I created the scene class as an extension of Phaser.Sceneand the red and black pieces classes as extensions of the class Phaser.GameObjects.Sprite.
So the game’s main scene is the image of a board and the pieces as game objects in the black spots. Hovering the piece shows if it can be moved and clicking on it shows its possible moves, including jumps and multiple jumps. The only animation that I put in this game was the movement animation. I used collision between game objects to “eat” the opponent’s piece, so when a piece in movement collides with another, the second one is destroyed. I would love to put some sounds, but all checkers sounds online are paid and I’m poor. The board is represented by an array of arrays in the logic. An empty spot receives the value 0, and an occupied one receives the pointer for the Object in it.
Despite my rule of making it simple, the game’s logic is way too complex for this article — after all I want to talk about it’s multiplayer and deploying — So you can look it in its repository.
Deploying to Heroku
Now I want to give a break in the game and talk about JavaScript in general. Doing my Capstone I faced a problem deploying a project where I was using Webpack. Well, you do need the project to be built and a server to run it. After some research, this video was the chosen one to defeat the dark lord and help me deploying my project. All that you need is:
- A server file
- A procfile
- Express extension
- A Heroku account
- A bag full of candies
First, put the bag of candies on the reach of your arm. You will be eating then as you work. Second, you need to be sure that your project is linked to git and create a new repository on Heroku, let’s say ‘foo-bar-project’. Link your project to its newly created repository using heroku git:remote -a foo-bar-project.
The next step is to create a server file. Don’t need to be too creative, just a server.jswill work. This file will be on your project’s root and need to have some lines:
Let’s try to understand what’s happening up there:
- Express is a web application framework for Node. You need it to build web applications and APIs. Make sure to have it on your dependencies in the
package.jasonfile. - On line 4 make the server choose between Heroku’s given port and the one you give. In this case, I gave the most common port: 8080.
- You call express to use a static. It allows us to use the global variable ‘__dirname’ to refer to our root folder.
- On line 9 you are getting something from the web and sending the index.html as the answer.
Last but not least, you need a file called Procfile. This file will tell Heroku what to do with your application, in this case, to run node server.js. So, put this single line in your Procfile and celebrate:
web: node server.js
The server in the checkers game — Socket Io
The method I described above works fine… if you don’t want to exchange information between the users — what I discovered the hard way. The easiest way I found to do so was by using the library socket.io. This is a library that allows bidirectional communication between clients — pay attention to the plural — and server. Using it you can broadcast information between multiple sockets, store data associated with each client and make asynchronous I/O requests.
Like before, I created an app using express and sent the index.html, but now I needed to create a server requiring the ‘http’ element of our app’s Server class:
const server = require('http').Server(app);
After that, we can create a variable that will listen to the server throw the socket.io library:
const io = require('socket.io').listen(server);
Finally, we create a callback function passing a variable, let’s say ‘socket’, for the ‘connection’ calling in the server.
About the print above: the ‘disconnect’ call, obviously, only can happen after a connection, so it makes sense for it to be inside the callback function. The lineserver.listenis like a ‘Hello World’. I liked to have it only to be sure that the server was connected
Inside the “connection callback” I added other functions to wait for the code’s calls and to answer then.
startGame’, ‘startingGame’, ‘joinGame’ and ‘gameBegin’ — I have no creativity!!!In the ‘Main Menu Scene’, the first player creates a game. A random four-digit number will be given and a call will be made to the server, the startGamecall, passing the id as a parameter (bID). A new key will be generated in the ‘games’ object — object created at the beginning of the server to store all the games that are happening at the moment. At the end of the callback, an ‘emit will be done: the server will answer the code just to say “Ok, I received your message when the second player enters I tell you”.
The second player, in the ‘Main Menu Scene’, will insert the game’s id. It will send the joinGame call wich will verify if the second player in the object previously is still available, add the player to the object and then answer both players one and two that the game can start.
I’ve added a 2 seconds delay just because.
About the other calls and answers you can, once more, visit the game’s repository to check.
Conclusion and future works
I know that I said that I would talk about the last episode of The Walking Dead, but I’m not watching it anymore, so if you got here waiting for it you were baited.
About the project, some rules were not implemented like the obligation to “eat” an adversary piece when you can because I have to work on some other projects but I may work on it in the future.
Other ideas are: let the user put its name and store it on the localstorage, the surrender button and send some sounds to provoke the opponent. But it is for another time.
Thank you for reading.