Creating A Multiplayer Poker Game For HTML5 Using Phaser, Part 4

Hey guys,

It’s been a minute since I’ve posted an update on the multiplayer poker game I’m working on, but it’s still on. While client work has kept me preoccupied for the most part, a lot of progress – and learning has been underway! 😎

Yeah, it’s been quiet around here… a little too quiet…

Ahem, without further ado, have a look at this video, which shows the WIP running in two different browser windows.

An interesting situation happened in this video. OF COURSE, the game would present it while I’m recording, haha! 😅

First off, there were four Straights. But that’s not even the most interesting part.

When more than one player wins, they all split the pot. Here, the pot was split four ways. It just happens to result in a fraction – each player winning (30 / 4 = 7.5) – which shouldn’t happen, because the lowest denominator I’m designing for is 1 chip – not partial chip. So I’ll need to correct that…

🤔

Hmm… well, I could leave it, but that might give the impressions that you can do something with a partial chip value – which you can’t. Or, I could distribute the chips like this:

• (2) players win 8
• (2) players win 7

I might want to look this one up to see how real poker games handle this situation!

What are your thoughts on how this should be handled?

Primary Tools Used For The Project

The front end is powered by Phaser 3, the layouts and assets management by Phaser Editor 2D v3, and the back by Socket.IO v4.

Other technologies the project uses are:

• webpack
• Typescript
• Babel
• Express.js
• ESLint

The current state of the game’s progress

The poker rules logic is mostly done, so I’ve been spending a lot of time on the back-end logic.

In between rounds, you’ll be able to:

• Join a game if you were watching as a spectator (if there are any open slots – max players is six).
• Watch a game if you were playing (there is no limit to the number of spectators, but there is currently nothing that shows how many people are watching. I might make an 👁 icon with a number next to it, and stick it in a corner or something.
• Leave the game room and return to the lobby.

What I’m currently working on is handling those untimely situations of a player leaving a game mid-game, either because their connection died, or they closed their browser tab.

Leaving a game mid-game messes up the state, because the server and all the players need to be updated on who just left, so I’ll need to improvise here.

My original strategy was to treat it as the player folding, then when the round ends, automatically remove said player from the game. But this caused a problem, because if a player’s connection is lost, their socket is also gone. So, I decided to abruptly remove them from the game, forfeiting their hand.

Leaving mid-game also causes problems if it also happens to be the turn of the player who left. The decision here was to simply move to the next player’s turn.

Every game needs to have a dealer (D), a small blinds (SB), a big blinds (BB), and a host.

Note: The host is not part of poker – that’s a design for this particular game. By default, the host is the person who originally create the game room. The host is also responsible for starting each game when all the players are ready. The host is indicated by the ⭐ icon. When playing offline (yes, there is a single-player mode as well), there is no host.

So, if the D, SB, or BB leaves, then the next person (to their left) automatically assumes that role. It’s also perfectly normal for one player to have more than one role.

There’s also a lobby where players will go once they’ve connected to the server. Here you’ll be able to chat with other players, host your own game, or join an exiting game. Both hosting and joining are demonstrated in the video.

You can learn more about the project here:

• Starting On Multiplayer Poker Game For HTML5 Using Phaser
• Part 1
• Part 2
• Part 3

Finally, if you’d like to get in when the first playable beta is ready before the game is released, sign up on my mailing lest here. You’ll also receive updates on other projects as I work on them.

I can’t wait to have this one finished. Definitely a challenge worth completing!

And I don’t care what anyone says. Coding a multi-player game is a LOT harder than it’s single-player counterpart. 🤨

– C. out.