tic tac toe

AbdWebDeveloper14 · AbdWebDeveloper14 · commit 111705b546a4 · 2024-05-01T12:01:43.000+05:00
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+
+<!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>
+	<h1>Tic Tac Toe</h1>
+	<div class="game-board">
+		<div class="square" id="top-left">&nbsp;</div>
+		<div class="square" id="top-middle">&nbsp;</div>
+		<div class="square" id="top-right">&nbsp;</div>
+		<div class="square" id="middle-left">&nbsp;</div>
+		<div class="square" id="middle-middle">&nbsp;</div>
+		<div class="square" id="middle-right">&nbsp;</div>
+		<div class="square" id="bottom-left">&nbsp;</div>
+		<div class="square" id="bottom-middle">&nbsp;</div>
+		<div class="square" id="bottom-right">&nbsp;</div>
+	</div>
+	<div class="game-info">
+		<p id="turn">Turn: X</p>
+		<p id="result">&nbsp;</p>
+		<button id="reset">Reset</button>
+	</div>
+	<script src="java.js"></script>
+</body>
+</html>
diff --git a/java.js b/java.js
@@ -0,0 +1,57 @@
+let gameBoard = document.querySelector('.game-board');
+let squares = document.querySelectorAll('.square');
+let currentPlayer = 'X';
+let gameOver = false;
+
+gameBoard.addEventListener('click', (e) => {
+	if (e.target.classList.contains('square') && !gameOver) {
+		let square = e.target;
+		if (square.textContent === '') {
+			square.textContent = currentPlayer;
+			currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+			checkWinner();
+		}
+	}
+});
+
+document.getElementById('reset').addEventListener('click', () => {
+	squares.forEach((square) => {
+		square.textContent = '';
+	});
+	currentPlayer = 'X';
+	gameOver = false;
+	document.getElementById('turn').textContent = 'Turn: X';
+	document.getElementById('result').textContent = '';
+});
+
+function checkWinner() {
+	const winningCombinations = [
+		['top-left', 'top-middle', 'top-right'],
+		['middle-left', 'middle-middle', 'middle-right'],
+		['bottom-left', 'bottom-middle', 'bottom-right'],
+		['top-left', 'middle-left', 'bottom-left'],
+		['top-middle', 'middle-middle', 'bottom-middle'],
+		['top-right', 'middle-right', 'bottom-right'],
+		['top-left', 'middle-middle', 'bottom-right'],
+		['top-right', 'middle-middle', 'bottom-left']
+	];
+	
+	for (let combination of winningCombinations) {
+		if (
+			document.getElementById(combination[0]).textContent === currentPlayer &&
+			document.getElementById(combination[1]).textContent === currentPlayer &&
+			document.getElementById(combination[2]).textContent === currentPlayer
+		) {
+			gameOver = true;
+			document.getElementById('result').textContent = `Player ${currentPlayer} wins!`;
+			break;
+		}
+	}
+	
+	if (!gameOver && Array.from(squares).every((square) => square.textContent !== '')) {
+		gameOver = true;
+		document.getElementById('result').textContent = 'It\'s a draw!';
+	}
+	
+	document.getElementById('turn').textContent = `Turn: ${currentPlayer}`;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+.game-board {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 10px;
+}
+.square {
+	background-color: #ccc;
+	padding: 20px;
+	text-align: center;
+	cursor: pointer;
+	border: 1px solid black ;
+}
+.square:hover {
+	background-color: #aaa;
+}
+.game-info {
+	margin-top: 20px;
+}
+#result {
+	font-weight: bold;
+	color: #666;
+}
+#reset{
+	height: 40px;
+	width: 200px;
+	font-size: 30px;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-weight: 500;
+	background-color: #666;
+}
+#turn{
+	font-size: 20px;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-style: italic;
+}
+h1{
+	font-size: 40px;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	font-weight: 400;
+}
+
