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

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

Referenze

<em>Formatta il testo in corsivo/italico enfatizzato
relServe a definire la relazione tra il documento e una risorsa.
<nav>Definisce un menu di navigazione
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il mondo della tecnologia

Heads Or Tails Random Tally

Heads Or Tails Random Tally

UX / Web Design Green – Progetto

Quiz ristrutturazione

Form Raccolta Segnalazioni Immobil

Esercizi di Riepilogo (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="style.css">
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div id="game-board">
    <!-- 9 celle del gioco -->
    <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>
  <p id="status"></p>
  <button onclick="restartGame()">Ricomincia</button>

  <script src="script.js"></script>
</body>
</html>

/* style.css */

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

#game-board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 5px;
  justify-content: center;
  margin: 20px auto;
}

.cell {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #333;
}

.cell:hover {
  background-color: #ddd;
}

#status {
  font-size: 20px;
  margin: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

// script.js

// Stato del gioco
let board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X"; // Il giocatore è "X", il computer è "O"
let isGameOver = false;

// Recupera tutte le celle
const cells = document.querySelectorAll(".cell");
const statusText = document.getElementById("status");

// Aggiunge gli eventi di click a ogni cella
cells.forEach(cell => {
  cell.addEventListener("click", handlePlayerMove);
});

// Funzione eseguita quando il giocatore clicca su una cella
function handlePlayerMove(event) {
  const index = event.target.dataset.index;

  // Se la cella è già occupata o il gioco è finito, esce
  if (board[index] !== "" || isGameOver) return;

  // Segna la X del giocatore
  board[index] = "X";
  event.target.textContent = "X";

  // Controlla se il giocatore ha vinto
  if (checkWinner("X")) {
    statusText.textContent = "Hai vinto!";
    isGameOver = true;
    return;
  }

  // Se non ci sono più spazi, è pareggio
  if (board.every(cell => cell !== "")) {
    statusText.textContent = "Pareggio!";
    isGameOver = true;
    return;
  }

  // Turno del computer dopo un breve ritardo
  setTimeout(computerMove, 500);
}

// Mossa del computer (random)
function computerMove() {
  if (isGameOver) return;

  // Trova le celle vuote
  const emptyCells = board
    .map((value, index) => value === "" ? index : null)
    .filter(index => index !== null);

  // Sceglie una cella a caso
  const randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];

  // Segna la O del computer
  board[randomIndex] = "O";
  cells[randomIndex].textContent = "O";

  // Controlla se il computer ha vinto
  if (checkWinner("O")) {
    statusText.textContent = "Hai perso!";
    isGameOver = true;
    return;
  }

  // Controlla pareggio
  if (board.every(cell => cell !== "")) {
    statusText.textContent = "Pareggio!";
    isGameOver = true;
  }
}

// Controlla le combinazioni vincenti
function checkWinner(player) {
  const winConditions = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // righe
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // colonne
    [0, 4, 8], [2, 4, 6]             // diagonali
  ];

  return winConditions.some(combination => {
    return combination.every(index => board[index] === player);
  });
}

// Riavvia il gioco
function restartGame() {
  board = ["", "", "", "", "", "", "", "", ""];
  isGameOver = false;
  currentPlayer = "X";
  statusText.textContent = "";
  cells.forEach(cell => cell.textContent = "");
}