Tic Tac Toe

Tentu! Berikut adalah kode lengkap untuk membuat game Tic Tac Toe sederhana. Untuk memudahkan Anda, saya telah menggabungkan HTML, CSS, dan JavaScript ke dalam satu file. Kode ini menggunakan logika dasar untuk menentukan giliran pemain, mengecek kondisi menang, dan fitur untuk mengulang permainan. Berikut di bawah ini adalah script css untuk game tic tac toe

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #2c3e50;
            color: white;
        }

        h1 {
            margin-bottom: 10px;
            font-size: 3rem;
        }

        .status {
            font-size: 1.5rem;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            margin-bottom: 30px;
        }

        .cell {
            width: 100px;
            height: 100px;
            background-color: #ecf0f1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: background-color 0.2s ease;
        }

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

        .cell.x { color: #e74c3c; }
        .cell.o { color: #3498db; }

        button {
            padding: 12px 24px;
            font-size: 1.2rem;
            cursor: pointer;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 8px;
            transition: background-color 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        button:hover {
            background-color: #2ecc71;
        }

Kemudia buat script HTML seperti di bawah ini

  <h1>Tic Tac Toe</h1>
    <div class="status" id="status">Giliran: X</div>
    
    <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="restart">Main Lagi</button>

Setelah script HTML selesai di buat kemudia buat logic untuk game tic tac toe mengunakan javascript

        const cells = document.querySelectorAll('.cell');
        const statusText = document.getElementById('status');
        const restartBtn = document.getElementById('restart');
        
        // Papan permainan (9 kotak kosong)
        let board = ["", "", "", "", "", "", "", "", ""];
        let currentPlayer = "X";
        let running = false;

        // Semua kemungkinan kombinasi baris, kolom, dan diagonal untuk menang
        const winConditions = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Baris
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Kolom
            [0, 4, 8], [2, 4, 6]             // Diagonal
        ];

        // Memulai permainan
        initializeGame();

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

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

            // Jika kotak sudah terisi atau permainan selesai, abaikan klik
            if(board[cellIndex] !== "" || !running) {
                return;
            }

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

        function updateCell(cell, index) {
            board[index] = currentPlayer;
            cell.textContent = currentPlayer;
            // Menambahkan class 'x' atau 'o' untuk warna (diatur di CSS)
            cell.classList.add(currentPlayer.toLowerCase());
        }

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

        function checkWinner() {
            let roundWon = false;

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

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

            if(roundWon) {
                statusText.textContent = `🎉 Pemain ${currentPlayer} Menang! 🎉`;
                running = false;
            } else if(!board.includes("")) {
                statusText.textContent = `Pertandingan Seri!`;
                running = false;
            } else {
                changePlayer();
            }
        }

        function restartGame() {
            currentPlayer = "X";
            board = ["", "", "", "", "", "", "", "", ""];
            statusText.textContent = `Giliran: ${currentPlayer}`;
            cells.forEach(cell => {
                cell.textContent = "";
                cell.classList.remove("x", "o");
            });
            running = true;
        }