WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
टिक टैक टो गेम का HTML स्ट्रक्चर
66
iroger7
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
5 September 2025
HTML छवि ऑब्जेक्ट एनीमेशन कंटेनर
23 August 2025
तुर्की लॉगिन पृष्ठ HTML टेम्पलेट
28 July 2025
SVG डिज़ाइन के साथ HTML संदेश बबल
HTML
Copy
Tic Tac Toe Game
Tic Tac Toe
Restart Game
CSS
Copy
body { font-family: Arial, sans-serif; text-align: center; background: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333; } #game { display: grid; gap: 5px; grid-template-columns: repeat(3, 100px); margin: 20px auto; width: 310px; } .cell { width: 100px; height: 100px; background: #fff; border: 2px solid #333; font-size: 2em; line-height: 100px; cursor: pointer; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
JS
Copy
const cells = document.querySelectorAll('.cell'); const restartButton = document.getElementById('restartButton'); const winningCombinations = [ [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 isXTurn = true; let gameActive = true; const checkWin = (player) => { return winningCombinations.some(combination => combination.every(index => cells[index].textContent === player) ); }; const checkDraw = () => { return [...cells].every(cell => cell.textContent !== ''); }; const handleClick = (e) => { const cell = e.target; if (cell.textContent !== '' || !gameActive) return; cell.textContent = isXTurn ? 'X' : 'O'; if (checkWin(cell.textContent)) { alert(`${cell.textContent} wins!`); gameActive = false; return; } if (checkDraw()) { alert("It's a draw!"); gameActive = false; return; } isXTurn = !isXTurn; }; cells.forEach(cell => { cell.addEventListener('click', handleClick); }); restartButton.addEventListener('click', () => { cells.forEach(cell => { cell.textContent = ''; }); isXTurn = true; gameActive = true; });