Selamat datang di SolusiLain.Com, kali ini kita akan memahas Game atau permainan klasik dengan nama Tic Tac Toe dengan lawannya adalah AI dengan algiritma Minimax. Jadi nama permainan akan kita tambahin AI di belakangnya menjadi Tic Tac Toe AI. Tunggu apa lagi mari kita coba pahami dan coba untuk membuatnya.

Apa Itu Tic Tac Toe?

Tic Tac Toe adalah permainan papan klasik yang dimainkan oleh dua pemain pada grid 3×3. Tujuannya adalah untuk mendapatkan tiga simbol yang sama dalam satu garis, baik secara horizontal, vertikal, atau diagonal. Permainan ini sering digunakan sebagai latihan dalam memahami logika pemrograman karena strukturnya yang sederhana namun strategis.

Apa Itu Tic Tac Toe AI?

Tic Tac Toe AI adalah versi permainan yang menggunakan kecerdasan buatan (AI) untuk bertindak sebagai lawan pemain. Dalam implementasi ini, AI menggunakan algoritma Minimax untuk selalu membuat keputusan terbaik dan hampir tidak bisa dikalahkan. Algoritma ini mengevaluasi setiap kemungkinan langkah dan memilih langkah optimal yang memberikan peluang kemenangan tertinggi.

Alur Algoritma Minimax dalam Tic Tac Toe AI

Algoritma Minimax adalah algoritma pencarian yang digunakan dalam permainan dua pemain untuk menemukan langkah terbaik. Konsep utamanya adalah bahwa pemain mencoba memaksimalkan keuntungan mereka, sementara lawan mencoba meminimalkan keuntungan pemain tersebut.

Alur Permainan Tic Tac Toe AI

Permainan dimulai dengan papan kosong berukuran 3×3.
Pemain pertama (manusia) memilih kotak dan menempatkan simbol ‘X’.
AI akan segera merespons dengan memilih langkah terbaik untuk simbol ‘O’.
Pemain dan AI bergantian melakukan langkah hingga ada pemenang atau permainan berakhir seri.
Jika salah satu pemain mendapatkan tiga simbol yang sejajar, permainan selesai dan pemenang diumumkan.
Jika seluruh kotak terisi tanpa ada pemenang, permainan dianggap seri.

Cara Membuat Tic Tac Toe AI dengan JavaScript

1. Membuat Struktur HTML

Kita akan menggunakan HTML sederhana untuk membuat papan permainan.

<div class="board" id="board"></div>
<p id="status"></p>
<button onclick="resetGame()">Restart</button>

<button onclick="resetGame()">Restart</button>

Elemen <div> dengan id board akan berisi kotak-kotak permainan, dan <p> dengan id status akan menampilkan status permainan.

2. Menambahkan Gaya dengan CSS

Agar tampilan lebih menarik, kita tambahkan CSS untuk mengatur ukuran kotak dan tata letaknya.

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 5px;
    justify-content: center;
}
.cell {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background: #eee;
    cursor: pointer;
}
.cell.taken { cursor: not-allowed; }

.board {

display: grid;

grid-template-columns: repeat(3, 100px);

gap: 5px;

justify-content: center;

}

.cell {

width: 100px;

height: 100px;

display: flex;

align-items: center;

justify-content: center;

font-size: 2em;

background: #eee;

cursor: pointer;

}

.cell.taken { cursor: not-allowed; }

3. Logika Permainan dengan JavaScript

JavaScript digunakan untuk menangani interaksi permainan dan mengimplementasikan AI.

const board = ["", "", "", "", "", "", "", "", ""];
const human = "X";
const ai = "O";
const boardElement = document.getElementById("board");
const statusElement = document.getElementById("status");

function checkWinner(board) {
    const winPatterns = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8],
        [0, 3, 6], [1, 4, 7], [2, 5, 8],
        [0, 4, 8], [2, 4, 6]
    ];
    
    for (let pattern of winPatterns) {
        const [a, b, c] = pattern;
        if (board[a] && board[a] === board[b] && board[a] === board[c]) {
            return board[a];
        }
    }
    return board.includes("") ? null : "T";
}

function makeMove(index) {
    if (board[index] === "") {
        board[index] = human;
        updateBoard();
        let winner = checkWinner(board);
        if (!winner) bestMove();
        updateBoard();
    }
}

function updateBoard() {
    boardElement.innerHTML = "";
    board.forEach((cell, index) => {
        let cellElement = document.createElement("div");
        cellElement.classList.add("cell");
        if (cell !== "") cellElement.classList.add("taken");
        cellElement.textContent = cell;
        cellElement.onclick = () => makeMove(index);
        boardElement.appendChild(cellElement);
    });
    let winner = checkWinner(board);
    if (winner) {
        statusElement.textContent = winner === "T" ? "It's a Tie!" : `${winner} Wins!`;
    }
}

function resetGame() {
    board.fill("");
    statusElement.textContent = "";
    updateBoard();
}

updateBoard();

const board = ["", "", "", "", "", "", "", "", ""];

const human = "X";

const ai = "O";

const boardElement = document.getElementById("board");

const statusElement = document.getElementById("status");

function checkWinner(board) {

const winPatterns = [

[0, 1, 2], [3, 4, 5], [6, 7, 8],

[0, 3, 6], [1, 4, 7], [2, 5, 8],

[0, 4, 8], [2, 4, 6]

];

for (let pattern of winPatterns) {

const [a, b, c] = pattern;

if (board[a] && board[a] === board[b] && board[a] === board[c]) {

return board[a];

}

return board.includes("") ? null : "T";

}

function makeMove(index) {

if (board[index] === "") {

board[index] = human;

updateBoard();

let winner = checkWinner(board);

if (!winner) bestMove();

updateBoard();

}

function updateBoard() {

boardElement.innerHTML = "";

board.forEach((cell, index) => {

let cellElement = document.createElement("div");

cellElement.classList.add("cell");

if (cell !== "") cellElement.classList.add("taken");

cellElement.textContent = cell;

cellElement.onclick = () => makeMove(index);

boardElement.appendChild(cellElement);

});

let winner = checkWinner(board);

if (winner) {

statusElement.textContent = winner === "T" ? "It's a Tie!" : `${winner} Wins!`;

}

function resetGame() {

board.fill("");

statusElement.textContent = "";

updateBoard();

}

updateBoard();

Kode di atas menangani logika dasar permainan, pembaruan tampilan papan, dan keputusan AI menggunakan algoritma Minimax.

Script Lengkap Permainan Tic Tac Toe AI

Untuk mencoba membuat permainan dan memainkannya di komputer kalian, silahkan buat project aplikasi dengan VSCode atau editor kesayangan kalian, lalu buat file index.html dan pastekan script lengkap berikut ini:

<!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 AI</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 5px;
            justify-content: center;
        }

        .cell {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            background: #eee;
            cursor: pointer;
        }

        .cell.taken {
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <h1>Tic-Tac-Toe AI</h1>
    <div class="board" id="board"></div>
    <p id="status"></p>
    <button onclick="resetGame()">Restart</button>

    <script>
        const board = ["", "", "", "", "", "", "", "", ""];
        const human = "X";
        const ai = "O";
        const boardElement = document.getElementById("board");
        const statusElement = document.getElementById("status");

        function checkWinner(board) {
            const winPatterns = [
                [0, 1, 2], [3, 4, 5], [6, 7, 8],
                [0, 3, 6], [1, 4, 7], [2, 5, 8],
                [0, 4, 8], [2, 4, 6]
            ];

            for (let pattern of winPatterns) {
                const [a, b, c] = pattern;
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    return board[a];
                }
            }
            return board.includes("") ? null : "T";
        }

        function minimax(newBoard, player) {
            let availableSpots = newBoard.map((v, i) => v === "" ? i : null).filter(v => v !== null);

            let winner = checkWinner(newBoard);
            if (winner === human) return { score: -10 };
            if (winner === ai) return { score: 10 };
            if (winner === "T") return { score: 0 };

            let moves = [];
            for (let i of availableSpots) {
                let move = {};
                move.index = i;
                newBoard[i] = player;

                let result;
                if (player === ai) {
                    result = minimax(newBoard, human);
                    move.score = result.score;
                } else {
                    result = minimax(newBoard, ai);
                    move.score = result.score;
                }
                newBoard[i] = "";
                moves.push(move);
            }

            let bestMove = 0;
            if (player === ai) {
                let bestScore = -Infinity;
                for (let i = 0; i < moves.length; i++) {
                    if (moves[i].score > bestScore) {
                        bestScore = moves[i].score;
                        bestMove = i;
                    }
                }
            } else {
                let bestScore = Infinity;
                for (let i = 0; i < moves.length; i++) {
                    if (moves[i].score < bestScore) {
                        bestScore = moves[i].score;
                        bestMove = i;
                    }
                }
            }
            return moves[bestMove];
        }

        function bestMove() {
            let move = minimax(board, ai);
            board[move.index] = ai;
            updateBoard();
        }

        function makeMove(index) {
            if (board[index] === "") {
                board[index] = human;
                updateBoard();
                let winner = checkWinner(board);
                if (!winner) bestMove();
                updateBoard();
            }
        }

        function updateBoard() {
            boardElement.innerHTML = "";
            board.forEach((cell, index) => {
                let cellElement = document.createElement("div");
                cellElement.classList.add("cell");
                if (cell !== "") cellElement.classList.add("taken");
                cellElement.textContent = cell;
                cellElement.onclick = () => makeMove(index);
                boardElement.appendChild(cellElement);
            });
            let winner = checkWinner(board);
            if (winner) {
                statusElement.textContent = winner === "T" ? "It's a Tie!" : `${winner} Wins!`;
            }
        }

        function resetGame() {
            board.fill("");
            statusElement.textContent = "";
            updateBoard();
        }

        updateBoard();
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

<!DOCTYPE html>

<head>

<style>

body {

text-align: center;

font-family: Arial, sans-serif;

}

.board {

display: grid;

grid-template-columns: repeat(3, 100px);

gap: 5px;

justify-content: center;

}

.cell {

width: 100px;

height: 100px;

display: flex;

align-items: center;

justify-content: center;

font-size: 2em;

background: #eee;

cursor: pointer;

}

.cell.taken {

cursor: not-allowed;

}

</style>

</head>

<body>

<button onclick="resetGame()">Restart</button>

const board = ["", "", "", "", "", "", "", "", ""];

const human = "X";

const ai = "O";

const boardElement = document.getElementById("board");

const statusElement = document.getElementById("status");

function checkWinner(board) {

const winPatterns = [

[0, 1, 2], [3, 4, 5], [6, 7, 8],

[0, 3, 6], [1, 4, 7], [2, 5, 8],

[0, 4, 8], [2, 4, 6]

];

for (let pattern of winPatterns) {

const [a, b, c] = pattern;

if (board[a] && board[a] === board[b] && board[a] === board[c]) {

return board[a];

}

return board.includes("") ? null : "T";

}

function minimax(newBoard, player) {

let availableSpots = newBoard.map((v, i) => v === "" ? i : null).filter(v => v !== null);

let winner = checkWinner(newBoard);

if (winner === human) return { score: -10 };

if (winner === ai) return { score: 10 };

if (winner === "T") return { score: 0 };

let moves = [];

for (let i of availableSpots) {

let move = {};

move.index = i;

newBoard[i] = player;

let result;

if (player === ai) {

result = minimax(newBoard, human);

move.score = result.score;

} else {

result = minimax(newBoard, ai);

move.score = result.score;

}

newBoard[i] = "";

moves.push(move);

}

let bestMove = 0;

if (player === ai) {

let bestScore = -Infinity;

for (let i = 0; i < moves.length; i++) {

if (moves[i].score > bestScore) {

bestScore = moves[i].score;

bestMove = i;

}

} else {

let bestScore = Infinity;

for (let i = 0; i < moves.length; i++) {

if (moves[i].score < bestScore) {

bestScore = moves[i].score;

bestMove = i;

}

return moves[bestMove];

}

function bestMove() {

let move = minimax(board, ai);

board[move.index] = ai;

updateBoard();

}

function makeMove(index) {

if (board[index] === "") {

board[index] = human;

updateBoard();

let winner = checkWinner(board);

if (!winner) bestMove();

updateBoard();

}

function updateBoard() {

boardElement.innerHTML = "";

board.forEach((cell, index) => {

let cellElement = document.createElement("div");

cellElement.classList.add("cell");

if (cell !== "") cellElement.classList.add("taken");

cellElement.textContent = cell;

cellElement.onclick = () => makeMove(index);

boardElement.appendChild(cellElement);

});

let winner = checkWinner(board);

if (winner) {

statusElement.textContent = winner === "T" ? "It's a Tie!" : `${winner} Wins!`;

}

function resetGame() {

board.fill("");

statusElement.textContent = "";

updateBoard();

}

updateBoard();

</script>

</body>

</html>

Cara Memainkan Tic Tac Toe AI

Buka file HTML di browser.
Klik pada salah satu kotak untuk menempatkan simbol ‘X’.
AI akan otomatis memilih langkah terbaiknya.
Teruskan permainan hingga ada pemenang atau permainan berakhir seri.
Klik tombol “Restart” untuk memulai permainan baru.

Kesimpulan

Dengan menggunakan JavaScript, kita dapat membuat permainan Tic Tac Toe dengan AI yang tidak bisa dikalahkan. Ini adalah cara latihan yang sangat baik untuk memahami algoritma Minimax dan logika pemrograman dasar dalam pembuatan game.

Cobalah implementasi ini dan kembangkan lebih lanjut dengan fitur tambahan seperti animasi atau mode multiplayer!

Membuat Permainan Tic Tac Toe AI Sederhana dengan JavaScript

Apa Itu Tic Tac Toe?

Apa Itu Tic Tac Toe AI?

Alur Algoritma Minimax dalam Tic Tac Toe AI

Alur Permainan Tic Tac Toe AI

Cara Membuat Tic Tac Toe AI dengan JavaScript

1. Membuat Struktur HTML

2. Menambahkan Gaya dengan CSS

3. Logika Permainan dengan JavaScript

Script Lengkap Permainan Tic Tac Toe AI

Cara Memainkan Tic Tac Toe AI

Kesimpulan

Tinggalkan Komentar Batalkan Balasan