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 merupakan versi permainan Tic Tac Toe yang menggunakan kecerdasan buatan (AI) sebagai lawan pemain. Dalam versi ini, AI menjalankan algoritma Minimax untuk mengambil keputusan terbaik di setiap giliran. Dengan mengevaluasi semua kemungkinan langkah, AI memilih langkah optimal yang memberikan peluang kemenangan tertinggi, sehingga nyaris mustahil untuk dikalahkan.

Alur Algoritma Minimax dalam Tic Tac Toe AI

Algoritma Minimax berfungsi sebagai algoritma pencarian dalam permainan dua pemain. Algoritma ini memungkinkan pemain untuk memaksimalkan keuntungan, sementara AI berupaya meminimalkan peluang kemenangan lawan. Setiap langkah yang tersedia akan dievaluasi berdasarkan kemungkinan hasil terbaik maupun terburuk, lalu AI akan memilih langkah dengan nilai terbaik secara strategis..

Alur Permainan Tic Tac Toe AI

Sistem memulai permainan dengan papan kosong berukuran 3×3.
Pemain pertama (manusia) memilih kotak dan menempatkan simbol ‘X’.
Setelah itu, AI langsung merespons dengan memilih langkah terbaik untuk simbol ‘O’.
Pemain dan AI bergantian menjalankan langkah hingga muncul pemenang atau permainan berakhir seri.
Jika salah satu pemain berhasil menempatkan tiga simbol sejajar, sistem mengumumkan pemain tersebut sebagai pemenang.
Jika seluruh kotak terisi tanpa kombinasi pemenang, sistem mengakhiri permainan sebagai hasil 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

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

Artikel Terkait

Tinggalkan Komentar Batalkan Balasan