IN THIS ARTICLE
When it comes to multiplayer gaming, matchmaking is essential for matching up two or more players in a multiplayer game. In this blog post, we’ll walk you through our matchmaking algorithm for random matchmaking (matching up two random users).
We’ve now covered both building a multiplayer game lobby with a chatroom and the different ways we can use matchmaking to connect two different users. Here’s what we’ve covered so far:
- Part One: Series Overview and Building a Multiplayer Game Lobby
- Part Two: Adding Users and Usernames
- Part Three: Getting a List of Online Users
- Part Four: Random Matchmaking of Users
- Part Five: Skill-based Matchmaking of Users
- Part Six: Matchmaking Algorithm: Enabling Users to Challenge Other Players
- Part Seven: Create Chatrooms and Multiple Channels On Demand Tutorial
- Part Eight: Preparing for Private Chatrooms and Refactoring via Private Channels
- Part Nine: Creating Private Chat Requests with Popup Alerts
There are several uses for a matchmaking algorithm: pairing two parties on a phone call, pairing a driver and passenger, or pairing users to make edits to a document in a collaborative environment. For example, the same code we’ll write today could arrange a video call for Skype or Google Hangouts or hail a cab through Lyft or Sidecar.
Adding a “Find Match” Button and A Header
First, we add a header to our example. Within our
.container-fluid, we’ll add a new
.row up at the top. Inside that, we add a
nav element with styles taken straight from the Bootstrap navbar example.
.navbar-left element we add a button with an id of “find-match”. This is what we’ll use to trigger the matchmaking process.
We’ll also move our
#whoami element into
.navbar-right to complete the header.
Using the PubNub here_now() API
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:
Then we’ll bind to the click function and fire off the
pubnub.here_now() call when the button is pressed. This function is part of the presence library, but instead of sending events when users come online, a list of all online users is returned.
When the button is clicked, a list of online users logged to the console.
uuid field is populated with a list of usernames we supplied as our own
uuid in the previous chapters.
Finding a Match
Let’s choose a random user to play against when the button is clicked. We’ll create an event to fire when the
#find-match button is clicked.
The first thing we need to do is clean the array. We don’t want our own username showing up here, so we loop through the array and remove any usernames that are equal to the value of
We iterate backwards because the length of the array will change as items are removed.
Add Some Randomness
Now that we have a clean array, we need to get a random value from it. We’ll use
Math.random() again here.
That’s it! Altogether the full
click function looks like this:
Simple Random Matchmaking Algorithm Demo
Check out the full matchmaking demo on CodePen or below. In the next chapter, we’ll make matchmaking a smarter by adding skill levels into the mix, then we’ll enable users to challenge one another.
Next, we’ll continue our tutorial with skill-based matchmaking and challenging other users.