Tic Tac Toe by @lion-h - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<embed>Tag per l'incorporamento di contenuti multimediali
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<h4>Titolo di intestazione di quarto livello
minlengthDetermina il numero minimo di caratteri per un elemento input
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
maxImposta il valore numerico o temporale massimo per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

un casino pazzesco

Esercizio (02/02/2024)

Esercitazione n. 3

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css"> <!-- Collegamento al file CSS -->
</head>
<body>
    <div class="container">
        <h1>Tic Tac Toe</h1>
        <!-- Griglia del gioco -->
        <div id="board">
            <!-- Ogni cella ha un attributo data-index per identificare la sua posizione -->
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>
        <!-- Pulsante per resettare il gioco -->
        <button id="reset">Reset</button>
        <!-- Paragrafo per mostrare lo stato del gioco -->
        <p id="status"></p>
    </div>
    <script src="script.js"></script> <!-- Collegamento al file JavaScript -->
</body>
</html>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Centra verticalmente il contenuto */
    margin: 0;
    background-color: #f0f0f0; /* Colore di sfondo */
}

.container {
    text-align: center; /* Centra il contenuto orizzontalmente */
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Crea una griglia 3x3 */
    grid-template-rows: repeat(3, 100px);
    gap: 5px; /* Spazio tra le celle */
    margin: 20px auto; /* Centra la griglia */
}

.cell {
    width: 100px;
    height: 100px;
    background-color: #fff; /* Colore di sfondo delle celle */
    border: 2px solid #000; /* Bordo delle celle */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em; /* Dimensione del testo (X o O) */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

#reset {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

#status {
    margin-top: 20px;
    font-size: 1.2em; /* Dimensione del testo dello stato del gioco */
}

// Seleziona gli elementi del DOM
const board = document.getElementById('board');
const cells = document.querySelectorAll('.cell');
const statusText = document.getElementById('status');
const resetButton = document.getElementById('reset');

// Variabili di stato del gioco
let currentPlayer = 'X'; // Giocatore corrente (X o O)
let gameState = ['', '', '', '', '', '', '', '', '']; // Stato delle celle (vuote all'inizio)
let gameActive = true; // Indica se il gioco è ancora attivo

// Condizioni di vittoria (combinazioni vincenti)
const winningConditions = [
    [0, 1, 2], // Prima riga
    [3, 4, 5], // Seconda riga
    [6, 7, 8], // Terza riga
    [0, 3, 6], // Prima colonna
    [1, 4, 7], // Seconda colonna
    [2, 5, 8], // Terza colonna
    [0, 4, 8], // Diagonale principale
    [2, 4, 6]  // Diagonale secondaria
];

// Funzione per gestire il clic su una cella
function handleCellClick(event) {
    const clickedCell = event.target; // Cella cliccata
    const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')); // Indice della cella

    // Se la cella è già occupata o il gioco è finito, esci dalla funzione
    if (gameState[clickedCellIndex] !== '' || !gameActive) {
        return;
    }

    // Aggiorna lo stato del gioco e il contenuto della cella
    gameState[clickedCellIndex] = currentPlayer;
    clickedCell.textContent = currentPlayer;

    // Controlla se c'è un vincitore
    checkForWinner();
}

// Funzione per controllare se c'è un vincitore o un pareggio
function checkForWinner() {
    let roundWon = false; // Indica se il round è stato vinto

    // Itera attraverso tutte le condizioni di vittoria
    for (let i = 0; i < winningConditions.length; i++) {
        const winCondition = winningConditions[i];
        const a = gameState[winCondition[0]]; // Prima cella della combinazione
        const b = gameState[winCondition[1]]; // Seconda cella della combinazione
        const c = gameState[winCondition[2]]; // Terza cella della combinazione

        // Se una delle celle è vuota, salta questa combinazione
        if (a === '' || b === '' || c === '') {
            continue;
        }

        // Se tutte e tre le celle sono uguali, c'è un vincitore
        if (a === b && b === c) {
            roundWon = true;
            break;
        }
    }

    // Se c'è un vincitore, mostra il messaggio e disabilita il gioco
    if (roundWon) {
        statusText.textContent = `Il giocatore ${currentPlayer} ha vinto!`;
        gameActive = false;
        return;
    }

    // Controlla se c'è un pareggio (tutte le celle sono occupate)
    const roundDraw = !gameState.includes('');
    if (roundDraw) {
        statusText.textContent = 'Pareggio!';
        gameActive = false;
        return;
    }

    // Cambia il giocatore corrente
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    statusText.textContent = `È il turno di ${currentPlayer}`;
}

// Funzione per resettare il gioco
function resetGame() {
    gameState = ['', '', '', '', '', '', '', '', '']; // Resetta lo stato del gioco
    gameActive = true; // Riattiva il gioco
    currentPlayer = 'X'; // Ripristina il giocatore iniziale
    statusText.textContent = `È il turno di ${currentPlayer}`; // Aggiorna il messaggio di stato
    cells.forEach(cell => cell.textContent = ''); // Svuota il contenuto delle celle
}

// Aggiungi event listener alle celle e al pulsante di reset
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetButton.addEventListener('click', resetGame);

// Mostra il messaggio iniziale
statusText.textContent = `È il turno di ${currentPlayer}`;