├── css ├── html └── javascript /css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | text-align: center; 4 | } 5 | 6 | h1 { 7 | margin-bottom: 20px; 8 | } 9 | 10 | #game-container { 11 | display: inline-block; 12 | margin-top: 20px; 13 | } 14 | 15 | #board { 16 | display: grid; 17 | grid-template-columns: repeat(3, 100px); 18 | grid-template-rows: repeat(3, 100px); 19 | gap: 5px; 20 | } 21 | 22 | .row { 23 | display: flex; 24 | } 25 | 26 | .cell { 27 | width: 100px; 28 | height: 100px; 29 | border: 1px solid #000; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | font-size: 2rem; 34 | cursor: pointer; 35 | background-color: #f4f4f4; 36 | } 37 | 38 | button { 39 | margin-top: 20px; 40 | padding: 10px 20px; 41 | font-size: 16px; 42 | cursor: pointer; 43 | } 44 | 45 | #message { 46 | margin-top: 20px; 47 | font-weight: bold; 48 | } 49 | -------------------------------------------------------------------------------- /html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tic Tac Toe 7 | 8 | 9 | 10 |

Tic Tac Toe

11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 |

31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /javascript: -------------------------------------------------------------------------------- 1 | const cells = document.querySelectorAll('.cell'); 2 | const resetButton = document.getElementById('reset-btn'); 3 | const message = document.getElementById('message'); 4 | 5 | let currentPlayer = 'X'; // X starts the game 6 | let board = ['', '', '', '', '', '', '', '', '']; // Empty board 7 | 8 | // Check if someone has won 9 | function checkWinner() { 10 | const winningCombination = [ 11 | [0, 1, 2], 12 | [3, 4, 5], 13 | [6, 7, 8], 14 | [0, 3, 6], 15 | [1, 4, 7], 16 | [2, 5, 8], 17 | [0, 4, 8], 18 | [2, 4, 6], 19 | ]; 20 | 21 | for (let combo of winningCombination) { 22 | const [a, b, c] = combo; 23 | if (board[a] && board[a] === board[b] && board[a] === board[c]) { 24 | return board[a]; 25 | } 26 | } 27 | 28 | // Check if the game is a tie 29 | if (!board.includes('')) { 30 | return 'Tie'; 31 | } 32 | 33 | return null; 34 | } 35 | 36 | // Handle a cell click event 37 | function handleCellClick(e) { 38 | const cellIndex = e.target.getAttribute('data-cell-index'); 39 | if (board[cellIndex] || checkWinner()) return; // If the cell is already filled or the game is over 40 | 41 | // Fill the cell with the current player's mark 42 | board[cellIndex] = currentPlayer; 43 | e.target.textContent = currentPlayer; 44 | 45 | const winner = checkWinner(); 46 | if (winner) { 47 | if (winner === 'Tie') { 48 | message.textContent = 'It\'s a tie!'; 49 | } else { 50 | message.textContent = `${winner} wins!`; 51 | } 52 | } else { 53 | // Switch players 54 | currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; 55 | } 56 | } 57 | 58 | // Reset the game 59 | function resetGame() { 60 | board = ['', '', '', '', '', '', '', '', '']; 61 | currentPlayer = 'X'; 62 | cells.forEach(cell => cell.textContent = ''); 63 | message.textContent = ''; 64 | } 65 | 66 | // Attach event listeners to cells 67 | cells.forEach(cell => cell.addEventListener('click', handleCellClick)); 68 | 69 | // Reset button functionality 70 | resetButton.addEventListener('click', resetGame); 71 | --------------------------------------------------------------------------------