We've updated our SDKs, and this code is now deprecated.
Good news is we've written a comprehensive guide to building a multiplayer game. Check it out!
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
- Part Ten: JavaScript Private Chat API with Access Control
This blog post is Part Four of PubNub Developer Evangelist Ian Jennings‘s series on creating a multiplayer game with JavaScript.
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
To detect what users are available to play, we use PubNub Presence. The first is here_now() which let's us get a list of users in a channel in real time.
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.
Inside the .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.
The 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 me.
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 useMath.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.
See the Pen Memewarz – Matchmaking #1 by Ian Jennings (@ianjennings) on CodePen.5248
Next, we'll continue our tutorial with skill-based matchmaking and challenging other users.
