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

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

References

minImposta il valore numerico o temporale minimo per un elemento input
<ul>Usato per la creazione di liste non ordinate.
formmethodDefinisce il metodo di invio dei dati oltre a method
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

Media ponderata

Ufficio FSL [Fumetto Toastmasters]

Compito informatica

esercitazione 7

JS Strutture dati e funzioni es3

04_Operators and Expressions

Test DESC BREVE Pavimenti

Test Gaming HTML MEME

Casetta NEWTON+

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