TIC-TAC-TOE
Basically if your creating games in JavaScript then there is a concept of DOM manipulation
so basically in order to create any game you need to understand the logic first
so here there is a simple logic applied in order to create this game.
as you all know the basic rules of the game, here we have two players 1 with maybe x and the other maybe with o , the players have an alternative turns to which if a player get 3x or 3o is considered as a winner.
now lets understand the orientation
here, we have 3 winning orientations
--> horizontal
--> vertical
--> diagonal
coming to the winning patterns we have
--> horizontal winning pattern
0,1,2
3,4,5
6,7,8
-->vertical winning patterns
0,3,6
1,4,7
2,5,8
--> diagonal winning patterns
0,4,8
2,4,6
so basically we have 8 winning patterns.
lets try to understand the code to make this game.
Recommended by LinkedIn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tic-Tac-Toe Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="msg-container hide">
<p id="msg">Winner</p>
<button id="new-btn">New Game</button>
</div>
<main>
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="game">
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
</div>
</div>
<button id="reset-btn">Reset Game</button>
</main>
<script src="app.js"></script>
</body>
</html>
so here in html file we are creating 9 boxes as buttons for the game functionality.
* {
margin: 0;
padding: 0;
}
body {
background-color: #548687;
text-align: center;
}
.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.game {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #b0413e;
background-color: #ffffc7;
}
#reset-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#new-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#msg {
color: #ffffc7;
font-size: 5vmin;
}
.msg-container {
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4rem;
}
.hide {
display: none;
}
now for those boxes well be designing to get a proper game setup.
let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");
let turnO = true; //playerX, playerO
let count = 0; //To Track Draw
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8],
];
const resetGame = () => {
turnO = true;
count = 0;
enableBoxes();
msgContainer.classList.add("hide");
};
boxes.forEach((box) => {
box.addEventListener("click", () => {
if (turnO) {
//playerO
box.innerText = "O";
turnO = false;
} else {
//playerX
box.innerText = "X";
turnO = true;
}
box.disabled = true;
count++;
let isWinner = checkWinner();
if (count === 9 && !isWinner) {
gameDraw();
}
});
});
const gameDraw = () => {
msg.innerText = `Game was a Draw.`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const disableBoxes = () => {
for (let box of boxes) {
box.disabled = true;
}
};
const enableBoxes = () => {
for (let box of boxes) {
box.disabled = false;
box.innerText = "";
}
};
const showWinner = (winner) => {
msg.innerText = `Congratulations, Winner is ${winner}`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const checkWinner = () => {
for (let pattern of winPatterns) {
let pos1Val = boxes[pattern[0]].innerText;
let pos2Val = boxes[pattern[1]].innerText;
let pos3Val = boxes[pattern[2]].innerText;
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
if (pos1Val === pos2Val && pos2Val === pos3Val) {
showWinner(pos1Val);
return true;
}
}
}
};
newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);
here, comes the fun part of js where we shall be adding functionality
so first we need to track the elements that needs to be accessed ie boxes.
next we need to track the alternate turns
next we need to store the winning patterns so here well use arrays.
now once we clicked on a button there should be an action performed. To do that we shall add event listeners. now for alternate turns we shall be using if conditions.
so basically if (turn0) is true
box.innerText = "o" ;
else
box.innerText = "x";
once the logic is done now we are checking for a winner. To do that we need to create a function as checkwinner().
now to do that we need to check the winning patterns. for that we shall be using a for statement, where it checks for each pattern with winning pattern.
next calculating the position values,
so, here we use position1value === position2value && position2value ===position3value
then declare a winner, and also a condition where the positions should not be empty values.
so this is how our game works.
Thankyou happy coding :)