Multiplayer Web Games Using JavaScript

Rate this content
Bookmark

With the ever growing opportunities for creating online multiplayer games for different platforms, and many reachable and easy to use open-source tools, it has become much more convenient for developers to create exciting multiplayer games. In this talk, Sahar will create a simple multiplayer game to demonstrate it and talk about the issues she faced when creating her own games.

This talk has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

Sahar Poundasseh uses Phaser as the game engine and Socket.io with Node.js for the server to develop multiplayer web games.

Sahar prefers to use room codes because they make her feel special, like a VIP, and she enjoys implementing that feature into her games.

In Sahar's multiplayer game, player turns are locked and managed server-side. Characters like 'X' and 'O' are assigned to players, and the game tracks whose turn it is to ensure moves are made in the correct order.

The token generated by the server is used as a room code that allows players to join the correct game room, ensuring that players can connect to their specific game sessions.

Sahar uses WebSocket, built on top of TCP protocol, for real-time bi-directional communication between the client and the server in her multiplayer game development.

Sahar's game checks if it is the player's turn and whether the game zone is empty before emitting a move to the server, ensuring that players follow the game's turn rules.

When a player joins a game room, the server checks if the room exists and if it can accommodate more players. If conditions are met, the player is added to the room and assigned a character, and the game state is updated to reflect their participation.

According to Sahar, JavaScript facilitates rapid development and testing, as changes can be viewed by simply refreshing the browser. It also makes publishing easier since players can access the game on any device with a web browser.

Sahar Pournasseh
Sahar Pournasseh
34 min
08 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk is about creating a multiplayer web game using Phaser and Socket.io. The speaker demonstrates how to create a tic-tac-toe game, including creating the table, assigning players, making moves, and determining the next turn. The importance of choosing the right protocol for multiplayer games, such as WebSocket or UDP, is discussed. The Talk also highlights the advantages of using JavaScript for web and mobile games, as well as considerations for network code and code availability.

1. Introduction to Multiplayer Web Games

Short description:

Hi everyone. I'm Sahar Poundasseh, an indie game dev from Iran. Today, I'll show you how to create a multiplayer web game using Phaser and Socket.io. Let's build a tic-tac-toe game together. I have prepared some code and logic in advance. On my Node.js server, I have installed Express and Socket.io and implemented an index.html file. I generate a token for the room using a random four-digit number. In the index.html file, I import the phaser platform and use socket.io. The code includes a phaser config file with four main functions.

Hi everyone. My name is Sahar Poundasseh, as you met me before. I'm an indie game dev based in Iran, Tehran and I work in a game studio called GearBag. I'm here to talk about multiplayer web games. I'm not that much of a speaker, so I wanted to show you in action how you can create a multiplayer web game from scratch and how it's really easy, so you won't get really mixed up in the complexities of it.

I'm going to be using Phaser as my engine and Socket.io Node.js as my server, but you can use anything. The basic thing is that we're going to use WebSocket and that's it. I hope you enjoy. So let's build our game.

We're going to build a tic-tac-toe game, a simple one, but because I don't have much time and I'm not that much of a fast typer, I have prepared some code, some logic in advance, the game and stuff like that. So we're going to fill in the blank of our network code together. So here on my Node.js server, I have only installed Express and Socket.io and I'm implementing and importing an index.html file. And I'm serving it here. And I only have a function that generates a token for the room.

So it's a random number, four-digit number. I'm going to use it for four digits. And why I'm using this is because I like room codes and it makes me feel special like a VIP. So I like implementing that into my games. And in my index.html file, I have these two files. I have imported the phaser platform and I also have implemented socket.io. It is built on top of WebSocket so it's basically WebSocket but I'm using socket.io right now. So in the code that is right here, I'm going to explain it really fast. It's my phaser config file. So it's just the width and height and has four main functions, create init, preload and update for the scene. I only have one scene. I'm using init function and create. So in my init I have some variables like the player character and the play log, which is going to lock the player if it's not their turn. And they're empty. And the table info, which I'm going to keep my characters in just to keep track of them.

2. Creating the Table and Game UI

Short description:

I'm going to keep my characters in the table info. The table index, table metrics, holds ones and minus ones for player inputs. The table has a container, character, and zone for clicking. I'm checking if it's the player's turn and if the character of that zone is empty. There are two boxes for game UI, a welcome box, and a box for create/join room buttons. I'll connect our client to the socket server.

And the table info, which I'm going to keep my characters in just to keep track of them. And the table index, table metrics, that holds ones and minus ones. So if the player inputs O, it will be one. And if the player inputs X, it will be minus one. I'm just using this to check the ring. And some table width and cell width and start table positions.

And in my on creates I have created the table. So it's a container and phaser. And it has a character, which is empty right now. And it will hold X and O's and a zone for clicking. And I'm holding this character in the table info right here. With a place ID. So instead of using I and J separately, I'm using place from zero to eight to manage my places when doing moves inside the game. And this is an on click for the zone. So in this onclick, before emitting the move to the server and the other players, I'm checking if it's the player's turn and if the character of that zone is empty. So if there's already something there, I'm not emitting it.

And this is the table. And I have two boxes. It's just game UI. It's a welcome box. Which will write welcome and show the room token to the creator. And there's a box for holding two buttons to create room and join room. And there are two functions for unclick listener. So when we click on create a room, we should emit to our server that you should create a room for us. And for joining, I'm going to take the token from prompt from user and I'm going to emit this to the server afterwards to join the room. And some simple text right here to show a start and if it's your turn or not or you're playing with X or O. And this is it, very simple. So let's start with our client side. The first thing that we need to do, we need to connect our client to the socket server. So I'll create up my scene.

QnA