Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<script src="script.js"></script>
</body>
</html>Script.js
//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";
}style.css
.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;
}
Here, You can get all advance level JavaScript project Help, assignment Help and homework Help.
If you have any project related to JavaScript, HTML, CSS and AJAX then contact us and get instant help with an affordable price:
Send Your requirement details at:
realcode4you@gmail.com
Comments