Starting On Multiplayer Poker Game For HTML5 Using Phaser

What’s up, guys. 🤜🏾

Now that the Flash game Blasteroids has been converted to HTML5, the next game I’m working on is a multiplayer Poker game.

Now, this won’t be a conversion, but a game originally built using Phaser 3, JavaScript, and Phaser Editor.

Building this game will be a bit of a challenge for me for these two reasons:

One, this will be my first attempt at developing a complete multiplayer, turn-based game.

An MP game is much more challenging to build than a single-player one, believe you-me. I once tried making a real-time MP in the past using PlayerIO, but… let’s just say that didn’t pan out so well.

And two, I’m learning a bit about the JavaScript ecosystem. I took previous course on Zenva called MMORPG Academy. The course showed you how to make a simple multiplayer MMO game using Phaser, Express and SocketIO. It also introduced me to the following tools, which I will also be using for this game.

Technology Used

Node.js

Node.js is a server-side platform built on Google Chrome’s V8 JavaScript Engine. It can be used for developing server-side and networking applications. I’ll use it as part of the back-end for this game.

npm

npm is a very large software repository. It’s a package manager for JavaScript, and you can use it to download and install many third-party packages into your projects. It comes with Node.js, and it can be used to install most of the tools listed below.

Express

This is a web framework that allows your web application to handle requests that are sent to a specific URL. Both Node.js and Express will be used together to create the web server.

Socket.IO

This is what will allow communication between the the player client app and the server web app.

webpack

Among many other things, webpack can bundle all your modular JavaScript code and packages together into a single file that can be understood by your web browser.

Babel

It’s much more convenient to write JS code in the latest/modern version. However, older versions of web browsers can’t understand these versions. This is where Babel comes in. It can transpile your modern code to earlier versions that can be understood those older browsers, increasing the available of your web apps to more people.

ESLint

This tool examines your code for syntactical errors, or other issues where the code may not adhere to a certain standard or set of styling rules. Essentially, “linting”, helps you write cleaner code.

Some other tools not discussed in the Zenva course that I will be using in Poker are:

TypeScript

I much prefer Typescript over JavaScript. Typescript allows you extra features, and for me, that means static typing and support for interfaces. Of course, I’m sure I’ll learn more as I dive deeper into Typescript.

Note: My plan is to write the code using TypeScript (which both Phaser and Phaser Editor also support), use Babel (with Typescript support) to transpile the code, and bundle it all together in a single JavaScript file using webpack. This is for the client-side portion of the game. The back-end server-side code will not be run in a web-browser, so it will not use this process.

Poker Game Multiplayer Development Plan

First thing’s first: the game’s design, and layout will need to be created. While I’m not a game designer (my service currently only includes programming), this version of Texas Holdem Poker I’ll be making will have a relatively simple enough mechanic. Nothing fancy here. And the game is mainly to add to my portfolio.

I’ll need to find some assets (graphics and sounds). I’ll use the same assets I used from my Thunderjack! game.

Because this is a multi-player game using a client-server model, where the server has the authority and maintains the game’s state.

The client apps (what the players will use) act as visual agents, showing the state of the game server. They also accept input (keyboard, mouse, touch, etc.) from each player, send them to the server, then the server with validate that input. The validation is to make sure the state stays clean, and to prevent cheating.

Because this will be a turn-based game and not a real-time game, it doesn’t need to rely heavily on advanced concepts like client-side prediction or entity interpolation and prediction.

Next, there are the rules of Poker. Because the server maintains the stage, all the game logic will be written on the server. And of course, I’ll need to get the rules down as well. 🙃

And finally, I want the game to be able to use bots that can fill in if no other real players are available. So building an AI will be a challenge all its own, though I’m sure I can research this for help.

Where and How will I Host the Game Server?

The final component to this game is determining where and how I’ll host the game server, so you can play this game online with other real people. The client-side app will be hosted here on my site here, but it’s the game server that needs to be hosted elsewhere.

The multi-player game that the Zenva course helps you to create uses Heroku to host the game project, so I’ll use that again. The course covers just enough for you to set up a simple game, as any more, I believe, would go beyond the scope of the project, but there’s enough there to get started.

As I work on the game, I’ll post noteworthy updates in future articles. And you can play the work-in-progress versions of the game as I make playable updates, before the game is released to the public!

Sign up using this form to get on my mailing list:

---

Whew! That’s it for now, and this will be quite a challenge. I’m sure this will take me a while to complete. And I hope you stick with me on this journey! I got this! 💪🏾

– C. out.