Create Online Multiplayer Tic Tac Toe using firebase

This is an actual gameplay screenshot

This post will guide on how you can create your own Online multiplayer tic tac toe with leaderboards web app.

TLDR; all the code is available here on GitHub and the live app is available here (You will need at least two users logged in to play).

Built using

1. HTML/CSS (Bootstrap) and Javascript
2. AngularJS
3. And Firebase for social authentication, RealTime database and hosting.

I created the app in three different parts and consequently three different controllers and html files, namely login, leaderboard and game.

The Login Page

The login page uses Firebase’s simple social authentication API’s to fetch the user’s details so that I can create a profile for him on the leaderboard.

The API returns a json object which contains all the details of the user logged in and we use uid, Display Name, and Photo URL properties for my project. I store these details in our leaderboards object (I’ll explain the details in the next section).

Every time a user logs in I check if the user already exists in the leaderboard object or not if it does I just update all the remaining values except the score and if it does I update the score.

Leaderboard Page

I designed this page using simple bootstrap, animate.css and some custom fonts. This part consists of two sections which show us the leaderboards (sorted according to the score) and online users both obtained from the leaderboard and online objects from our firebase database.

So the leaderboards object on the database contains user’s uid as the keys and contain another object as their value.

The value object contains the following keys for each UID-

• Display Name : The display name of the logged in user obtained during the login step.
• Photo URL : The display picture of the user which is also obtained during login.
• Score : It stores the current score of the logged in user and thus determines his/her position on the leaderboard.
• Game Id : It stores the id of the game the user is currently playing in.
• Accept : It stores the uid of the challenger whose challenge the user has accepted.
• Challenge : It stores the uid of the opponent whom the user has challenged.

I also created another array of objects in this section which shows the users who are currently online. I used the .info/connected location which is updated every time the Firebase Realtime Database client’s connection state changes.

The other things I do on this page include updating the challenge and accept variables of the users, I update the challenge variable of the user with the uid of the opponent which he/she challenges and vice-versa.

Once any user’s challenge variable is changed, the $watch() function of AngularJS to watch the challenge variable of the user, is triggered and the request of the challenger is shown with an accept or deny button.

As soon as the user clicks the accept button a random gameID is generated and the challenger’s accept variable is updated to the user’s uid indicating that the challenger’s challenge was accepted and both of them are navigated to the game page with their corresponding gameID’s (I use the same $watch() function on accept variable to automatically navigate to the game page as soon as his/her challenge is accepted).

And finally we’re here… The game page

The tic tac toe box is designed using simple bootstrap.

So as described earlier as soon as the user presses the accept button the gameID is created and so an object in the game object of the database with its key as the gameID and another object as its value which has the following structure.

Each gameID key contains an object with the following keys

• Buttons : This contains objects of all buttons using their id’s as keys and another object containing their state(whether the button is disabled or not) and value(the current value stored in button X, O or nothing) as their values.
• Online : It contains the uid of both the users currently playing the game. (I’ll explain it’s use later in this section).
• Player : It is a boolean value indicating which player’s turn it is now.
• Player 1 and Player 2 : uid of both the players currently playing in the game to show their name and display picture.
• Tie : A boolean variable to check whether the game has tied or not.
• Win : It indicates which player has won the game.

This gameID object is shared between both the players currently playing in the game giving the players a real time playing environment.

I used simple for loops and if else statements to detect whether the game is finished or not, if it is then I show the winner, update the score of the winner and navigate both the players back to the leaderboards.

I also used the online key same as used in the leaderboards page to push the UID of both the users currently online. And assign a $watch() function to it which checks its length every 5 seconds and if its length is less than 2 (i.e. one the users is disconnected) then we show the following message to the user who is still connected.

So this is it.

This is how the whole app works so as to provide you a real time online tic tac toe game. If you have any questions or concerns drop them below in the comments section.

Thank you for reading! ;)