Building a Dead-Simple Multiplayer Tic-Tac-Toe Game using Angular, Nodejs and socket.io Rooms: Part 2

The first part of this article was totally dedicated to Nodejs server setup and building the socket events that would help our application to exchange the moves played between the players.The last part of the application is the front end, and needless to say that we will write in Angular as the title Multiplayer Tic-Tac-Toe Game using Angular, Nodejs suggests.Well, you know now what we are going to do in this article, the real question is how we will implement? Don’t worry that’s what we are going to do here down the road.

But before implementing this game one should know how it works? what are the wins condition? and how only two players play this game.If you know about all these things then good for you (Which I already know that you are familiar with it) and if you are not, please, search Google for tic-tac-toe and play till you understand the rules and how it works.




 

     Download

     Video Demo

 

1. How does it work?

Before getting into details, let’s first break this application different part and understand how it will work. Also, by building each part we will ultimately complete our application.

=> So first thing first we will connect the players to respective socket rooms. Now here we will give a freedom to create a new room for each player and then he can ask his opponent to join that room. Now, this has nothing to do with game logic and we are using socket Rooms just to separate the payers from each other and to learn how to use rooms in socket.io.

=> Once opponent selects the room, he/she was told to, we will show them 9×9 Grid where they will play.

=> Once both the players are on the Ground and ready to fight, then we will subscribe to an event that event is nothing but receive-move event which we have already created on the server side using Nodejs.

=> The receive-move event will emit the move played by the opponent and on the client side Angular will listen to it and render the played move on on the Grid.

=> Well, receive-move event will emit only if someone starts the game, here we will give a privilege to only that player who has created a room (Say player 1) and invited another player (Say, player 2). So the player 1 one will play the first move and then the receive-move event will get triggered. So now you all know player Player 1 will always start the game.

=> So whenever Player 1 or Player 2 will play, we will emit an event from client to server and that event will be send-move event, In this event, we will send below-listed parameters,

  • roomNumber => Needs to explanations
  • playedText => This will value that we are going to render on the Grid i.e X OR O.
  • position => Position will the Grid number, example 1,3 or may 8 but below 9.
  • playedGameGrid => Now this is a key parameter and this parameter will decide the winner of the game.
  • movesPlayed => This will the number of moves played by a respective player in order to check if a match is over between two players or not.

=> Again I would like to remind you all as per client-side perspective, receive-move event will listen to the event emitted by server and send-move event will emit the event from client to the server.

Now if you still have any doubts regarding the workflow read it again, If still, you have something that I have not covered above then drop a comment below and let me know.

2. Setting up our Application

We will set up our application with the Angular CLI. If you don’t have Angular CLI installed on your machine run the below command to install it globally. Trust me it will make your development super fast.
npm install -g angular-cli
To create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new xandzero

3. An Angular Serice

Now create appSerice in app folder using angular-cli, and write down the below code.In the below code we have definer and methods that we will consume in our component.

=> The gameGrid constant will be used to render the Grid on the Page and I kinda believe rest of the method are self-explanatory, even if they are not we will understand them when we will consume them in our component.

app.service.ts:

4. Implementing Multiplayer Tic-Tac-Toe Game using Angular, Nodejs

The time has come to write something in our component file, so let’s start from markups. Open app.component.html file and write doen the below code.

The Markup

=> The markup is divided into two parts, The first part is will render the  Grid and other useful stuff, which will show the different component of the page. The Second part is Modal pop up which will show the interface to join and create a new room for users.

=> In the first part I have used some properties of AppComponent class in order to display the Grid and to toggle the players turn while playing the game.

=> To render the played character we will use renderPlayedText() method which eventually uses an array, In which we will push values according to the position which was clicked and the which player clicked it.

=> And then comes the second part the Modal Popup.The modal also divided into two blocks. In the first block, a user can Join into a new room or can create a new room by clicking on create new room button.

app.component.html:

2 The Component class

Now let’s end this puzzle by adding the last piece of it, Open app.component.ts file and write below the code, The below code is the whole and sole of the application so we need understand it properly and here I will try to explain each method of it and reason behind it.Below is the whole code app.component.ts file,I know it’s too long but we will understand all the key methods and other factors.

=> The imports, I have imported the AppService class and then I have used ng-bootstrap.

=> Then under the AppComponent class, there are some variables which we will require when a player will start a new game. The uses of these variables are listed below.

  • gameGrid =>To display the Game Grid.
  • playedGameGrid => This will contain the information about the which grid is filled by which player and by using this array we will determine the winner.
  • movesPlayed => This will count the moved played a player.
  • displayPlayerTurn => This variable will show the player turn to play.
  • myTurn => This variable will disable the current player’s turn if he tried to play again and again.
  • whoWillStart => By using this variable we will decide which player will play first.

=> Now let’s start with methods which we are going use and defined. starting from ngOnInit() method, The first we did that there is, we opened modal to display a number of rooms and button to create new rooms and just after that, we made HTTP call to get all these details.

=> After that we connected the players to socket server.

=> Then we have subscribed four events by calling the methods of AppService class., which I have shown below.

  1. getRoomsAvailable() => This method of AppService class, which basically means we have subscribed to an event which will emit the event from the server side. This event will update the number of rooms available to play when a player creates a new room the server will emit this event.
  2. startGame() => This method will give an update to the players that your game is started.
  3. receivePlayerMove() => This method is subscribed to an event which will carry the moved played by each player.
  4. playerLeft() => This method will subscribe an event, which will notify the player that the opponent has left the game and automatically refresh the page.

=> After ngOnInit() method, The joinRoom() method will send an event to the server along with the room number as a parameter. Once the server will listen to the event, it will emit the appropriate response.

=> The createRoom() method will obviously create a new on the server and in return, it will give the room number.

=> opponentMove() will be called by the method, when receivePlayerMove() method will listen to any event emitted from the server.

=> The play() method will play it’s part when a player tries to play by click on the Grid. It will basically emit the event to the server by passing the appropriate parameter. Also in this method, we will push the data to into playedGameGrid variable.

5. Conclusion

Well, that was the end of this article, Again I would like to summarise it by saying all the things we have learned here.

  1. We created socket server using socket.io rooms along with it we wrote logic to decide the winner of the game on the server side.
  2. On the client, we implemented the methodology to create a new room and join an existing room.
  3. And then we implemented full-fledged real-time Multiplayer Tic-Tac-Toe Game using Angular, Nodejs.

Now if you have any questions or doubts please feel free to comment and let me know in the below comment box, I will be happy to answer them And if you have any suggestion to improve this game then also do let me know also, This project is available on GitHub.

Github Links:

Client-side game in Angular: Github link

Nodejs server for Game: Github Link

Till then enjoy the game.