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

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

References

preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<q>Indica una parte di testo come citazione breve
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<textarea>Area di testo libero espandibile per form HTML
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Open.js Framework

5/10/24 es. 3 - inverti stringa

3 LS 29-01 TABELLA(2)

spotify dashboard

extract_filename_from_url

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