You. Hello and welcome to my video. I will make a simple multiplayer game in this video using react and socket IO before we begin, let's make a short brief we're going to implement a battleship game. What is battleship game? It's a game for two participants in which player makes turns, calling or otherwise communicating the coordinates on the opponent map. If the enemy has a ship on a viscord generates ship or its deck killed and the enemy makes another move a player's goal to be first to kill all opponent's ship. On the party enemies each player has two field, on the first he can see his own ship and on second opinion ship each player wake their move and if a player hits ship he can make another move until he missed. Each field has ten to ten cells and each each ship can be placed on vertical on horizontal but ships can overlap and of course ship should be hidden from the opponent. I saw many variants rules for this game and in our we're going to use next variation carrier five cells x one battleship four cell six two cruiser free cells and free items and destroyer two cells four items and how is going b interaction with player and server and opponent when player check on board some position it sends to server and server ask the opponent about what happens on this position open end make response with status can user make another move and new board status and server makes some cache for it and return results layer we can have next cell statuses unknown we don't know what happens on this board mist if we strictly know what on this place where are nothing killed if we have wrecked on second ship and field for access ship but status don't sell to open end and he replaced us unknown if we have that's all on status and let's make a little bit code I have prepared some boilerplate for it. We have here client folder, server folder and shared folder for components which will used on both sides and yeah I know it can be as a normal package but I'm a little bit lazy to create a normal package for client we require install also socket I o client it and for server we need to install expressjs course and circuit I o libraries and I'm going to start with shared libraries and first of all it's one side of library named the buffer and it will be used in generate it generate our boardroom create types file which contains cell status and one variation of ship and tilts for calculation position you it let's create generate board file as you can see very prepared because it will be not to take so much time your time function generate board accepts ships list and board sites which by default equal 100. What happens? We sequently place each of ships according the following principle. We get random ship at first of all we find all possible position for our ships and after it we take one of them random and place on board. For place on board we mark all positions as missed. It will be used for next iteration of place on board and after we marked it marked all we place our ship on the board. After we have placed all the ships we clear the game board and at all we have only field or unknown cells. Next what we need is check our board when sound will fire. What happens to here? This function takes this function takes current user playboards and position what we need to position what need to be checked and return boolean and new board status. If board position is unknown, we marked with a cell and return false and new board if this position is filled if this position is filled is not empty when we begin to check status of neighbor position and all direction from this point if all of them killed when we marked around ships as missed and return new board status. Next what we need to create is sunken ships. What happens here? The fatching text takes player current board and the return of sulkan ships verification algorithm is following. We go from left to right through all position and if position is marked skilled we checked top and left position and if equals one as missed we check right and bottom positions and if our ship has neighborhood everywhere missed, we mark this ship as sunken and in the end we sort from big to less. Also we need to get move ships that will be used for our AI function really similar to previous but we find no tank and ship and we check all available position for next move. Also we need to clear our board. I moved it in functional main principle of it. If we have onboard field position we replace it by zero and we need to check what we still have the fillet ships you it's okay. I think we finish with shared files files and let's create our backend. First of all we need to create server. Here's really easy and let's start from make AI almost forget expert check file it. Okay this is our eye. The main algorithm is following. We generate random board when initialize this status and when make moves we get user boards and five find rack chips and if we have some rack chips we fire for zero place otherwise we get random move get random unknown cell and make us move and also we need to handle use requests for hit we need let's create game file which represents main actions, the main class of game and the main task of this much simple he has cached user boards well. In the future it will be possible to create observer function so what third party can watch the process and switch active player depending on where answer. Also we need to cache games and create some observers for socket IO you it we need to implement next event handlers new game AI also fire v seven will be sent by user for check position and catch result to handle opponent's response to a check and for check and in our case it will be response for either request for position from user. Let's make new game AI we generate game id cache new create new game and send to user game created event. Next will be fire event and what happens here? At first of all we get current game by game id and check if current move user we gave our AE position and for check response and send this result for place new status in game class and send result. Also if we play in vfai we can from now make some moves from AI and check user's position and catch result. We also have game id and if current move game id we pass our data to AI and if AI is filled with position is catched with position he can make move again. Oh we've backend that's all. Let's make some little bit front end. We have boilerplate from yjs. Let's make some cleanup it here. What's our boilerplate also for gamer we need next variables. It's a sen it's opening boards, user board and game id. While it's neat sen it's current representation of what we need to draw opening boards for view. What happens on opening boards user boards it's our board and game id will be set on one of next moves. Also we need to perform next events from so it IO game created fire result and catch game created we give when game is really created fire result we have result of what we are fired and catch if someone to get know what missed here or no and let's create some components and styles it draw basic cell for our board. It can be clickable if you have special boolean variables and on click function after it. We need to draw user's board it it and styles for it's it's really simple function and to be in fact it's just a wrapper for cells and let's create some sense as we know we have four sense first of all sit up second game in the game and we have finish win and finish lose sense for our game result. Let's create setup. Here is set up. On the left side we show users board and on the right side we have two buttons generate and radio. User can see his generated board and if he likes it he can press ready. If not he press generate and makes new field. When we have and next stage is gameplay. Here is game. On left side we can see users board and on right side our opinions board and let's fill some. Let's use some sense. Also we need to create function on click radio which set up a user's board and send to our back end event what we are ready to play and on click board event which sent to backend users ask position and move handlers. First of all on game created and here is with set game id and change send to game next on fire result if backend sends what game over. On website we show send what user wins and return. Otherwise we set up current opinions board which will redraw and on catch event what happens on this file on this callback. At first of all we check users board for current position and get result and check if is game over and make response with current data. And if our board is loose we show what we lose. Otherwise update our board. Let's check what happens. McKenzie started on real sport and our front end started too. Okay? Yes. As we can see it's guinea rattle board. We can press guinea rate and it's change. When we press radio we show two fields hour and opponents. Let's play and check how. I'm lucky it's not correct colors but you can see what his answers and backend kills one of my ships. Mito and I'm Vin. Basically we made a little game. I understand what many aspects are not covered. For example normal multiplayer. But I think we're starting small and purpose of this video is to inspire you to create your own games. And what it's not difficult. Also what react can be used not only for forms from what we can improve in the current game. First of all, we can send some hash of our board to prevent what someone of players is cheating and changing his field during game. This happened next in the following way. First of all, when we generate board we make some hash. It can be MD five it's not so necessary and send it to backend and his story both hashes and in the end game one of hashes not equals. That means what someone cheat. Also possible to create AI based on some statistics. For example, after a few games AI can get some boards which played and calculate positions where most popular position and start playing from them. Yes, I think that's all. The source of this game will be available on QR code on screen. And thank you for watching, waiting for your questions.