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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.