AyoKupas.com Kumpulan Berita dan Informasi dari berbagai sumber yang terpercaya
Cara Membuat Game Tic-Tac-Toe dengan JavaScript – Game “Tic-Tac-Toe” adalah salah satu permainan papan klasik yang sederhana namun mengasyikkan. Dalam permainan ini, dua pemain secara bergantian menempatkan simbol mereka (biasanya “X” dan “O”) pada papan 3×3, dengan tujuan untuk membuat baris horizontal, vertikal, atau diagonal yang terdiri dari tiga simbol yang sama. Dalam panduan KelasJava.com ini, kita akan membuat versi sederhana dari game “Tic-Tac-Toe” menggunakan JavaScript. Mari kita mulai!
Langkah 1: Persiapan Awal
Buatlah file HTML baru dengan nama index.html dan file JavaScript baru dengan nama game.js. Dalam file HTML, tambahkan elemen-elemen yang diperlukan, seperti tombol untuk mengontrol permainan dan area untuk menampilkan papan permainan.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Tic-Tac-Toe Game</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div id=”gameBoard”></div>
<button id=”restartButton”>Restart Game</button>
<script src=”game.js”></script>
</body>
</html>
Langkah 2: Mengatur Game dengan JavaScript
Dalam file game.js, tambahkan kode untuk mengatur logika permainan, termasuk pembuatan papan permainan, penempatan simbol pada papan, dan pengecekan kondisi kemenangan.
const gameBoard = document.getElementById(“gameBoard”);
const restartButton = document.getElementById(“restartButton”);
const boardSize = 3;
let currentPlayer = “X”;
let board = [];// Inisialisasi papan permainan
function initializeBoard() {
for (let i = 0; i < boardSize; i++) {
const row = [];
for (let j = 0; j < boardSize; j++) {
row.push(“”);
}
board.push(row);
}
}// Menggambar papan permainan
function drawBoard() {
gameBoard.innerHTML = “”;
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement(“div”);
cell.classList.add(“cell”);
cell.textContent = board[i][j];
cell.addEventListener(“click”, () => {
if (board[i][j] === “” && !checkWinner()) {
board[i][j] = currentPlayer;
drawBoard();
currentPlayer = currentPlayer === “X” ? “O” : “X”;
}
});
gameBoard.appendChild(cell);
}
}
}// Memeriksa kondisi kemenangan
function checkWinner() {
// Memeriksa baris dan kolom
for (let i = 0; i < boardSize; i++) {
if (board[i][0] !== “” && board[i][0] === board[i][1] && board[i][1] === board[i][2]) {
return true;
}
if (board[0][i] !== “” && board[0][i] === board[1][i] && board[1][i] === board[2][i]) {
return true;
}
}
// Memeriksa diagonal
if (board[0][0] !== “” && board[0][0] === board[1][1] && board[1][1] === board[2][2]) {
return true;
}
if (board[0][2] !== “” && board[0][2] === board[1][1] && board[1][1] === board[2][0]) {
return true;
}
return false;
}// Memulai permainan
function startGame() {
initializeBoard();
drawBoard();
currentPlayer = “X”;
}// Mengatur ulang permainan
restartButton.addEventListener(“click”, startGame);// Memulai permainan saat halaman dimuat
startGame();
Langkah 3: Menambahkan Gaya dengan CSS (Opsional)
Anda juga bisa menambahkan gaya ke game Anda dengan menggunakan CSS untuk membuat tampilan yang lebih menarik.
#gameBoard {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin-bottom: 10px;
}.cell {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
font-size: 36px;
cursor: pointer;
}button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
Langkah 4: Menjalankan Game
Buka file index.html menggunakan browser web Anda. Anda akan melihat papan permainan “Tic-Tac-Toe” yang bisa Anda mainkan dengan mengklik sel-sel di dalamnya. Coba untuk membuat baris horizontal, vertikal, atau diagonal yang terdiri dari tiga simbol yang sama untuk memenangkan permainan.
Selamat! Anda baru saja berhasil membuat versi sederhana dari game “Tic-Tac-Toe” menggunakan JavaScript. Anda dapat mengembangkan lebih lanjut dengan menambahkan fitur-fitur seperti skor, animasi, atau mode bermain melawan komputer. Semoga panduan ini bermanfaat untuk Anda!
