五子棋游戏（五子棋游戏解说和平精英）-前端教程-前军教程网

完整的游戏功能：
黑白双方轮流下棋
自动判定胜负
支持重新开始游戏
美观的界面：
标准的15×15棋盘
棋盘带有网格线和五个星位点
棋子使用渐变效果，看起来更立体
状态显示清晰
用户友好：
实时显示当前回合信息
有效的落子位置检测
简单直观的操作方式
代码特性：
使用Canvas绘制棋盘和棋子
完整的胜负判定算法
响应式的用户交互
清晰的代码结构和注释
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>五子棋游戏</title>
    <style>
        .container {
            text-align: center;
            margin: 20px auto;
        }
        
        #chessboard {
            border: 2px solid #8B4513;
            margin: 0 auto;
            background-color: #DEB887;
        }

        .status {
            margin: 20px;
            font-size: 24px;
            color: #333;
        }

        .restart-btn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }

        .restart-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="status" id="status">黑方回合</div>
        <canvas id="chessboard" width="600" height="600"></canvas>
        <br>
        <button class="restart-btn" onclick="restartGame()">重新开始</button>
    </div>

    <script>
        const canvas = document.getElementById('chessboard');
        const ctx = canvas.getContext('2d');
        const statusDiv = document.getElementById('status');
        
        const GRID_SIZE = 40; // 格子大小
        const BOARD_SIZE = 15; // 15x15的棋盘
        const PIECE_RADIUS = 18; // 棋子半径
        
        let currentPlayer = 1; // 1为黑棋，2为白棋
        let gameOver = false;
        let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));

        // 初始化棋盘
        function initBoard() {
            // 绘制棋盘背景
            ctx.fillStyle = '#DEB887';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制棋盘线
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;

            // 绘制横线
            for (let i = 0; i < BOARD_SIZE; i++) {
                ctx.beginPath();
                ctx.moveTo(GRID_SIZE, GRID_SIZE + i * GRID_SIZE);
                ctx.lineTo(GRID_SIZE * BOARD_SIZE, GRID_SIZE + i * GRID_SIZE);
                ctx.stroke();
            }

            // 绘制竖线
            for (let i = 0; i < BOARD_SIZE; i++) {
                ctx.beginPath();
                ctx.moveTo(GRID_SIZE + i * GRID_SIZE, GRID_SIZE);
                ctx.lineTo(GRID_SIZE + i * GRID_SIZE, GRID_SIZE * BOARD_SIZE);
                ctx.stroke();
            }

            // 绘制中心点和四个星位
            const points = [[7, 7], [3, 3], [3, 11], [11, 3], [11, 11]];
            points.forEach(([x, y]) => {
                ctx.beginPath();
                ctx.arc(GRID_SIZE + x * GRID_SIZE, GRID_SIZE + y * GRID_SIZE, 5, 0, Math.PI * 2);
                ctx.fillStyle = '#000';
                ctx.fill();
            });
        }

        // 绘制棋子
        function drawPiece(row, col, player) {
            const x = GRID_SIZE + col * GRID_SIZE;
            const y = GRID_SIZE + row * GRID_SIZE;

            ctx.beginPath();
            ctx.arc(x, y, PIECE_RADIUS, 0, Math.PI * 2);
            
            // 创建渐变
            const gradient = ctx.createRadialGradient(
                x - 5, y - 5, 1,
                x, y, PIECE_RADIUS
            );

            if (player === 1) { // 黑棋
                gradient.addColorStop(0, '#666');
                gradient.addColorStop(1, '#000');
            } else { // 白棋
                gradient.addColorStop(0, '#fff');
                gradient.addColorStop(1, '#ccc');
            }

            ctx.fillStyle = gradient;
            ctx.fill();
            ctx.strokeStyle = player === 1 ? '#000' : '#ccc';
            ctx.stroke();
        }

        // 检查是否获胜
        function checkWin(row, col) {
            const directions = [
                [[0, 1], [0, -1]], // 水平
                [[1, 0], [-1, 0]], // 垂直
                [[1, 1], [-1, -1]], // 主对角线
                [[1, -1], [-1, 1]] // 副对角线
            ];

            for (let [dir1, dir2] of directions) {
                let count = 1;
                
                // 向一个方向查找
                for (let i = 1; i < 5; i++) {
                    const newRow = row + dir1[0] * i;
                    const newCol = col + dir1[1] * i;
                    if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
                    if (board[newRow][newCol] !== currentPlayer) break;
                    count++;
                }
                
                // 向相反方向查找
                for (let i = 1; i < 5; i++) {
                    const newRow = row + dir2[0] * i;
                    const newCol = col + dir2[1] * i;
                    if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) break;
                    if (board[newRow][newCol] !== currentPlayer) break;
                    count++;
                }

                if (count >= 5) return true;
            }
            return false;
        }

        // 处理点击事件
        canvas.addEventListener('click', (e) => {
            if (gameOver) return;

            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // 计算落子的行列
            const col = Math.round((x - GRID_SIZE) / GRID_SIZE);
            const row = Math.round((y - GRID_SIZE) / GRID_SIZE);

            // 检查是否在有效范围内
            if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) return;
            
            // 检查该位置是否已有棋子
            if (board[row][col] !== 0) return;

            // 放置棋子
            board[row][col] = currentPlayer;
            drawPiece(row, col, currentPlayer);

            // 检查是否获胜
            if (checkWin(row, col)) {
                statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '获胜！';
                gameOver = true;
                return;
            }

            // 切换玩家
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '回合';
        });

        // 重新开始游戏
        function restartGame() {
            board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
            currentPlayer = 1;
            gameOver = false;
            statusDiv.textContent = '黑方回合';
            initBoard();
        }

        // 初始化游戏
        initBoard();
    </script>
</body>
</html>
前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

五子棋游戏（五子棋游戏解说和平精英）
