Tik‑Tak‑Toe

by PixelHero77
112 lines4.5 KB
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tik‑Tak‑Toe</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .kotak {
            width: 100px;
            height: 100px;
            font-size: 3rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
        }
        .kotak:hover {
            background-color: rgba(255,255,255,0.1);
        }
    </style>
</head>
<body class="bg‑slate‑800 text‑white min‑h‑screen flex flex‑col items‑center justify‑center">
    <h1 class="text‑4xl font‑bold mb‑4 text‑cyan‑400">✖ Tik‑Tak‑Toe ⭕</h1>
    <p id="status" class="text‑xl mb‑6">Giliran: Pemain <span class="text‑cyan‑300">X</span></p>

    <!-- Papan 3x3 -->
    <div id="papan" class="grid grid‑cols‑3 border‑4 border‑slate‑500 rounded‑lg overflow‑hidden">
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="0"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="1"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="2"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="3"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="4"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="5"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="6"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="7"></div>
        <div class="kotak border‑2 border‑slate‑500" data‑indeks="8"></div>
    </div>

    <button id="ulang" class="mt‑8 bg‑cyan‑500 hover:bg‑cyan‑600 px‑6 py‑2 rounded‑lg font‑bold text‑lg transition">
        Main Lagi
    </button>

    <script>
        const kotak = document.querySelectorAll('.kotak');
        const teksStatus = document.getElementById('status');
        const tombolUlang = document.getElementById('ulang');
        let isiPapan = ['', '', '', '', '', '', '', '', ''];
        let giliranX = true;
        let permainanSelesai = false;

        // Semua kemungkinan garis menang
        const garisMenang = [
            [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
        ];

        // Klik kotak
        function klikKotak(e) {
            const idx = parseInt(e.target.dataset.indeks);
            if (isiPapan[idx] !== '' || permainanSelesai) return;

            isiPapan[idx] = giliranX ? 'X' : 'O';
            giliranX ? e.target.classList.add('text‑cyan‑400') : e.target.classList.add('text‑rose‑400');
            e.target.textContent = isiPapan[idx];

            cekHasil();
        }

        // Cek menang atau seri
        function cekHasil() {
            let adaMenang = false;
            for (let garis of garisMenang) {
                const [a,b,c] = garis;
                if (isiPapan[a] && isiPapan[a] === isiPapan[b] && isiPapan[a] === isiPapan[c]) {
                    adaMenang = true;
                    break;
                }
            }

            if (adaMenang) {
                teksStatus.innerHTML = `🎉 Pemain <span class="font‑bold ${giliranX ? 'text‑cyan‑400' : 'text‑rose‑400'}">${giliranX ? 'X' : 'O'}</span> MENANG!`;
                permainanSelesai = true;
            } else if (!isiPapan.includes('')) {
                teksStatus.textContent = '🤝 Seri! Tidak ada pemenang.';
                permainanSelesai = true;
            } else {
                giliranX = !giliranX;
                teksStatus.innerHTML = `Giliran: Pemain <span class="${giliranX ? 'text‑cyan‑300' : 'text‑rose‑300'}">${giliranX ? 'X' : 'O'}</span>`;
            }
        }

        // Reset permainan
        function resetPermainan() {
            isiPapan.fill('');
            permainanSelesai = false;
            giliranX = true;
            teksStatus.innerHTML = `Giliran: Pemain <span class="text‑cyan‑300">X</span>`;
            kotak.forEach(k => {
                k.textContent = '';
                k.className = 'kotak border‑2 border‑slate‑500';
            });
        }

        kotak.forEach(k => k.addEventListener('click', klikKotak));
        tombolUlang.addEventListener('click', resetPermainan);
    </script>
</body>
</html>
Game Source: Tik‑Tak‑Toe

Creator: PixelHero77
Libraries: none
Complexity: moderate (112 lines, 4.5 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: tik-tak-toe-pixelhero77" to link back to the original. Then publish at arcadelab.ai/publish.