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

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

Referenze

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<h1>Titolo di intestazione di primo livello
<select>Usato per creare un menu a tendina.
<iframe>Crea un frame all'interno di una pagina HTML.
<pre>Indica una parte di testo preformattato
<b>Formatta il testo in grassetto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Cambia colore testo JS

torta della nonna

Simple Calculator(2)

Selezione Telefoni

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 = "");
}