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

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

References

<select>Usato per creare un menu a tendina.
formnovalidateImpedisce la convalida di un singolo elemento input
<h2>Titolo di intestazione di secondo livello
<h4>Titolo di intestazione di quarto livello
<option>Serve ad inserire una voce in un menu di selezione.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto

Users

Log in to search for users

Explore

Find inspiration

nomedascegliere

project-freecodecamp.org

Pagina di esempio

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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}`;