Tic-Tac-Toe: Design a simple version of the classic Tic-Tac-Toe game. Players take turns marking X or O on a grid, and the first to get three in a row wins.
Here's a simple implementation of the Tic-Tac-Toe game using HTML, CSS, and JavaScript:-
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<div class="board">
<div class="cell" onclick="makeMove(0)"></div>
<div class="cell" onclick="makeMove(1)"></div>
<div class="cell" onclick="makeMove(2)"></div>
<div class="cell" onclick="makeMove(3)"></div>
<div class="cell" onclick="makeMove(4)"></div>
<div class="cell" onclick="makeMove(5)"></div>
<div class="cell" onclick="makeMove(6)"></div>
<div class="cell" onclick="makeMove(7)"></div>
<div class="cell" onclick="makeMove(8)"></div>
</div>
<button onclick="resetGame()">Reset</button>
<script src="script.js"></script>
</body>
</html>
-----------------------------------------------------------------------
CSS (style.css):
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
.board {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 240px;
margin: 20px auto;
}
.cell {
width: 70px;
height: 70px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}
button {
font-size: 16px;
padding: 10px 20px;
cursor: pointer;
}
-----------------------------------------------------------------------------------------------------------
JavaScript (script.js):
// Variables to track the game state
let currentPlayer = "X";
let gameEnded = false;
let moves = ["", "", "", "", "", "", "", "", ""];
// Function to make a move
function makeMove(index) {
if (!gameEnded && moves[index] === "") {
moves[index] = currentPlayer;
document.getElementsByClassName("cell")[index].textContent = currentPlayer;
if (checkWin(currentPlayer)) {
endGame(currentPlayer + " wins!");
} else if (!moves.includes("")) {
endGame("It's a draw!");
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
}
}
// Function to check if a player has won
function checkWin(player) {
const winningCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let combo of winningCombos) {
if (
moves[combo[0]] === player &&
moves[combo[1]] === player &&
moves[combo[2]] === player
) {
return true;
}
}
return false;
}
// Function to end the game
function endGame(message) {
gameEnded = true;
document.getElementById("message").textContent = message;
}
// Function to reset the game
function resetGame() {
currentPlayer = "X";
gameEnded = false;
moves = ["", "", "", "", "", "", "", "", ""];
document.getElementById("message").textContent = "";
const cells = document.getElementsByClassName("cell");
for (let cell of cells) {
cell.textContent = "";
}
}
----------------------------------------------------------------------------
Save the HTML code in a file named "index.html," the CSS code in a file named "style.css," and the JavaScript code in a file named "script.js". Place all three files in the same directory. Open the index.html file in a web browser, and you should see the Tic-Tac-Toe game interface.
Players take turns clicking on the cells of the 3x3 grid to mark X or O. The game checks for a winning combination after each move and displays the winner or a draw message. Clicking the "Reset" button clears the board and starts a new game.
Note: This implementation is a basic version .You can enhance the game further by adding those features or customizing the design to your liking.
Comments
Post a Comment