top of page

FRONT END PROJECT:Creating a Tic-Tac-Toe Game using HTML,CSS,JavaScript and DOM Manipulation

Aug 30, 2024

3 min read

0

11

0


In this article, we will create a Tic-Tac-Toe Game using JavaScript. We will be using validation checks to implement the game features. The UI is designed using CSS so it is easy to create. In the game, Player-1 starts playing the game and both players make their moves in consecutive turns. The player who makes a straight 3-block chain wins the game. This game is built on the front-end using simple logic and validation checks only.

Prerequisite: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Itim&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
    padding: 0;
    margin: 0;
    font-family: 'Itim', cursive;
}
.background{
    margin-top:50px;
    font-size: 30px;
    color: white;
}
.container {
    margin: 0 auto;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    max-width: 300px;
}
.tile {
    border: 1px solid white;
    min-width: 100px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    cursor: pointer;
}
.playerX {
    color: #09C372;
}
.playerO {
    color: #498AFB;
}
 .announcer {
    color: white;
    text-align: center;
    font-size: 30px;
    margin: 10px 0;
} 
.controls{
    margin: 30px auto;
    width: max-content;
}
#reset {
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.9rem 2rem;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    font-size: 17px;
    border-radius: 500px;
    overflow: hidden;
    background: #66ff66;
    color: rgb(0, 0, 0);
   }
   
   #reset span {
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    
   }
   
   #reset:hover span {
    color: rgb(250, 250, 250);
   }
   
   #reset::before,
   #reset::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
   }
   
   #reset::before {
    content: "";
    background: #fff;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
   }
   
   #reset:hover::before {
    transform: translate3d(100%, 0, 0);
   }
   
    </style>
  </head>
  <body style="background-color: black;">
    <center>
    <main class="background">
      <section class="title">
        <h1>Tic Tac Toe</h1>
      </section>
      <section class="display">
        Player <span class="display-player playerX">X</span>'s turn
      </section>
    </center>
      <section class="container">
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
        <div class="tile"></div>
      </section>
      <section class="display announcer hide"></section>
      <section class="controls">
        
        <button id="reset"> <span>Reset</span></button>
      </section>
    </main>
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        // everything goes here
      
      const tiles = Array.from(document.querySelectorAll(".tile"));
      const playerDisplay = document.querySelector(".display-player");
      const resetButton = document.querySelector("#reset");
      const announcer = document.querySelector(".announcer");
      announcer.style.className = "result"
      let board = ["", "", "", "", "", "", "", "", ""];
      let currentPlayer = "X";
      let isGameActive = true;
      const PLAYERX_WON = "PLAYERX_WON";
      const PLAYERO_WON = "PLAYERO_WON";
      const TIE = "TIE";
      /*
   Indexes within the board
   [0] [1] [2]
   [3] [4] [5]
   [6] [7] [8]
*/
      const winningConditions = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ];
      const isValidAction = (tile) => {
        if (tile.innerText === "X" || tile.innerText === "O") {
          return false;
        }
        return true;
      };
      const updateBoard = (index) => {
        board[index] = currentPlayer;
      };
      const changePlayer = () => {
        playerDisplay.classList.remove(`player${currentPlayer}`);
        currentPlayer = currentPlayer === "X" ? "O" : "X";
        playerDisplay.innerText = currentPlayer;
        playerDisplay.classList.add(`player${currentPlayer}`);
      };
      const announce = (type) => {
        switch (type) {
          case PLAYERO_WON:
          
            announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
            break;
          case PLAYERX_WON:
            announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
            break;
          case TIE:
            announcer.innerText = "Tie";
        }
        announcer.classList.remove("hide");
      };
      function handleResultValidation() {
        let roundWon = false;
        for (let i = 0; i <= 7; i++) {
          const winCondition = winningConditions[i];
          const a = board[winCondition[0]];
          const b = board[winCondition[1]];
          const c = board[winCondition[2]];
          if (a === "" || b === "" || c === "") {
            continue;
          }
          if (a === b && b === c) {
            roundWon = true;
            break;
          }
        }
        if (roundWon) {
          announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
          isGameActive = false;
          return;
        }
        if (!board.includes("")) announce(TIE);
      }
      const userAction = (tile, index) => {
        if (isValidAction(tile) && isGameActive) {
          tile.innerText = currentPlayer;
          tile.classList.add(`player${currentPlayer}`);
          updateBoard(index);
          handleResultValidation();
          changePlayer();
        }
      };
      tiles.forEach((tile, index) => {
        tile.addEventListener("click", () => userAction(tile, index));
      });
      const resetBoard = () => {
        board = ["", "", "", "", "", "", "", "", ""];
        isGameActive = true;
        announcer.classList.add("hide");
        if (currentPlayer === "O") {
          changePlayer();
        }
        tiles.forEach((tile) => {
          tile.innerText = "";
          tile.classList.remove("playerX");
          tile.classList.remove("playerO");
        });
        announcer.innerHTML=""
      }; 
    
      resetButton.addEventListener("click",resetBoard);
    });
    </script>
  </body>
</html>

https://tic-tac-toe-using-java-script.vercel.app/ - visit the link to play the game.

Aug 30, 2024

3 min read

0

11

0

Comments
Share Your ThoughtsBe the first to write a comment.
bottom of page