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.

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.

Available in Español

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
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
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
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
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!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

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
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.