Tic Tac Toe javascript with HTML & Pure CSS – 2 player Tic Tac Toe javascript with source code

0
()

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 javascript
tic tac toe javascript

Tic Tac Toe HTML Code

index.html

<body>
  <section>
    <h1 class="activity--title">Tic Tac Toe</h1>
    <div class="activity--container">
      <div data-unit-index="0" class="unit"></div>
      <div data-unit-index="1" class="unit"></div>
      <div data-unit-index="2" class="unit"></div>
      <div data-unit-index="3" class="unit"></div>
      <div data-unit-index="4" class="unit"></div>
      <div data-unit-index="5" class="unit"></div>
      <div data-unit-index="6" class="unit"></div>
      <div data-unit-index="7" class="unit"></div>
      <div data-unit-index="8" class="unit"></div>
    </div>
    <h2 class="activity--position"></h2>
    <button class="activity--renew">Renew Game</button>
  </section>
</body>

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

<!DOCTYPE html>
<html>
<head>
<title>tic tac toe javascript - Pure and Simple - Tic Tac Toe with Javascript - www.pakainfo.com</title>
<style>
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;
}

</style>
</head>
<body>
  <section>
    <h1 class="activity--title">Tic Tac Toe</h1>
    <div class="activity--container">
      <div data-unit-index="0" class="unit"></div>
      <div data-unit-index="1" class="unit"></div>
      <div data-unit-index="2" class="unit"></div>
      <div data-unit-index="3" class="unit"></div>
      <div data-unit-index="4" class="unit"></div>
      <div data-unit-index="5" class="unit"></div>
      <div data-unit-index="6" class="unit"></div>
      <div data-unit-index="7" class="unit"></div>
      <div data-unit-index="8" class="unit"></div>
    </div>
    <h2 class="activity--position"></h2>
    <button class="activity--renew">Renew Game</button>
  </section>
  
<script>
  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);
</script>
</body>
</html>

Download

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.

Read Also:  Ng-Options to Bind DropdownList using Angular Example

How useful was this post?

Click on a star to rate it!

Free Live Chat for Any Issue