Simon Says Game.
- Jul 21, 2024
- 35
Tic-Tac-Toe project is a very helpful project for beginners who want to become web developers or Javascript developers in the future.
The JavaScript Project Tic Tac Toe Game: This game is played between two players. It is a very easy and interesting game. And in this blog today we are going to make our own Tic Tac Toe game. HTML, CSS and Javascript.
Player-1 initiates the game, and each player takes turns making moves in succession. The game is won by the person who constructs a straight 3-block chain. Only basic logic and validation checks are used in the front-end development of this game.
How to Design a Tic Tac Toe:
Start with a basic HTML file. Create three choices for users: "rock," "paper," and "scissors." a scoreboard for displaying the score of the game and a message container for displaying messages for the user.
Use CSS to style the scoreboard and message container. To center the body and images on the page, add some styling.
Once the layout is created, we need to create JavaScript file, Create two score variables, userscore and compscore, and select HTML elements choice, message, userscore, and compscore, and create drawGame() a function for handling a draw game, the ShowWinner() function for determining and displaying the winner, the getcomputerChoice() function for randomly selecting between "rock," "paper," and "scissors" for the computer, and the playgame() function for handling game logic, and then add eventlistener to add a click event listener to each of the choice buttons (rock, paper, scissors). This is how you can create its basic structure, and to download the source code, click on the download button given below.
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>Tic-Tac-Toe</h1>
<div class="msg-container hide">
<p class="msg">Winner</p>
<button class="New-btn">New Game</button>
</div>
<div class="contaner">
<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 class="reset">Reset Game!</button>
</main>
<footer>
<p>made by gaurav bhatt</p>
</footer>
<script src="script.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-color: #49E9E6;
text-align: center;
}
.contaner{
height: 70vh;
display: flex;
flex-wrap: wrap;
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: #EF3E36;
background-color: white;
}
.reset{
padding: 1rem;
font-size: 1.25rem;
background-color:#2E282A;
color: white;
border-radius: 1rem;
}
.msg{
color: #EF3E36;
font-size: 8vmin;
margin-top: 2rem;
margin-bottom: 2rem;
font-weight: 700;
}
.New-btn{
padding: 1rem;
font-size: 1.25rem;
background-color:#2E282A;
color: white;
border-radius: 1rem;
}
footer{
margin-top: 4rem;
}
.msg-container{
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4rem;
margin-top: 2rem;
}
.hide{
display: none;
}
.color{
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0,0,0,0.3);
font-size: 8vmin;
background-color: white;
color: rgb(13, 243, 13);
}
.color-x{
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0,0,0,0.3);
font-size: 8vmin;
background-color: white;
color: red;
}
h1{
text-decoration: underline red;
font-style: italic;
font-size: 4rem;
}
let boxes = document.querySelectorAll(".box");
let reset = document.querySelector(".reset");
let newgamebtn = document.querySelector(".New-btn");
let msgcontainer = document.querySelector(".msg-container");
let msg = document.querySelector(".msg");
let container = document.querySelector(".container");
let turn0 = true;
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 = () => {
turn0 = true;
enableboxes();
count = 0;
msgcontainer.classList.add("hide");
};
let count = 0;
boxes.forEach((box) => {
box.addEventListener("click", () => {
count++;
if (turn0) {
box.classList.add("color");
box.innerText = "O";
turn0 = false;
} else {
box.classList.add("color-x");
box.innerText = "X";
turn0 = true;
}
box.disabled = true;
checkwinner();
checkdraw();
});
});
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 pos1 = boxes[pattern[0]].innerText;
let pos2 = boxes[pattern[1]].innerText;
let pos3 = boxes[pattern[2]].innerText;
if (pos1 != "" && pos2 != "" && pos3 != "") {
if (pos1 === pos2 && pos2 === pos3) {
showWinner(pos1);
}
}
}
};
const checkdraw = () => {
if (count === 9) {
msg.innerText = "DRAW!";
msgcontainer.classList.remove("hide");
}
};
newgamebtn.addEventListener("click", resetgame);
reset.addEventListener("click", resetgame);
Leave Comments