AI——五子棋网页端小游戏全附代码

此星光明

发布于 2025-02-06 08:31:09

10100

代码可运行

文章被收录于专栏：GEE数据专栏，GEE学习专栏，GEE错误集等专栏GEE数据专栏，GEE学习专栏，GEE错误集等专栏

运行总次数：0

代码可运行

简介

五子棋是一种双人对战的棋类游戏。游戏的棋盘是一个15行15列的网格，双方玩家轮流在网格的空位上落子。目标是先在横线、竖线、斜线或对角线上形成连续的五个自己的棋子。

游戏开始时，棋盘是空的。先手玩家可以选择在任意一个空位上落下自己的棋子，然后轮到后手玩家进行操作。接下来，双方玩家轮流落子，每次只能在一个空位上落子。当任意一方玩家在棋盘上形成连续的五个自己的棋子时，游戏结束，该玩家获胜。如果棋盘填满而没有玩家获胜，则游戏结束，平局。

玩家在操作时需要注意以下几点： 1. 落子位置必须是空的，不能重复落子。 2. 选择落子位置时，可以考虑阻止对手获胜或是寻找自己的胜利策略。 3. 连续的五个棋子可以是横向、纵向、斜线或对角线上的五个棋子。

五子棋是一种策略性很强的棋类游戏，玩家需要考虑自己的每一步操作，以及对手的可能行动。不仅要注意自己的棋子排布，还要注意对手的行动，阻止对手获胜。游戏的胜负往往取决于玩家的策略和计算能力。

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; }
        h1 { margin: 20px; }
        #gameArea { display: grid; grid-template-columns: repeat(15, 40px); grid-template-rows: repeat(15, 40px); margin: auto; }
        .cell { width: 40px; height: 40px; border: 1px solid #999; display: flex; justify-content: center; align-items: center; cursor: pointer; }
        .black { background-color: black; border-radius: 50%; width: 30px; height: 30px; }
        .white { background-color: white; border-radius: 50%; width: 30px; height: 30px; }
        #controls { margin: 20px; }
        button { padding: 10px 20px; font-size: 16px; margin: 5px; }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    <div id="gameArea"></div>
    <div id="status" style="margin: 20px; font-size: 20px;">当前玩家: 黑方</div>
    <div id="controls">
        <button id="restartBtn">重新开始</button>
        <button id="exitBtn">退出游戏</button>
    </div>
    <script>
        const gameArea = document.getElementById('gameArea');
        const status = document.getElementById('status');
        const restartBtn = document.getElementById('restartBtn');
        const exitBtn = document.getElementById('exitBtn');
        let currentPlayer = 'black';
        const board = Array.from({ length: 15 }, () => Array(15).fill(null));

        // 初始化棋盘
        function initBoard() {
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.onclick = () => handleCellClick(i, j);
                    gameArea.appendChild(cell);
                }
            }
        }

        // 处理点击事件
        function handleCellClick(row, col) {
            if (board[row][col]) return; // 如果该位置已被占用，返回
            board[row][col] = currentPlayer;
            const cell = gameArea.children[row * 15 + col];
            cell.classList.add(currentPlayer);
            if (checkWin(row, col)) {
                alert(`${currentPlayer === 'black' ? '黑方' : '白方'} 胜利!`);
                resetGame();
            } else {
                currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                status.innerText = `当前玩家: ${currentPlayer === 'black' ? '黑方' : '白方'}`;
            }
        }

        // 检查胜利条件
        function checkWin(row, col) {
            return checkDirection(row, col, 1, 0) || // 横向
                   checkDirection(row, col, 0, 1) || // 纵向
                   checkDirection(row, col, 1, 1) || // 斜向右下
                   checkDirection(row, col, 1, -1);   // 斜向右上
        }

        // 检查特定方向的连胜
        function checkDirection(row, col, rowDir, colDir) {
            let count = 1; // 包含当前棋子
            count += countInDirection(row, col, rowDir, colDir);
            count += countInDirection(row, col, -rowDir, -colDir);
            return count >= 5;
        }

        // 计算某个方向上的棋子数量
        function countInDirection(row, col, rowDir, colDir) {
            let count = 0;
            let r = row + rowDir;
            let c = col + colDir;
            while (r >= 0 && r < 15 && c >= 0 && c < 15 && board[r][c] === currentPlayer) {
                count++;
                r += rowDir;
                c += colDir;
            }
            return count;
        }

        // 重置游戏
        function resetGame() {
            board.forEach(row => row.fill(null));
            Array.from(gameArea.children).forEach(cell => {
                cell.classList.remove('black', 'white');
            });
            currentPlayer = 'black';
            status.innerText = '当前玩家: 黑方';
        }

        // 退出游戏
        function exitGame() {
            if (confirm("确认退出游戏吗？")) {
                window.close(); // 尝试关闭窗口
            }
        }

        // 绑定按钮事件
        restartBtn.onclick = resetGame;
        exitBtn.onclick = exitGame;

        // 初始化棋盘
        initBoard();
    </script>
</body>
</html>