当前位置：首页 > news >正文

网页五子棋小游戏

news 来源：原创 2025/6/22 17:59:09

以下是一个使用 JavaScript 实现的简单五子棋游戏示例，该示例结合 HTML 和 CSS 来构建游戏界面，实现了基本的落子、胜负判断等功能。

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        #board {
            position: relative;
            width: 450px;
            height: 450px;
            border: 1px solid #000;
            background-color: #f0d9b5;
        }

        .piece {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: -10px 0 0 -10px;
        }

        .black {
            background-color: #000;
        }

        .white {
            background-color: #fff;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="board"></div>
    <script>
        // 棋盘大小
        const BOARD_SIZE = 15;
        // 每个格子的大小
        const CELL_SIZE = 30;
        // 棋盘二维数组，用于记录落子情况
        const board = Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(0));
        // 当前玩家，1 表示黑棋，2 表示白棋
        let currentPlayer = 1;
        // 获取棋盘元素
        const boardElement = document.getElementById('board');

        // 初始化棋盘
        function initBoard() {
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    const x = j * CELL_SIZE + CELL_SIZE / 2;
                    const y = i * CELL_SIZE + CELL_SIZE / 2;
                    const piece = document.createElement('div');
                    piece.classList.add('piece');
                    piece.style.left = `${x}px`;
                    piece.style.top = `${y}px`;
                    boardElement.appendChild(piece);
                }
            }
        }

        // 落子
        function placePiece(x, y) {
            if (board[x][y] === 0) {
                board[x][y] = currentPlayer;
                const piece = document.createElement('div');
                piece.classList.add('piece', currentPlayer === 1 ? 'black' : 'white');
                piece.style.left = `${y * CELL_SIZE + CELL_SIZE / 2}px`;
                piece.style.top = `${x * CELL_SIZE + CELL_SIZE / 2}px`;
                boardElement.appendChild(piece);
                if (checkWin(x, y)) {
                    alert(`${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`);
                    resetGame();
                } else {
                    currentPlayer = 3 - currentPlayer; // 切换玩家
                }
            }
        }

        // 检查是否获胜
        function checkWin(x, y) {
            const directions = [
                [1, 0], [0, 1], [1, 1], [1, -1]
            ];
            for (const [dx, dy] of directions) {
                let count = 1;
                // 正向检查
                for (let i = 1; i < 5; i++) {
                    const newX = x + i * dx;
                    const newY = y + i * dy;
                    if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newX][newY] === currentPlayer) {
                        count++;
                    } else {
                        break;
                    }
                }
                // 反向检查
                for (let i = 1; i < 5; i++) {
                    const newX = x - i * dx;
                    const newY = y - i * dy;
                    if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newX][newY] === currentPlayer) {
                        count++;
                    } else {
                        break;
                    }
                }
                if (count >= 5) {
                    return true;
                }
            }
            return false;
        }

        // 重置游戏
        function resetGame() {
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    board[i][j] = 0;
                }
            }
            currentPlayer = 1;
            while (boardElement.firstChild) {
                boardElement.removeChild(boardElement.firstChild);
            }
            initBoard();
        }

        // 监听棋盘点击事件
        boardElement.addEventListener('click', (event) => {
            const rect = boardElement.getBoundingClientRect();
            const x = Math.floor((event.clientY - rect.top) / CELL_SIZE);
            const y = Math.floor((event.clientX - rect.left) / CELL_SIZE);
            if (x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE) {
                placePiece(x, y);
            }
        });

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

</html>

代码解释

HTML 部分：
- 创建一个 div 元素作为棋盘，其 id 为 board。
- 引入外部的 CSS 样式，用于设置棋盘和棋子的样式。
CSS 部分：
- #board：设置棋盘的大小、边框和背景颜色。
- .piece：设置棋子的基本样式，包括绝对定位、大小和圆角。
- .black 和 .white：分别设置黑棋和白棋的颜色。
JavaScript 部分：
- BOARD_SIZE 和 CELL_SIZE：定义棋盘的大小和每个格子的大小。
- board：二维数组，用于记录棋盘上每个位置的落子情况，0 表示空位，1 表示黑棋，2 表示白棋。
- currentPlayer：当前玩家，初始为黑棋（1）。
- initBoard：初始化棋盘，创建所有的格子。
- placePiece：在指定位置落子，更新棋盘数组和界面，检查是否获胜，如果获胜则弹出提示并重置游戏，否则切换玩家。
- checkWin：检查当前落子位置是否形成五子连珠，通过检查四个方向（水平、垂直、正斜、反斜）来判断。
- resetGame：重置游戏，清空棋盘数组和界面，将当前玩家重置为黑棋。
- 监听棋盘的点击事件，根据点击位置计算落子坐标，并调用 placePiece 函数。