Cách tạo game Cờ Caro bằng Gemini

3 Đánh giá

Có một sự thật thú vị: nhiều người vẫn nghĩ làm game là lĩnh vực dành riêng cho dân lập trình chuyên nghiệp. Tuy nhiên, giờ đây mọi thứ đã thay đổi nhanh đến mức chỉ cần một ý tưởng và vài dòng mô tả, bạn đã có thể bắt đầu tạo ngay một game đơn giản cho mình.

Dưới đây, chúng ta sẽ cùng tạo một trò chơi quen thuộc đó là Cờ Caro bằng Gemini AI. Đây là một trò chơi khá đơn giản, dễ tiếp cận nhưng vẫn đủ thú vị để dành thời gian ngồi trước màn hình máy tính hay điện thoại để chơi nó.

Hướng dẫn tạo game Cờ Caro bằng Gemini

Bước 1: Trước tiên, bạn hãy mở ứng dụng Gemini AI lên rồi nhập câu lệnh viết Promt tạo game cờ caro chơi 1 người và 2 người, sử dụng 2 biểu tượng X và O (bạn mô tả càng chi tiết, càng tốt). Sau đó chọn chế độ Thinking (Tư duy) để Gemini viết Prompt.

Yêu cầu Gemini viết Prompt tạo game

Bước 2: Sau đó, Gemini sẽ đưa ra cho bạn 2 lựa chọn tạo game là

Prompt tạo game trên trình duyệt (Html, Css, JavaScript)

"Hãy viết mã nguồn hoàn chỉnh (gồm HTML, CSS và JavaScript) để tạo một trò chơi cờ Caro (Tic Tac Toe/Gomoku) có các tính năng sau:

Chế độ chơi: Cho phép chọn giữa '1 Người chơi (với AI)' và '2 Người chơi'.

Kích thước bàn cờ: Có menu lựa chọn các kích thước: 3x3, 5x5, và 7x7. Giao diện phải tự động điều chỉnh linh hoạt (responsive) theo kích thước đã chọn.

Biểu tượng: Sử dụng 'X' và 'O'. Người chơi 1 luôn là X.

Luật thắng: >    - Với bàn 3x3: Cần 3 biểu tượng liên tiếp.

Với bàn 5x5 và 7x7: Cần 4 hoặc 5 biểu tượng liên tiếp để thắng (hãy tối ưu logic này).

Trí tuệ nhân tạo (AI): Xây dựng một thuật toán đơn giản (như Minimax cho 3x3 hoặc logic tìm nước đi tốt nhất cho bàn lớn) để máy có thể đấu với người.

Giao diện (UI): Thiết kế hiện đại, sạch sẽ, có thông báo khi có người thắng hoặc hòa, và có nút 'Chơi lại'.

Yêu cầu kỹ thuật: Viết tất cả code trong một file duy nhất để tôi dễ dàng sao chép và chạy."

Prompt tạo game bằng Python (Thư viện Pygame)

"Hãy viết một chương trình Python sử dụng thư viện pygame để tạo game cờ Caro với các yêu cầu sau:

Giao diện ban đầu: Cho phép người dùng chọn kích thước bàn cờ (3x3, 5x5, 7x7) và chế độ chơi (PvP hoặc PvE).

Cơ chế chơi: Sử dụng chuột để click đặt X và O. Đồ họa cần rõ nét, phân biệt rõ màu sắc giữa hai biểu tượng.

Logic game: Kiểm tra điều kiện thắng theo hàng ngang, hàng dọc và đường chéo. Thông báo kết quả lên màn hình khi kết thúc ván đấu.

AI: Nếu chọn chế độ 1 người, hãy lập trình một AI có khả năng chặn các nước đi của người chơi và cố gắng tạo hàng để thắng.

Cấu trúc code: Viết code sạch, có chú thích bằng tiếng Việt để tôi dễ dàng tìm hiểu và chỉnh sửa."

Gemini đưa ra 2 lựa chọn

Bước 3: Bạn chọn theo phương án phù hợp với yêu cầu của mình, ví dụ ở đây, GameVui chọn Prompt tạo game chơi trên trình duyệt rồi sao chép Prompt đó vào Gemini để nó tạo 1 file gồm HTML, CSS và JavaScript như dưới đây.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Cờ Caro - Pro</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --accent-x: #e74c3c;
            --accent-o: #3498db;
            --bg-color: #ecf0f1;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--bg-color);
            margin: 0;
            padding: 20px;
        }

        h1 { color: var(--primary-color); margin-bottom: 10px; }

        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        select, button {
            padding: 8px 15px;
            border-radius: 5px;
            border: 1px solid #bdc3c7;
            font-size: 16px;
            cursor: pointer;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            transition: opacity 0.3s;
        }

        button:hover { opacity: 0.8; }

        #status {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 15px;
            height: 30px;
            color: var(--primary-color);
        }

        .board {
            display: grid;
            gap: 5px;
            background-color: #bdc3c7;
            padding: 5px;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .cell {
            width: 60px;
            height: 60px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }

        .cell:hover { background-color: #f9f9f9; }
        .cell.taken { cursor: not-allowed; }
        .cell.x { color: var(--accent-x); }
        .cell.o { color: var(--accent-o); }
        
        .win-highlight { background-color: #2ecc71 !important; color: white !important; }

        @media (max-width: 500px) {
            .cell { width: 45px; height: 45px; font-size: 24px; }
        }
    </style>
</head>
<body>

    <h1>Cờ Caro</h1>

    <div class="controls">
        <select id="gameMode">
            <option value="pvp">2 Người chơi</option>
            <option value="pve">Đấu với Máy (AI)</option>
        </select>
        <select id="boardSize">
            <option value="3">Kích thước 3x3</option>
            <option value="5">Kích thước 5x5</option>
            <option value="7">Kích thước 7x7</option>
        </select>
        <button onclick="resetGame()">Chơi mới</button>
    </div>

    <div id="status">Lượt của X</div>
    <div id="board" class="board"></div>

    <script>
        let board = [];
        let currentPlayer = 'X';
        let isGameActive = true;
        let size = 3;
        let mode = 'pvp';

        const boardElement = document.getElementById('board');
        const statusElement = document.getElementById('status');

        function initGame() {
            size = parseInt(document.getElementById('boardSize').value);
            mode = document.getElementById('gameMode').value;
            board = Array(size * size).fill('');
            currentPlayer = 'X';
            isGameActive = true;
            statusElement.innerText = "Lượt của X";
            
            boardElement.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
            boardElement.innerHTML = '';

            for (let i = 0; i < size * size; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.addEventListener('click', () => handleCellClick(i));
                boardElement.appendChild(cell);
            }
        }

        function handleCellClick(index) {
            if (board[index] !== '' || !isGameActive) return;

            makeMove(index);

            if (isGameActive && mode === 'pve' && currentPlayer === 'O') {
                setTimeout(makeAIMove, 500);
            }
        }

        function makeMove(index) {
            board[index] = currentPlayer;
            const cell = boardElement.children[index];
            cell.innerText = currentPlayer;
            cell.classList.add('taken', currentPlayer.toLowerCase());

            if (checkWin(index)) {
                statusElement.innerText = `Người chơi ${currentPlayer} thắng!`;
                isGameActive = false;
                return;
            }

            if (board.every(cell => cell !== '')) {
                statusElement.innerText = "Hòa rồi!";
                isGameActive = false;
                return;
            }

            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            statusElement.innerText = `Lượt của ${currentPlayer}`;
        }

        function checkWin(index) {
            const row = Math.floor(index / size);
            const col = index % size;
            const winCondition = size === 3 ? 3 : 5; // 3x3 cần 3, bàn lớn hơn cần 5

            const directions = [
                [0, 1],  // Ngang
                [1, 0],  // Dọc
                [1, 1],  // Chéo xuôi
                [1, -1]  // Chéo ngược
            ];

            for (let [dr, dc] of directions) {
                let count = 1;
                let winningCells = [index];

                // Kiểm tra 2 hướng của mỗi trục
                for (let step of [1, -1]) {
                    let r = row + dr * step;
                    let c = col + dc * step;
                    while (r >= 0 && r < size && c >= 0 && c < size && board[r * size + c] === currentPlayer) {
                        count++;
                        winningCells.push(r * size + c);
                        if (count >= winCondition) {
                            highlightWin(winningCells);
                            return true;
                        }
                        r += dr * step;
                        c += dc * step;
                    }
                }
            }
            return false;
        }

        function highlightWin(cells) {
            cells.forEach(index => {
                boardElement.children[index].classList.add('win-highlight');
            });
        }

        function makeAIMove() {
            if (!isGameActive) return;

            // AI đơn giản: Tìm ô trống ngẫu nhiên
            // Bạn có thể nâng cấp thuật toán Minimax ở đây
            let availableMoves = board.map((val, idx) => val === '' ? idx : null).filter(val => val !== null);
            
            // Ưu tiên chặn hoặc thắng nếu là bàn 3x3 (Logic cơ bản)
            let move = availableMoves[Math.floor(Math.random() * availableMoves.length)];
            makeMove(move);
        }

        function resetGame() {
            initGame();
        }

        // Khởi tạo lần đầu
        document.getElementById('boardSize').addEventListener('change', initGame);
        document.getElementById('gameMode').addEventListener('change', initGame);
        initGame();
    </script>
</body>
</html>

Bước 4: Bạn copy file ở trên vào Notepad rồi lưu lại với tên caro.html

Copy đoạn mã vào Notepad

Bước 5: Bạn click chuột phải vào file caro.html rồi chọn Open with/Google Chrome (mở bằng Google Chrome)

Mở file caro.html

Bước 6: Bạn hãy chơi thử game Cờ Caro vừa tạo ra xem đã chạy ổn hay chưa

Chơi thử game cờ caro

Bước 7: Bạn có thể yêu cầu Gemini nâng cấp hoặc chỉnh sửa thêm cho trò chơi. Ví dụ như Tôi muốn khi 1 bên chiến thắng, game sẽ hiển thị popup người chiến thắng đồng thời hiển thị nút chơi lại ván đó hoặc chơi ván mới.

Chỉnh sửa hoặc nâng cấp game