用AI寫HTML GAME

發佈於bot

更新於 2025/06/01發佈於 2025/06/01閱讀時間約 15 分鐘

這次「bot.學習.人」用了google gemini 寫了一個HTML 5的遊戲，一方面是因為自己不知道HTML 5的遊戲怎麼寫，所以想用AI 學習一下，一方面也是想試試AI 寫出來的Code 能否直接用。

下的prompt 很簡單，就只有一句話: 「幫我寫一個 HTML5 的黑白棋遊戲。」，很快的，Gemini 就產生了一段說明，以及馬上就生成一段HTML檔案，還自動分成CSS、html和js。

html 如下:

<!DOCTYPE html>
<html>
<head>
    <title>黑白棋</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>黑白棋</h1>
    <div id="board"></div>
    <p id="turn">輪到：黑棋</p>
    <script src="script.js"></script>
</body>
</html>

js 如下：

const boardElement = document.getElementById('board');
const turnElement = document.getElementById('turn');
const boardSize = 8;
let board = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));
let currentPlayer = 'black';

function initializeBoard() {
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', handleCellClick);
            boardElement.appendChild(cell);
        }
    }

    // 初始棋子
    board[3][3] = 'white';
    board[3][4] = 'black';
    board[4][3] = 'black';
    board[4][4] = 'white';

    renderBoard();
}

function renderBoard() {
    boardElement.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.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', handleCellClick);

            if (board[i][j] === 'black') {
                cell.classList.add('black');
            } else if (board[i][j] === 'white') {
                cell.classList.add('white');
            }

            boardElement.appendChild(cell);
        }
    }
    updateTurnDisplay();
    highlightAvailableMoves();
}

function updateTurnDisplay() {
    turnElement.textContent = `輪到：${currentPlayer === 'black' ? '黑棋' : '白棋'}`;
}

function handleCellClick(event) {
    const row = parseInt(event.target.dataset.row);
    const col = parseInt(event.target.dataset.col);

    if (isValidMove(row, col)) {
        placePiece(row, col);
        flipPieces(row, col);
        switchPlayer();
        renderBoard();
    }
}

function isValidMove(row, col) {
    if (board[row][col] !== null) {
        return false;
    }

    const directions = [
        [-1, 0], [1, 0], [0, -1], [0, 1], // 水平垂直
        [-1, -1], [-1, 1], [1, -1], [1, 1]  // 對角線
    ];

    for (const [dr, dc] of directions) {
        let r = row + dr;
        let c = col + dc;
        let foundOpponent = false;

        while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && board[r][c] !== null && board[r][c] !== currentPlayer) {
            foundOpponent = true;
            r += dr;
            c += dc;
        }

        if (foundOpponent && r >= 0 && r < boardSize && c >= 0 && c < boardSize && board[r][c] === currentPlayer) {
            return true;
        }
    }

    return false;
}

function placePiece(row, col) {
    board[row][col] = currentPlayer;
}

function flipPieces(row, col) {
    const directions = [
        [-1, 0], [1, 0], [0, -1], [0, 1], // 水平垂直
        [-1, -1], [-1, 1], [1, -1], [1, 1]  // 對角線
    ];

    for (const [dr, dc] of directions) {
        let r = row + dr;
        let c = col + dc;
        let piecesToFlip = [];
        let foundOpponent = false;

        while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && board[r][c] !== null && board[r][c] !== currentPlayer) {
            foundOpponent = true;
            piecesToFlip.push([r, c]);
            r += dr;
            c += dc;
        }

        if (foundOpponent && r >= 0 && r < boardSize && c >= 0 && c < boardSize && board[r][c] === currentPlayer) {
            for (const [flipR, flipC] of piecesToFlip) {
                board[flipR][flipC] = currentPlayer;
            }
        }
    }
}

function switchPlayer() {
    currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
}

function getAvailableMoves() {
    const availableMoves = [];
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            if (isValidMove(i, j)) {
                availableMoves.push([i, j]);
            }
        }
    }
    return availableMoves;
}

function highlightAvailableMoves() {
    const availableMoves = getAvailableMoves();
    const cells = document.querySelectorAll('.cell');
    cells.forEach(cell => {
        cell.classList.remove('available');
        const row = parseInt(cell.dataset.row);
        const col = parseInt(cell.dataset.col);
        if (availableMoves.some(move => move[0] === row && move[1] === col)) {
            cell.classList.add('available');
        }
    });
}

// 遊戲開始
initializeBoard();

css如下:

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#board {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    border: 2px solid black;
}

.cell {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.cell.black::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: black;
}

.cell.white::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid black;
}

.cell.available {
    background-color: lightgreen;
}