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

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

References

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
widthImposta la larghezza di un elemento HTML
requiredRende obbligatorio un campo di input
classDefinisce una o più classi per elemento
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
downloadConsente di scaricare file al click di collegamento ipertestuale.

Users

Log in to search for users

Explore

Find inspiration

esercitazione 1

form registrazione sportiva

"esercitazione 6.html"

Gesù nostro signore(2)

Crunchyroll Replica

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