Cara Membuat Game tik tik toe denagn javascript bisa dilakukan dengan langkah sederhana dan efisien, bahkan untuk kalian yang baru mulai belajar.
Halo teman-teman, selamat datang di kodelyly.com! Pada artikel ini kodelyly.com akan membahas langkah demi langkah membangun game Tic Tac Toe yang interaktif, ringan, dan mudah dikembangkan. Kalian akan belajar struktur HTML, logika JavaScript, hingga sedikit gaya agar tampil menarik.
Cara Membuat Game Tic Tac Toe Dengan JavaScript
Secara garis besar, alurnya adalah menyiapkan papan 3×3, menangani klik untuk memberi tanda X atau O, memeriksa pemenang atau seri, lalu mereset permainan. Berikut komponen yang diperlukan agar jelas sejak awal:
| Komponen | Peran |
|---|---|
| HTML papan 3×3 | Wadah setiap kotak permainan |
| JavaScript state | Menyimpan giliran dan kondisi kotak |
| Fungsi cek kemenangan | Mengecek pola kemenangan dan hasil seri |
| Tombol reset | Memulai permainan baru tanpa reload |
Kode Inti Sederhana
Contoh berikut sudah cukup untuk membuat game berfungsi. Salin ke file index.html, lalu buka di browser.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tic Tac Toe – kodelyly.com</title>
<style>
body { font-family: system-ui, Arial, sans-serif; display: grid; place-items: center; min-height: 100vh; margin: 0; }
.wrap { width: 320px; }
#board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.cell { aspect-ratio: 1/1; display: grid; place-items: center; font-size: 2.4rem; border: 2px solid #ccc; cursor: pointer; user-select: none; border-radius: 10px; }
.cell:disabled { cursor: not-allowed; color: #888; }
#status { font-weight: 600; }
button { padding: 10px 14px; border: 0; border-radius: 10px; font-weight: 600; cursor: pointer; }
</style>
</head>
<body>
<div class="wrap">
<h1>Tic Tac Toe</h1>
<div id="status">Giliran: X</div>
<div id="board"></div>
<button id="reset">Reset</button>
</div>
<script>
const boardEl = document.getElementById('board');
const statusEl = document.getElementById('status');
const resetBtn = document.getElementById('reset');
let board = Array(9).fill('');
let turn = 'X';
let finished = false;
const wins = [
[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
];
function render() {
boardEl.innerHTML = '';
board.forEach((val, i) => {
const btn = document.createElement('button');
btn.className = 'cell';
btn.textContent = val;
btn.disabled = finished || Boolean(val);
btn.addEventListener('click', () => handleMove(i));
boardEl.appendChild(btn);
});
statusEl.textContent = finished ? statusEl.textContent : `Giliran: ${turn}`;
}
function handleMove(i) {
if (board[i] || finished) return;
board[i] = turn;
const result = checkResult();
if (result) {
finished = true;
statusEl.textContent = result === 'draw' ? 'Hasil: Seri' : `Pemenang: ${result}`;
} else {
turn = turn === 'X' ? 'O' : 'X';
statusEl.textContent = `Giliran: ${turn}`;
}
render();
}
function checkResult() {
for (const [a,b,c] of wins) {
if (board[a] && board[a] === board[b] && board[a] === board[c]) return board[a];
}
if (board.every(Boolean)) return 'draw';
return null;
}
function reset() {
board = Array(9).fill('');
turn = 'X';
finished = false;
statusEl.textContent = 'Giliran: X';
render();
}
resetBtn.addEventListener('click', reset);
render();
</script>
</body>
</html>
Penyempurnaan Dan Tips
Tambahkan animasi sederhana saat kotak diisi agar lebih hidup. Kalian juga bisa menyimpan skor memakai localStorage, menonaktifkan seluruh kotak setelah ada pemenang, atau menambahkan suara klik. Untuk tantangan lanjut, buat AI minimax sederhana agar pemain melawan komputer.
Untuk SEO, pakai judul yang mengandung kata kunci, alt text pada gambar demo, dan meta description yang ringkas. Pastikan halaman cepat dimuat dengan meminimalkan CSS dan JavaScript.
Kesimpulan
Membangun Tic Tac Toe sangat cocok untuk memahami event, array, dan kontrol alur di JavaScript. Dengan contoh di atas, kalian sudah punya dasar lengkap tentang cara membuat game Tic Tac Toe dengan JavaScript yang rapi dan mudah dikembangkan. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba!