Cara Membuat Game Tic Tac Toe dengan JavaScript untuk Pemula

mwi – Halo Sobat pembelajar web MuSa, kita lanjutkan materi JavaScript yah. Kita akan membuat game jadul untuk keperluan pembelajaran tentang TicTacToe.

Belajar bahasa pemrograman akan jauh lebih menyenangkan jika langsung kita aplikasikan ke dalam sebuah proyek game. Setelah memahami dasar-dasar sintaks JavaScript, kini saatnya kita naik tingkat dengan membangun Game Tic-Tac-Toe interaktif.

Game klasik ini sangat cocok bagi pelajar tingkat SMA atau pemula karena mengajarkan logika percabangan (if-else), penggunaan Array, perulangan (looping), serta manipulasi DOM secara langsung di browser.

Konsep Pemrograman yang Kita Pelajari

Sebelum masuk ke kode program, proyek ini akan mengenalkan Anda pada beberapa konsep penting:

1. Array Pengondisian Papan (options): Menyimpan status kotak permainan (kosong, X, atau O).
2. Event Listener (addEventListener): Mendeteksi klik dari pemain pada setiap kotak papan.
3. Logika Kemenangan (winConditions): Mencocokkan kombinasi baris, kolom, atau diagonal untuk menentukan pemenang.

🛠️ Langkah Pembuatan Kode Lengkap (HTML, CSS, & JS)

Buat file baru di komputer Anda dengan nama index.html, lalu salin dan tempel seluruh kode di bawah ini:

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Tic-Tac-Toe dengan JavaScript</title>
    <style>
        /* Desain Tampilan (CSS) */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #333;
        }

        h1 {
            color: white;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        #statusText {
            font-size: 1.2rem;
            color: #f1f2f6;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 8px;
            background-color: #2d3436;
            padding: 8px;
            border-radius: 12px;
            box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
        }

        .cell {
            background-color: #ffffff;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.5rem;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s;
        }

        .cell:hover {
            background-color: #dfe6e9;
        }

        .cell.x {
            color: #d63031;
        }

        .cell.o {
            color: #0984e3;
        }

        #restartBtn {
            margin-top: 20px;
            padding: 10px 25px;
            font-size: 1rem;
            font-weight: bold;
            background-color: #00b894;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
            transition: background-color 0.2s, transform 0.1s;
        }

        #restartBtn:hover {
            background-color: #00cec9;
        }

        #restartBtn:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>

    <h1>Tic-Tac-Toe Game</h1>
    <div id="statusText">Giliran Pemain: X</div>

    <!-- Papan Kotak Game 3x3 -->
    <div class="board" id="board">
        <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>

    <button id="restartBtn">Mulai Ulang / Reset</button>

    <script>
        /* Logika Pemrograman (JavaScript) */
        
        const cells = document.querySelectorAll(".cell");
        const statusText = document.getElementById("statusText");
        const restartBtn = document.getElementById("restartBtn");

        let options = ["", "", "", "", "", "", "", "", ""];
        let currentPlayer = "X";
        let running = true;

        // Kombinasi angka index papan yang menentukan kemenangan
        const winConditions = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Horizontal
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Vertikal
            [0, 4, 8], [2, 4, 6]            // Diagonal
        ];

        initializeGame();

        function initializeGame() {
            cells.forEach(cell => cell.addEventListener("click", cellClicked));
            restartBtn.addEventListener("click", restartGame);
            statusText.textContent = `Giliran Pemain: ${currentPlayer}`;
        }

        function cellClicked() {
            const cellIndex = this.getAttribute("data-index");

            if (options[cellIndex] !== "" || !running) {
                return;
            }

            updateCell(this, cellIndex);
            checkWinner();
        }

        function updateCell(cell, index) {
            options[index] = currentPlayer;
            cell.textContent = currentPlayer;
            cell.classList.add(currentPlayer.toLowerCase());
        }

        function changePlayer() {
            currentPlayer = (currentPlayer == "X") ? "O" : "X";
            statusText.textContent = `Giliran Pemain: ${currentPlayer}`;
        }

        function checkWinner() {
            let roundWon = false;

            for (let i = 0; i < winConditions.length; i++) {
                const condition = winConditions[i];
                const cellA = options[condition[0]];
                const cellB = options[condition[1]];
                const cellC = options[condition[2]];

                if (cellA == "" || cellB == "" || cellC == "") {
                    continue;
                }
                if (cellA == cellB && cellB == cellC) {
                    roundWon = true;
                    break;
                }
            }

            if (roundWon) {
                statusText.textContent = `🎉 Hore! Pemain ${currentPlayer} Menang!`;
                running = false;
            } 
            else if (!options.includes("")) {
                statusText.textContent = `⚖️ Permainan Seri (Draw)!`;
                running = false;
            } 
            else {
                changePlayer();
            }
        }

        function restartGame() {
            currentPlayer = "X";
            options = ["", "", "", "", "", "", "", "", ""];
            statusText.textContent = `Giliran Pemain: ${currentPlayer}`;
            cells.forEach(cell => {
                cell.textContent = "";
                cell.classList.remove("x", "o");
            });
            running = true;
        }
    </script>
</body>
</html>

Penjelasan Singkat Alur Program

1. Struktur HTML & CSS: Menggunakan CSS Grid untuk merapikan kotak papan permainan berukuran 3×3 secara presisi dan menarik.
2. Inisialisasi Array (options): Berfungsi merekam setiap langkah pemain pada 9 kotak yang tersedia.
3. Pengecekan Pemenang (checkWinner): Perulangan for mencocokkan isi array dengan daftar kondisi menang (winConditions). Jika ada tiga simbol ‘X’ atau ‘O’ sejajar, game otomatis menyatakan pemenang.

Demikian materi tutorial kali ini, semoga bermanfaat untuk kita semua, Aamiin. (ms).