how to create a multiplayer tic tac toe game with html, css and javascript

Solving problems like Tic-Tac-Toe can really improve your problem-solving skills. when I first started learning how to code, I was caught up in reading study guides and ended up not knowing much but it all changed when I started solving problems. In this post, I will show you how to create a multiplayer Tic-Tac-Toe game.

PREREQUISITE

The technologies used to create this game are

• HTML
• CSS
• JAVASCRIPT

HTML

The HTML code is pretty straight forward. A table with 3 rows and 3 columns is created, which has 9 different cells and each cell contains a div element (box). Also, there is a label on top of the table to indicate each player's turn, there is also a hidden label beneath the table that will display when there is a winner and finally there is a button beneath the label to reset the game.  

<div class="container-out">
    <div class="container-in">
    <div class="table-container">
        <p>Player <span id="player">X</span> your turn</p>
        <table align="center">
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        <tr>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
            <td><div class="box"></div></td>
        </tr>
        </table>

        <h2 id="message">Player <span id="winner"></span> Wins</h2>
        <button id="reset">Reset</button>
    </div>
    </div>
</div>

CSS

Styling the elements

.container-out {
        font-family: "Fira Sans", sans-serif;
        padding: 15px 0;
      }

      .container-in {
        width: 97%;
        margin: 0 auto;
      }
      .table-container {
        margin: 10 auto;
        text-align: center;
      }

      .box {
        min-width: 70px;
        min-height: 70px;
        background: #dee9ec;
        text-align: center;
        vertical-align: center;
        font-size: 50px;
        font-weight: 900;
        cursor: pointer;
      }

      .box:hover {
        opacity: 0.7;
      }

      .table-container h2 {
        color: #0d8b70;
        display: none;
      }

      .table-container button {
        border: none;
        background: #13838b;
        color: white;
        border-radius: 3px;
        padding: 5px 7px;
        font-size: 18px;
        cursor: pointer;
        margin: 15px;
      }

      .table-container button:hover {
        opacity: 0.7;
      }

      .table-container button:focus {
        outline: none;
      }

JAVASCRIPT

The JavaScript code is responsible for coordinating the game. The current user and game status are stored as variables.  All the div elements in the 9 boxes are stored in an array and a click listener is applied to all the div elements. There is also a click listener on the reset button, if clicked, the whole game starts afresh. The showWinner() function checks for matching x's or o's and declares the winner.  

//stores player turns
      let currentPlayer = "x";

      //stores the status of the game, whether its over or still in play
      let gameStatus = "Game On";

      //Gets all Boxes elements
      const boxes = document.getElementsByClassName("box");

      //loops through all the elements
      for (let i = 0; i < boxes.length; i++) {
        //adds event listener to each box;
        boxes[i].addEventListener("click", function() {
          //checks if the box has an x or an o in it and also checks if the game is still on
          if (boxes[i].innerHTML.trim() == "" && gameStatus == "Game On") {
            //adds x or o for the current play in their choosen box
            boxes[i].innerHTML = currentPlayer;

            //changes player turns
            currentPlayer = currentPlayer == "x" ? "o" : "x";

            //changes player's turn label on top of the game
            document.getElementById(
              "player"
            ).innerHTML = currentPlayer.toUpperCase();

            //checks 3 matching x's or o's
            if (
              boxes[0].innerHTML == boxes[1].innerHTML &&
              boxes[1].innerHTML == boxes[2].innerHTML &&
              boxes[0].innerHTML.trim() != ""
            ) {
              showWinner(0, 1, 2);
            } else if (
              boxes[3].innerHTML == boxes[4].innerHTML &&
              boxes[4].innerHTML == boxes[5].innerHTML &&
              boxes[3].innerHTML.trim() != ""
            ) {
              showWinner(3, 4, 5);
            } else if (
              boxes[6].innerHTML == boxes[7].innerHTML &&
              boxes[7].innerHTML == boxes[8].innerHTML &&
              boxes[6].innerHTML.trim() != ""
            ) {
              showWinner(6, 7, 8);
            } else if (
              boxes[0].innerHTML == boxes[3].innerHTML &&
              boxes[3].innerHTML == boxes[6].innerHTML &&
              boxes[0].innerHTML.trim() != ""
            ) {
              showWinner(0, 3, 6);
            } else if (
              boxes[1].innerHTML == boxes[4].innerHTML &&
              boxes[4].innerHTML == boxes[7].innerHTML &&
              boxes[1].innerHTML.trim() != ""
            ) {
              showWinner(1, 4, 7);
            } else if (
              boxes[2].innerHTML == boxes[5].innerHTML &&
              boxes[5].innerHTML == boxes[8].innerHTML &&
              boxes[2].innerHTML.trim() != ""
            ) {
              showWinner(2, 5, 8);
            } else if (
              boxes[0].innerHTML == boxes[4].innerHTML &&
              boxes[4].innerHTML == boxes[8].innerHTML &&
              boxes[0].innerHTML.trim() != ""
            ) {
              showWinner(0, 4, 8);
            } else if (
              boxes[2].innerHTML == boxes[4].innerHTML &&
              boxes[4].innerHTML == boxes[6].innerHTML &&
              boxes[2].innerHTML.trim() != ""
            ) {
              showWinner(2, 4, 6);
            }
          }
        });
      }

      //resets the game
      document.getElementById("reset").addEventListener("click", function() {
        for (let i = 0; i < boxes.length; i++) {
          boxes[i].innerHTML = "";
          boxes[i].style.backgroundColor = "#dee9ec";
          boxes[i].style.color = "black";
        }
        currentPlayer = "x";
        document.getElementById("message").style.display = "none";
        document.getElementById("player").innerHTML = "X";
        gameStatus = "Game On";
      });

      //displays the winner
      function showWinner(x, y, z) {
        boxes[x].style.background = "#0d8b70";
        boxes[x].style.color = "white";
        boxes[y].style.background = "#0d8b70";
        boxes[y].style.color = "white";
        boxes[z].style.background = "#0d8b70";
        boxes[z].style.color = "white";
        document.getElementById("winner").innerHTML =
          currentPlayer == "x" ? "O" : "X";
        document.getElementById("message").style.display = "block";
        gameStatus = "Game Over";
      }

conclusion

Creating a multiplayer Tic-Tac-Toe game is quite easy compared to other games but its a good stepping stone to creating great apps. Hope you enjoyed my post. Don't hesitate to leave a comment for more details