WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
टिक टैक टो गेम का HTML स्ट्रक्चर
307
iroger7
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
0
अनुशंसित
9 December 2025
हरे रंग का विद्युत फ्रेम
13 January 2024
टिक टैक टो गेम
28 October 2025
लाइट मोड टॉगल बटन HTML/CSS/JS
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; });