静态页面|五子棋小游戏

2025-09-12

Word count: 969 | Reading time≈ 5 min

以下是使用HTML + CSS + JavaScript实现的五子棋小游戏的文字描述及代码转写成Markdown格式：

五子棋小游戏简介

以下是一个使用HTML + CSS + JavaScript 实现的五子棋小游戏，支持黑白双方交替落子、当前玩家提示和重置功能。

功能说明：

棋盘：15×15 的网格，模拟传统五子棋棋盘。
落子规则：
- 黑棋先行，双方交替落子。
- 点击空白格子放置棋子。
胜负判定：
- 横向、纵向、对角线任意方向连续五子即获胜。
- 获胜后弹出提示并自动重置棋盘。
当前玩家提示：
- 顶部显示当前回合玩家（黑棋/白棋）。
- 玩家名称颜色与棋子颜色一致。
重置功能：
- 点击“重新开始”按钮清空棋盘，重新开始游戏。

使用方法：

将代码保存为.html文件（如gomoku.html）。
用浏览器打开即可开始游戏。

HTML + CSS + JavaScript 代码

<!DOCTYPE html>
<html lang="zh-CN">
<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;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f5f5dc;
        }
        h1 {
            color: #333;
        }
        #game-info {
            margin: 10px 0;
            font-size: 18px;
            font-weight: bold;
        }
        #board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 1px;
            background: #dcb35c;
            padding: 10px;
            border: 2px solid #8b4513;
        }
        .cell {
            width: 30px;
            height: 30px;
            background: #f5e7c0;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .piece {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        .black {
            background: #000;
        }
        .white {
            background: #fff;
            border: 1px solid #000;
        }
        #reset-btn {
            margin-top: 20px;
            padding: 8px 16px;
            font-size: 16px;
            background: #8b4513;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #reset-btn:hover {
            background: #a0522d;
        }
    </style>
</head>
<body>
    <h1>五子棋小游戏</h1>
    <div id="game-info">当前回合: <span id="current-player">黑棋</span></div>
    <div id="board"></div>
    <button id="reset-btn">重新开始</button>

    <script>
        const board = document.getElementById('board');
        const currentPlayerDisplay = document.getElementById('current-player');
        const resetBtn = document.getElementById('reset-btn');
        const size = 15; // 15x15 的棋盘
        let currentPlayer = 'black'; // 当前玩家，黑棋先行
        let gameBoard = Array(size).fill().map(() => Array(size).fill(null)); // 记录棋盘状态

        function initBoard() {
            board.innerHTML = '';
            gameBoard = Array(size).fill().map(() => Array(size).fill(null));
            currentPlayer = 'black';
            currentPlayerDisplay.textContent = '黑棋';
            currentPlayerDisplay.style.color = '#000';

            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', handleCellClick);
                    board.appendChild(cell);
                }
            }
        }

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

            if (gameBoard[row][col] !== null) return;

            const piece = document.createElement('div');
            piece.className = `piece ${currentPlayer}`;
            e.target.appendChild(piece);
            gameBoard[row][col] = currentPlayer;

            if (checkWin(row, col)) {
                setTimeout(() => {
                    alert(`${currentPlayer === 'black' ? '黑棋' : '白棋'}获胜！`);
                    initBoard();
                }, 100);
                return;
            }

            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
            currentPlayerDisplay.textContent = currentPlayer === 'black' ? '黑棋' : '白棋';
            currentPlayerDisplay.style.color = currentPlayer === 'black' ? '#000' : '#fff';
        }

        function checkWin(row, col) {
            const directions = [
                [0, 1], // 水平
                [1, 0], // 垂直
                [1, 1], // 右下对角线
                [1, -1] // 左下对角线
            ];

            return directions.some(([dx, dy]) => {
                let count = 1; // 当前位置已经有一个棋子

                count += countConsecutive(row, col, dx, dy, currentPlayer);
                count += countConsecutive(row, col, -dx, -dy, currentPlayer);

                return count >= 5;
            });
        }

        function countConsecutive(row, col, dx, dy, player) {
            let count = 0;
            let r = row + dx;
            let c = col + dy;

            while (
                r >= 0 && r < size &&
                c >= 0 && c < size &&
                gameBoard[r][c] === player
            ) {
                count++;
                r += dx;
                c += dy;
            }

            return count;
        }

        resetBtn.addEventListener('click', initBoard);

        initBoard();
    </script>
</body>
</html>

该实现简洁直观，适合学习基础的交互逻辑。如果需要扩展功能（如AI对战、悔棋等），可以在此基础上继续开发。

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.