[Music] we all have played multiplayer games like Minecraft fortnite and Call of Duty I always wanted to build a multiplayer game but I am not a game developer I'm a web developer then I thought why don't we build a multiplayer game with my web development skills to build a multiplayer game the most essential requirement is to instantly communicate between two players without any delay if you are a web developer you should already be familiar with web sockets websockets enable instant data exchange and it's supported in all modern browsers the next important question is what game
should I build I can't create a game like Minecraft or fortnite because they are built by companies where hundreds of developers work together to build these games here I am the only developer so we're gonna create small game that involves multiplayer feature after brainstorming for 1 hour I came up with two games chess and rock paper scissors I decided to build rock paper scissors truth is building a chess game would take lot of work so I will be creating a rock paper scissors game in this video with JavaScript those who don't know how the rock
paper scissor game works it's a simple game where rock is a closed fist paper is a flat hand and scissor is a fish with index and middle finger extended rock wins against scissors paper wins against Rock and scissor wins against the paper now let's gather all the assets we need to build this game like hands background images winner and loser boards buttons Etc let's save all of them in a folder called images to build this project I will be using react on front end and node.js on backend I am going to use the socket.io library
it enables real-time event-based communication between a client and a server for this game I will be creating a home page where I will give two options play with a friend and play with this Ranger whenever user clicks on any one of the button they will be redirect to the game page here on the left side user info will be there and on the right side opponent info will be there controls for the user we're gonna show them here if the user selected to play with a friend I will give a link so he can share
and their friend can join from that link if the user selected to play with the stranger I will select any random online user as his opponent whoever scores the three points first will be the winner then I redirect them to a result page here I will show the scoreboard and the same options shown on the home page I think that's it for the planning now let's build the game first I will create a react app and run it on a local host now I have to create a home page as planned so let's start coding
that's it our home page is created pretty fast right what what just kidding I'm copying the code I have already written okay now the hardest part I have to find one random online user and transfer real-time data between both of them it took me one day to figure out how to do this let me show you how you all are familiar with WhatsApp when we are chatting with our friends under the hood WhatsApp will transmit messages from one socket to another but when it comes to group chatting transmitting messages from socket to socket is not
efficient so WhatsApp creates a room it has a unique ID and inside that all sockets will be there here messages transmit from socket to room I am going to use this room's concept to build this game whenever the user clicks on play with the stranger button I will send a room create event from the front end on the back end I will create a room with a unique ID and join this user in that room to join another player in this room I need room ID so I have to save room details somewhere I will
save every room ID in an array called rooms if another user clicks on that button first I will check is there any room available from that array if the room is available I will make this user to join the room but there is an issue here I only want two players to join this room to fix this I will add a variable called vacant to check if the room is available or not to have a track of players info like socket ID option score and option lock will save that data in a player's object now
I need to send these details to the front end we are sending a room gate event from the back end I hope you understood what I said now it's time to make it practically work it's done now on the front end I have to call the room create event when the user clicks on a button then I redirect them to a game page when I get room details from the backend here let's add a background image user info score hand images like rock paper scissors and controls by default I will show The Rock hand on
the both sides now I have to show the result based on the input given it's working fine but I will add animation while showing the result two more things left adding a loader while finding an opponent and listening on the room get event okay it's done now I have to transmit data between both players to do that I will emit a room update event from the front end whenever I get input from the player in the back end I will listen to the room update event here I will find a room with a room ID
and update it with a given payload and then I will send a updated object to the front end we are calling room get event data is transmitting successfully it's time to write the logic of the rock paper scissor game and update this course based on the inputs the game is working fine but it's endless I already said whoever wins three points first will be the winner then I redirect them to a result page now I have to create a result page and show the Stars based on the score I should also show the same options
shown on the home page so that the user doesn't have to return to start again the game is completed but one more thing is left sharing a link and playing with a friend to join a player with a link I will take the room ID from that link and check if is there any room available with a given ID if a room exists then I will check if it's vacant if it's available and vacant then the user can join the room else I will redirect him to the home page currently any user can join the
room if it's awakened to solve this I will create a private rooms for those who click on a play with the friend button okay it's done now let's test the game foreign [Music] I hope you like this video please subscribe and like this video so that the YouTube algorithm will suggest this to other developers like you we'll see you in next video
