Cara Membuat Game Tic Tac Toe dengan JavaScript

Cara Membuat Game Tic Tac Toe dengan JavaScript – Apakah kamu pernah bermain Tic Tac Toe? Sekarang kamu bisa membuat versi web dari permainan klasik ini menggunakan bahasa pemrograman JavaScript. Seperti yang kita ketahui, tujuan utama pemain adalah untuk mencoba membuat garis horizontal, vertikal, atau diagonal yang terdiri dari tiga simbol yang sama.

Dalam game ini, kamu akan bermain melawan temanmu atau melawan komputer dalam menempatkan simbol X atau O di papan 3×3. Pada artikel kali ini kelasjava akan mengajak kamu untuk membuat game tic tac toe buatanmu sendiri menggunakan JavaScript, yuk simak langkah-langkahnya dibawah ini!

Hal yang Dibutuhkan untuk Membuat Game Tic Tac Toe

Sebelum kamu mulai membuat game tic tac toe menggunakan JS, pastikan kamu telah menyiapkan beberapa hal berikut:

Perangkat laptop.
Sublime Text (Editor kode teks).
Google Chrome (Peramban web).
Niat yang kuat untuk belajar dan berkarya.

Cara Mudah Membuat Game Tic Tac Toe dengan JavaScript

1. Siapkan Folder dan File

Buat folder untuk proyek game Tic Tac Toe JavaScriptmu dan buatlah beberapa file yang diperlukan sebagai berikut:

Buat Folder: Buat folder untuk proyek game Tic Tac Toe JavaScript Anda.
Buat File HTML: Buat file index.html untuk struktur halaman web game Tic Tac Toe.
Buat File CSS: Buat file style.css untuk mendesain tampilan halaman web game Tic Tac Toe.
Buat File JavaScript: Buat file script.js untuk menulis kode JavaScript untuk logika permainan.

2. Buat Kode HTML (index.html)

Tambahkan struktur dasar HTML untuk membuat game Tic Tac Toe agar bisa dijalankan, untuk kode HTML dari game Tic Tac Toe tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Game Tic Tac Toe - By: KelasJava</h1>
        <div class="board">
            <div class="cell" data-cell-index="0"></div>
            <div class="cell" data-cell-index="1"></div>
            <div class="cell" data-cell-index="2"></div>
            <div class="cell" data-cell-index="3"></div>
            <div class="cell" data-cell-index="4"></div>
            <div class="cell" data-cell-index="5"></div>
            <div class="cell" data-cell-index="6"></div>
            <div class="cell" data-cell-index="7"></div>
            <div class="cell" data-cell-index="8"></div>
        </div>
        <button id="restartButton">Restart</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Desain tampilan halaman web game Tic Tac Toe agar lebih menarik menggunakan CSS, untuk kode CSS dari program game Tic Tac Toe tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 10px;
    margin: 20px auto;
    width: 320px;
}

.cell {
    width: 100px;
    height: 100px;
    border: 2px solid #333;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

button {
    padding: 10px 20px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

4. Buat Kode JavaScript (script.js)

Tambahkan logika permainan Tic Tac Toe menggunakan JavaScript agar bisa dimainkan, untuk kode JS-nya kamu bisa menyalin dibawah ini.

const cells = document.querySelectorAll('.cell');
const restartButton = document.getElementById('restartButton');
let currentPlayer = 'X';
let isGameActive = true;

const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

cells.forEach(cell => {
    cell.addEventListener('click', handleCellClick);
});

restartButton.addEventListener('click', restartGame);

function handleCellClick(event) {
    const clickedCell = event.target;
    const clickedCellIndex = parseInt(clickedCell.getAttribute('data-cell-index'));

    if (cells[clickedCellIndex].textContent !== '' || !isGameActive) {
        return;
    }

    placeMark(clickedCell, currentPlayer);
    if (checkWin(currentPlayer)) {
        endGame(false);
    } else if (isDraw()) {
        endGame(true);
    } else {
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
}

function placeMark(cell, mark) {
    cell.textContent = mark;
}

function checkWin(mark) {
    return winningCombinations.some(combination => {
        return combination.every(index => {
            return cells[index].textContent === mark;
        });
    });
}

function isDraw() {
    return [...cells].every(cell => {
        return cell.textContent !== '';
    });
}

function endGame(draw) {
    isGameActive = false;
    const result = draw ? 'Draw!' : `${currentPlayer} wins!`;
    alert(result);
}

function restartGame() {
    cells.forEach(cell => {
        cell.textContent = '';
    });
    currentPlayer = 'X';
    isGameActive = true;
}

5. Jalankan Kode Program

Setelah semua kode ditulis, jalankan program game Tic Tac Toe dengan membuka file index.html pada browser atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.

6. Tampilkan Hasil Program Game Tic Tac Toe

Selamat! Kamu telah berhasil membuat Game Tic Tac Toe dengan JavaScript, untuk tampilan gamenya seperti gambar diatas dan kamu bisa melakukan reset game dengan klik button Restart.

Penutup

Itulah tutorial dan langkah-langkah membuat Game Tic Tac Toe yang seru dan interaktif menggunakan bahasa pemrograman JavaScript. Sekarang hanya bermodalkan kode yang simpel menggunakan JavaScript, kamu sudah bisa membuat game buatanmu sendiri. Selamat mencoba Sobat Java!