WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gioco X/O contro pc
1808
Anes_unk
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2025
Codice HTML JavaScript del gioco di indovinelli
22 March 2025
Sito di giocoweb
26 September 2024
Gioco di pila
HTML
Copy
Tic Tac Toe Game
Winner!
Scores
Player
Score
X
0
O
0
Restart
CSS
Copy
body { font-family: 'Roboto', sans-serif; background-color: #111; color: white; text-align: center; margin: 0; padding: 0; } .container { display: flex; justify-content: space-around; align-items: center; max-width: 1200px; margin: 50px auto; padding: 20px; border-radius: 15px; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); box-shadow: 0 0 30px rgba(0, 188, 255, 0.5); } #board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; /* Reduced gap */ margin: 20px; padding: 10px; background-color: #3a3a3a; border: 4px solid #00bfff; border-radius: 15px; box-shadow: 0 0 20px #00bfff; width: 420px; /* Adjusted width */ height: 420px; /* Adjusted height */ } .cell { width: 130px; height: 130px; background-color: #4a4a4a; display: flex; align-items: center; justify-content: center; font-size: 4rem; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } .cell:hover { background-color: #5a5a5a; box-shadow: 0 0 15px #00bfff; } .cell.X { color: red; text-shadow: 0 0 10px red; } .cell.O { color: blue; text-shadow: 0 0 10px blue; } #restart { margin-top: 20px; padding: 15px 30px; font-size: 1.5rem; color: white; background-color: #00bfff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s; width: 100%; } #restart:hover { background-color: #0094cc; transform: scale(1.05); } #scoreboard { padding: 20px; background-color: #3a3a3a; border: 4px solid #00bfff; border-radius: 15px; box-shadow: 0 0 20px #00bfff; width: 400px; } #scoreboard h2 { margin: 0; font-size: 2.5rem; text-align: right; text-shadow: 1px 1px 5px rgba(0, 188, 255, 0.8); } #scoreboard table { width: 100%; border-collapse: collapse; margin-top: 10px; } #scoreboard th, #scoreboard td { padding: 15px; border: 2px solid #00bfff; text-align: center; font-size: 1.8rem; } #scoreboard th { background-color: #00bfff; color: black; } #notification { position: fixed; top: 20px; right: 20px; background-color: rgba(0, 188, 255, 0.8); color: black; padding: 10px 20px; border-radius: 5px; display: none; font-size: 1.8rem; z-index: 100; box-shadow: 0 0 10px #00bfff; transition: opacity 0.5s ease; }
JS
Copy
const board = document.getElementById('board'); const cells = document.querySelectorAll('.cell'); const restartButton = document.getElementById('restart'); const scoreXDisplay = document.getElementById('scoreX'); const scoreODisplay = document.getElementById('scoreO'); const notification = document.getElementById('notification'); let currentPlayer = 'X'; let boardState = Array(9).fill(null); let gameActive = true; let score = { X: 0, O: 0 }; const winningConditions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; function handleCellClick(event) { const clickedCell = event.target; const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')); if (boardState[clickedCellIndex] || !gameActive) { return; } boardState[clickedCellIndex] = currentPlayer; clickedCell.textContent = currentPlayer; clickedCell.classList.add(currentPlayer); if (checkWin()) { showNotification(`Player ${currentPlayer} wins!`); score[currentPlayer]++; updateScoreboard(); gameActive = false; } else if (boardState.every(cell => cell)) { showNotification('Draw!'); gameActive = false; } else { currentPlayer = 'O'; computerPlay(); } } function computerPlay() { const availableCells = boardState.map((cell, index) => cell === null ? index : null).filter(cell => cell !== null); const randomIndex = Math.floor(Math.random() * availableCells.length); const computerMove = availableCells[randomIndex]; boardState[computerMove] = currentPlayer; cells[computerMove].textContent = currentPlayer; cells[computerMove].classList.add(currentPlayer); if (checkWin()) { showNotification(`Player ${currentPlayer} (Computer) wins!`); score[currentPlayer]++; updateScoreboard(); gameActive = false; } else if (boardState.every(cell => cell)) { showNotification('Draw!'); gameActive = false; } else { currentPlayer = 'X'; } } function checkWin() { return winningConditions.some(condition => { const [a, b, c] = condition; return boardState[a] === currentPlayer && boardState[b] === currentPlayer && boardState[c] === currentPlayer; }); } function showNotification(message) { notification.textContent = message; notification.style.display = 'block'; notification.style.opacity = '1'; setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => { notification.style.display = 'none'; }, 500); }, 3000); } function updateScoreboard() { scoreXDisplay.textContent = score.X; scoreODisplay.textContent = score.O; } function restartGame() { gameActive = true; currentPlayer = 'X'; boardState.fill(null); cells.forEach(cell => { cell.textContent = ''; cell.classList.remove('X', 'O'); }); notification.style.display = 'none'; } cells.forEach(cell => cell.addEventListener('click', handleCellClick)); restartButton.addEventListener('click', restartGame);