Spaces:
Running
Running
| <html lang="en"> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/ttt-single.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:14 GMT --> | |
| <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tic-Tac-Toe</title> | |
| <script src="../external.html?link=https://cdn.tailwindcss.com/"></script> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #1a1a1a, #3a3a3a); | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| } | |
| .game-board { | |
| display: grid; | |
| grid-template-columns: repeat(3, 100px); | |
| grid-template-rows: repeat(3, 100px); | |
| gap: 5px; | |
| margin: 20px auto; | |
| } | |
| .cell { | |
| width: 100px; | |
| height: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| border: 2px solid white; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .win { | |
| background-color: rgba(0, 255, 0, 0.5); | |
| animation: flash 0.5s alternate infinite; | |
| } | |
| @keyframes flash { | |
| from { background-color: rgba(0, 255, 0, 0.5); } | |
| to { background-color: rgba(0, 255, 0, 0.8); } | |
| } | |
| .countdown { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 5rem; | |
| font-weight: bold; | |
| opacity: 1; | |
| animation: fadeout 3s linear forwards; | |
| } | |
| @keyframes fadeout { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; visibility: hidden; } | |
| } | |
| .moving-text { | |
| position: absolute; | |
| top: 10px; | |
| white-space: nowrap; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| animation: moveLeft 10s linear infinite; | |
| } | |
| @keyframes moveLeft { | |
| from { left: 100%; } | |
| to { left: -100%; } | |
| } | |
| .clock { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center min-h-screen"> | |
| <!-- Back Arrow --> | |
| <div class="absolute top-2 left-2"> | |
| <button onclick="location.href='games-2.html'" class="text-white text-2xl">β¬ </button> | |
| </div> | |
| <!-- Moving Text --> | |
| <div class="moving-text text-yellow-500">ππ¦ π§πππ π¦ π§πππ§πππ§π’π</div> | |
| <!-- Clock --> | |
| <div class="clock" id="clock"></div> | |
| <!-- Countdown Before Start --> | |
| <div id="countdown" class="countdown text-red-500"></div> | |
| <!-- Game Info --> | |
| <div id="player-info" class="text-xl mt-4"></div> | |
| <!-- Game Board --> | |
| <div class="game-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> | |
| <script> | |
| let gameActive = false; | |
| let board = Array(9).fill(""); | |
| let player, computer; | |
| function startGame() { | |
| document.getElementById("countdown").textContent = "3"; | |
| setTimeout(() => document.getElementById("countdown").textContent = "2", 1000); | |
| setTimeout(() => document.getElementById("countdown").textContent = "1", 2000); | |
| setTimeout(() => { | |
| document.getElementById("countdown").style.display = "none"; | |
| gameActive = true; | |
| board.fill(""); | |
| // Randomly assign X or O | |
| player = Math.random() < 0.5 ? "X" : "O"; | |
| computer = player === "X" ? "O" : "X"; | |
| updateBoard(); | |
| document.getElementById("player-info").textContent = `You are ${player}, Computer is ${computer}`; | |
| if (computer === "X") { | |
| setTimeout(computerMove, 500); | |
| } | |
| }, 3000); | |
| } | |
| function makeMove(index) { | |
| if (!gameActive || board[index]) return; | |
| board[index] = player; | |
| updateBoard(); | |
| if (!checkWin()) setTimeout(computerMove, 500); | |
| } | |
| function computerMove() { | |
| if (!gameActive) return; | |
| let bestMove = findBestMove(); | |
| board[bestMove] = computer; | |
| updateBoard(); | |
| checkWin(); | |
| } | |
| function findBestMove() { | |
| let emptyCells = board.map((v, i) => v === "" ? i : null).filter(v => v !== null); | |
| for (let pattern of [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]) { | |
| let [a, b, c] = pattern; | |
| if (board[a] === player && board[b] === player && board[c] === "") return c; | |
| if (board[a] === player && board[c] === player && board[b] === "") return b; | |
| if (board[b] === player && board[c] === player && board[a] === "") return a; | |
| } | |
| return emptyCells[Math.floor(Math.random() * emptyCells.length)]; | |
| } | |
| function updateBoard() { | |
| document.querySelectorAll(".cell").forEach((cell, i) => { | |
| cell.textContent = board[i]; | |
| cell.classList.remove("win"); | |
| cell.style.color = board[i] === "X" ? "blue" : board[i] === "O" ? "red" : "white"; | |
| }); | |
| } | |
| function checkWin() { | |
| for (let pattern of [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]) { | |
| let [a, b, c] = pattern; | |
| if (board[a] && board[a] === board[b] && board[a] === board[c]) { | |
| document.getElementById("player-info").textContent = `${board[a]} Wins!`; | |
| pattern.forEach(i => document.querySelectorAll(".cell")[i].classList.add("win")); | |
| gameActive = false; | |
| setTimeout(startGame, 2000); | |
| return true; | |
| } | |
| } | |
| if (!board.includes("")) { | |
| document.getElementById("player-info").textContent = "It's a Draw!"; | |
| gameActive = false; | |
| setTimeout(startGame, 2000); | |
| } | |
| return false; | |
| } | |
| function updateClock() { | |
| document.getElementById("clock").textContent = new Date().toLocaleTimeString(); | |
| setTimeout(updateClock, 1000); | |
| } | |
| updateClock(); | |
| startGame(); | |
| </script> | |
| </body> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/ttt-single.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:15 GMT --> | |
| </html> |