Come creare un gioco Tic Tac Toe con HTML, CSS e JavaScript

Proverò a codificare il gioco del tris con i linguaggi HTML, CSS e JavaScript. La situazione finale del gioco sarà la seguente:

Prima di tutto, voglio dare alcune informazioni sul gioco.

Cos'è il tris? Quali sono le regole del gioco?

• È un gioco per due giocatori.
• Di solito si gioca su una tavola 3x3, ma può essere più ampia. Prenderò come base la tavola 3x3.
• Il giocatore che ha iniziato per primo riempie le caselle vuote digitando "X" e l'altro giocatore "O".
• Un giocatore vince la partita quando XXX o OOO in righe, colonne o diagonali.

• Se tutte le caselle sono riempite e viene fornita una delle condizioni di cui sopra, la partita è in parità.

codice HTML:

Ho aggiunto un tag h1 in div il cui id è il titolo

Per creare il tabellone 3*3 richiesto per il gioco, ho creato un div il cui id è il tabellone.

Ho creato ogni quadrato sul tabellone in un div la cui classe è quadrato. Ho creato un ID per ogni quadrato.

Per poter ricominciare il gioco, ho aggiunto un input il cui valore di tipo è un pulsante. Ho creato questo div interno il cui id è endGame. La schermata di gioco dovrebbe reimpostarsi quando si fa clic sul pulsante. Quindi ho aggiunto la funzione all'evento onclick per chiamare la funzione che ho creato in javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Roboto+Serif&display=swap" rel="stylesheet">
</head>
<body>
    <div id="title">
        <h1>Tic Tac Toe</h1>
    </div>
    <div id="board">
        <div class="square" id="square0"></div>
        <div class="square" id="square1"></div>
        <div class="square" id="square2"></div>
        <div class="square" id="square3"></div>
        <div class="square" id="square4"></div>
        <div class="square" id="square5"></div>
        <div class="square" id="square6"></div>
        <div class="square" id="square7"></div>
        <div class="square" id="square8"></div>
    </div>  
    <div id="endGame">
        <input type="button" value="Restart" id="restartButton" onclick="restartButton()"/>
    </div>
    <script src="game.js"></script>
</body>
</html>

Ho messo il titolo al centro della pagina.

Metto il div il cui id è board al centro della pagina. Ho impostato le proprietà del margine per questo.

Ho impostato le proprietà di larghezza e altezza del div il cui id è board.

Il tabellone è composto da 9 quadrati, ho creato la griglia delle proprietà di visualizzazione per crearlo. Ho creato 9 frame con le impostazioni delle colonne del modello Grid. Ho impostato la spaziatura tra le griglie con la proprietà grid-gap.

Ho impostato le proprietà di larghezza e altezza per ogni quadrato. Ho aggiunto la proprietà border a questi quadrati. Ho aggiunto un colore di sfondo ai quadrati. Ho impostato la sua posizione usando la proprietà display. Ho creato il cambio di colore passando con il mouse sopra i quadrati. Ho usato la funzione hover per questo.

Ho impostato le proprietà di visualizzazione e altri stili su quello il cui id è restartButton. Inoltre, ho utilizzato la funzione al passaggio del mouse.

body {  
    font-family: 'Poppins', sans-serif;
    color: #000000;
}

h1 {
    text-align: center;
}

#board {
    margin-left: auto;
    margin-right: auto;
    width: 375px;
    height: 375px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.square {
    width: 120px;
    height: 120px;
    border: 1px solid #D3D3D3;
    background-color: #F5F5F5;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.square:hover {
    background-color: #FFFFE0;
}

#restartButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    width: 150px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 40px;
    font-size: 18px;
}

#restartButton:hover {
    background-color: #000000;
    color: #FFFFFF;
}

Ho utilizzato le funzionalità HTML DOM per elaborare gli elementi che utilizzo in HTML tramite JavaScript.

Per arrivare al div con l'id di board e al div con il class square nel file HTML, li ho ottenuti assegnandoli alle variabili con i tag DOM corrispondenti.

Ho creato una serie chiamata "giocatori" per il gioco. Gli elementi dell'array sono X e O.

Poiché X è stato il primo ad avviare il gioco, ho assegnato i giocatori[0] alla variabile currentPlayer.

const board = document.getElementById('board')
const squares = document.getElementsByClassName('square')
const players = ['X', 'O']
let currentPlayer = players[0]

const endMessage = document.createElement('h2')
endMessage.textContent = `X's turn!`
endMessage.style.marginTop = '30px'
endMessage.style.textAlign='center'
board.after(endMessage)

const winning_combinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
]

function checkWin(currentPlayer) {
    for(let i = 0; i < winning_combinations.length; i++){
        const [a, b, c] = winning_combinations[i]
        if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){
            return true
        }
    }
    return false
}

function checkTie(){
    for(let i = 0; i < squares.length; i++) {
        if(squares[i].textContent === '') {
            return false;
        }
    }
    return true
}

function restartButton() {
    for(let i = 0; i < squares.length; i++) {
        squares[i].textContent = ""
    }
    endMessage.textContent=`X's turn!`
    currentPlayer = players[0]
}

for(let i = 0; i < squares.length; i++){
    squares[i].addEventListener('click', () => {
        if(squares[i].textContent !== ''){
            return
        }
        squares[i].textContent = currentPlayer
        if(checkWin(currentPlayer)) {
            endMessage.textContent=`Game over! ${currentPlayer} wins!`
            return
        }
        if(checkTie()) {
            endMessage.textContent= `Game is tied!`
            return
        }
        currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] 
        if(currentPlayer == players[0]) {
            endMessage.textContent= `X's turn!`
        } else {
            endMessage.textContent= `O's turn!`
        }     
    })   
}

const board = document.getElementById('board')
const squares = document.getElementsByClassName('square')
const players = ['X', 'O']
let currentPlayer = players[0]
const endMessage = document.createElement('h2')
endMessage.textContent = `X's turn!`
endMessage.style.marginTop = '30px'
endMessage.style.textAlign='center'
board.after(endMessage)

const winning_combinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
]

for(let i = 0; i < squares.length; i++){
    squares[i].addEventListener('click', () => {
        if(squares[i].textContent !== ''){
            return
        }
        squares[i].textContent = currentPlayer
        if(checkWin(currentPlayer)) {
            endMessage.textContent=`Game over! ${currentPlayer} wins!`
            return
        }
        if(checkTie()) {
            endMessage.textContent= `Game is tied!`
            return
        }
        currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] 
        if(currentPlayer == players[0]) {
            endMessage.textContent= `X's turn!`
        } else {
            endMessage.textContent= `O's turn!`
        }     
    })   
}

function checkWin(currentPlayer) {
    for(let i = 0; i < winning_combinations.length; i++){
        const [a, b, c] = winning_combinations[i]
        if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){
            return true
        }
    }
    return false
}

function checkTie(){
    for(let i = 0; i < squares.length; i++) {
        if(squares[i].textContent === '') {
            return false;
        }
    }
    return true
}

function restartButton() {
    for(let i = 0; i < squares.length; i++) {
        squares[i].textContent = ""
    }
    endMessage.textContent=`X's turn!`
    currentPlayer = players[0]
}

Ho provato a spiegare il tris passo dopo passo usando HTML, CSS e JavaScript. Spero sia stato utile. Grazie per aver letto.