tic tac toe javascript – Tic-Tac-Toe is a main 2 player smart game in which the players fill up 9 blocks empty rectangles type in a basic table with either an X player or an O player when it is their turn. In this article we take a look at creating an advanced Pure JavaScript tic tac toe game using CSS and HTML.

tic tac toe javascript – Code a Tic Tac Toe Game With JavaScript

We needs to track any clicks that happen on our units of Tic Tac Toe are built using nine div tags. All the div tags are grouped into a single HTML div tag with data-unit-index board with tic tac toe javascript. also you can read : 3 Best Online Games For Your Phone

Tic Tac Toe HTML Code

index.html

  

    
Tic Tac Toe
    

      

      

      

      

      

      

      

      

      

    
    

    Renew Game
  

Tic Tac Toe JavaScript Code : tic tac toe javascript

main.js

const positionDisplay = document.querySelector(".activity--position");

let ticTacCurrent = true;
let ActiveUser = "X";
let ticTacPhase = ["", "", "", "", "", "", "", "", ""];

const winningMessage = () => `Player ${ActiveUser} has won!`;
const drawMessage = () => `Game ended in a draw!`;
const ActiveUserTurn = () => `It's ${ActiveUser}'s turn`;

positionDisplay.innerHTML = ActiveUserTurn();

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]
];

function handleUnitPlayed(clickedUnit, clickedUnitIndex) {
  ticTacPhase[clickedUnitIndex] = ActiveUser;
  clickedUnit.innerHTML = ActiveUser;
}

function handlePlayerChange() {
  ActiveUser = ActiveUser === "X" ? "O" : "X";
  positionDisplay.innerHTML = ActiveUserTurn();
}

function handleResultValidation() {
  let roundWon = false;
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];
    let a = ticTacPhase[winCondition[0]];
    let b = ticTacPhase[winCondition[1]];
    let c = ticTacPhase[winCondition[2]];
    if (a === "" || b === "" || c === "") {
      continue;
    }
    if (a === b && b === c) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    positionDisplay.innerHTML = winningMessage();
    ticTacCurrent = false;
    return;
  }

  let roundDraw = !ticTacPhase.includes("");
  if (roundDraw) {
    positionDisplay.innerHTML = drawMessage();
    ticTacCurrent = false;
    return;
  }

  handlePlayerChange();
}

function handleUnitClick(clickedUnitEvent) {
  const clickedUnit = clickedUnitEvent.target;
  const clickedUnitIndex = parseInt(
    clickedUnit.getAttribute("data-unit-index")
  );

  if (ticTacPhase[clickedUnitIndex] !== "" || !ticTacCurrent) {
    return;
  }

  handleUnitPlayed(clickedUnit, clickedUnitIndex);
  handleResultValidation();
}

function handleRenewActivity() {
  ticTacCurrent = true;
  ActiveUser = "X";
  ticTacPhase = ["", "", "", "", "", "", "", "", ""];
  positionDisplay.innerHTML = ActiveUserTurn();
  document.querySelectorAll(".unit").forEach((unit) => (unit.innerHTML = ""));
}

document
  .querySelectorAll(".unit")
  .forEach((unit) => unit.addEventListener("click", handleUnitClick));
document
  .querySelector(".activity--renew")
  .addEventListener("click", handleRenewActivity);

Tic Tac Toe CSS Code

main.css

body {
  font-family: "Arial", sans-serif;
}

section {
  text-align: center;
}

.activity--title {
  font-size: 100px;
  color: #d7a62f;
  margin: 10px auto;
}

.activity--container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 306px;
  margin: 10px auto;
  background-color: #11213a;
  color: #04c0b2;
}

.unit {
  font-family: "Permanent Marker", cursive;
  width: 100px;
  height: 100px;
  box-shadow: 2px 2px 2px 2px #ecd7ba;
  border: 2px solid #ecd7ba;
  cursor: pointer;
  line-height: 100px;
  font-size: 60px;
}

.activity--position {
  font-size: 50px;
  color: #d7a62f;
  margin: 20px auto;
}

.activity--renew {
  background-color: #f7e4ac;
  width: 200px;
  height: 50px;
  font-size: 25px;
  color: #5586e2;
  box-shadow: 2px 2px 2px 2px #d86c23;
  border: 2px solid #d86c23;
  cursor: pointer;
}

Full Source Code : Simple Tic-Tac-Toe JavaScript game for beginners

tic tac toe javascript game for beginners using HTML, CSS.
index.html

  

    
Tic Tac Toe
    

      

      

      

      

      

      

      

      

      

    
    

    Renew Game
  
  

I hope you get an idea about tic tac toe javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.