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

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

Referenze

formnovalidateImpedisce la convalida di un singolo elemento input
<li>Inserisce voci all'interno di una lista
<caption>Definisce didascalie all'interno di una tabella
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<map>Inserisce immagini mappa cliccabili in un documento
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

sanchez ximena project 2

obbiettivi futuri

Autovalutazione.it

Twitchpage1confirm

esercitazioni ipertestual

codice theo fatto na merda

pablo_escobar_avanzata.html.

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