Cara membuat game Tic Tac Toe dengan HTML, CSS, dan JavaScript

Saya akan mencoba mengkodekan game tic-tac-toe dengan bahasa HTML, CSS, dan JavaScript. Situasi akhir permainan adalah sebagai berikut:

Pertama-tama, saya ingin memberikan beberapa informasi tentang game tersebut.

Apa itu tic-tac-toe? Apa aturan mainnya?

• Ini adalah permainan untuk dua pemain.
• Biasanya dimainkan di papan 3x3, tapi bisa lebih lebar. Saya akan mengambil papan 3x3 sebagai dasar.
• Pemain yang mulai pertama mengisi kotak kosong dengan mengetik 'X' dan pemain lainnya 'O'.
• Seorang pemain memenangkan permainan saat mereka XXX atau OOO dalam baris, kolom, atau diagonal.

• Jika semua kotak diisi dan disediakan salah satu dari kondisi di atas, maka permainan seri.

HTML:

Saya menambahkan tag h1 di div yang id-nya adalah judulnya

Untuk membuat papan 3*3 yang diperlukan untuk permainan, saya membuat div yang id-nya adalah papan.

Saya membuat setiap kotak di papan dalam sebuah div yang kelasnya adalah kotak. Saya membuat id untuk setiap kotak.

Untuk dapat memulai permainan lagi, saya menambahkan input yang nilai tipenya adalah tombol. Saya membuat ini di dalam div yang idnya adalah endGame. Layar game harus diatur ulang saat tombol diklik. Jadi saya menambahkan fungsi ke acara onclick untuk memanggil fungsi yang saya buat di 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>

Saya meletakkan judul di tengah halaman.

Saya meletakkan div yang id papannya di tengah halaman. Saya mengatur properti margin untuk ini.

Saya mengatur properti width dan height dari div yang id-nya adalah board.

Papan terdiri dari 9 kotak, saya membuat kisi properti tampilan untuk membuatnya. Saya membuat 9 frame dengan pengaturan kolom template Grid. Saya mengatur jarak antara grid dengan properti grid-gap.

Saya mengatur properti width dan height untuk setiap kotak. Saya menambahkan properti perbatasan ke kotak ini. Saya menambahkan warna latar belakang ke kotak. Saya mengatur posisinya menggunakan properti display. Saya membuat perubahan warna saat mengarahkan kursor ke kotak. Saya menggunakan fitur hover untuk ini.

Saya menyetel properti tampilan dan gaya lain ke yang id-nya restartButton. Selain itu, saya menggunakan fitur hover.

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;
}

Saya menggunakan fitur HTML DOM untuk memproses elemen yang saya gunakan di HTML melalui JavaScript.

Untuk mendapatkan div dengan id papan dan div dengan kotak kelas di file HTML, saya mendapatkannya dengan menugaskannya ke variabel dengan tag DOM yang sesuai.

Saya membuat seri yang disebut "pemain" untuk game tersebut. Elemen array adalah X dan O.

Karena X adalah yang pertama memulai permainan, saya menugaskan pemain[0] ke variabel pemain saat ini.

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]
}

Saya mencoba menjelaskan tic-tac-toe langkah demi langkah menggunakan HTML, CSS, dan JavaScript. Saya harap ini bermanfaat. Terima kasih telah membaca.