Spaces:
Running
Running
| <html lang="en"> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/ttt-multi.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 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; | |
| } | |
| .input-container { | |
| margin-top: 20px; | |
| } | |
| .input-field { | |
| background-color: #1e3a8a; /* Blue background */ | |
| color: white; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| border-radius: 5px; | |
| border: 2px solid #2563eb; | |
| font-size: 1rem; | |
| } | |
| .start-button { | |
| background-color: #2563eb; | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 1.2rem; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .game-board-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .game-board { | |
| margin-bottom: 20px; | |
| } | |
| .input-container { | |
| margin-top: 20px; | |
| } | |
| </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> | |
| <!-- Player Info Input --> | |
| <div class="input-container"> | |
| <input id="player1" class="input-field" type="text" placeholder="Enter Player 1 Name" /> | |
| <input id="player2" class="input-field" type="text" placeholder="Enter Player 2 Name" /> | |
| <button class="start-button" onclick="startGame()">Start Game</button> | |
| </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-container"> | |
| <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> | |
| </div> | |
| <script> | |
| let gameActive = false; | |
| let board = Array(9).fill(""); | |
| let player1, player2, currentPlayer, currentSymbol; | |
| function startGame() { | |
| const name1 = document.getElementById("player1").value.trim(); | |
| const name2 = document.getElementById("player2").value.trim(); | |
| if (!name1 || !name2) { | |
| alert("Please enter both player names."); | |
| return; | |
| } | |
| // Store player names in localStorage | |
| localStorage.setItem("player1", name1); | |
| localStorage.setItem("player2", name2); | |
| 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(""); | |
| // Retrieve player names from localStorage | |
| player1 = localStorage.getItem("player1"); | |
| player2 = localStorage.getItem("player2"); | |
| // Randomly assign X or O | |
| let players = [player1, player2]; | |
| currentPlayer = players[Math.random() < 0.5 ? 0 : 1]; // Randomly select the first player | |
| currentSymbol = currentPlayer === players[0] ? "X" : "O"; // Assign X or O based on the selection | |
| updateBoard(); | |
| document.getElementById("player-info").textContent = `${currentPlayer} plays as ${currentSymbol}`; | |
| }, 3000); | |
| } | |
| function makeMove(index) { | |
| if (!gameActive || board[index]) return; | |
| board[index] = currentSymbol; | |
| updateBoard(); | |
| if (!checkWin()) { | |
| currentPlayer = currentPlayer === player1 ? player2 : player1; // Switch player turn | |
| currentSymbol = currentSymbol === "X" ? "O" : "X"; // Switch symbol | |
| document.getElementById("player-info").textContent = `${currentPlayer} plays as ${currentSymbol}`; | |
| } | |
| } | |
| function updateBoard() { | |
| document.querySelectorAll(".cell").forEach((cell, i) => { | |
| cell.textContent = board[i]; | |
| 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(() => { | |
| // Remove the "win" class after 2 seconds to stop flashing | |
| pattern.forEach(i => document.querySelectorAll(".cell")[i].classList.remove("win")); | |
| startGame(); // Restart the game | |
| }, 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(); | |
| </script> | |
| </body> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/ttt-multi.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT --> | |
| </html> |