Spaces:

kevin213
/

gobang

Running

File size: 34,140 Bytes

5ed7ec6

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代化五子棋对战</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .board {
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            grid-template-rows: repeat(15, 1fr);
            gap: 1px;
            background-color: #e5c07b;
            border: 2px solid #5c3a21;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            width: 600px;
            height: 600px;
        }
        
        .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(229, 192, 123, 0.8);
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .cell:hover {
            background-color: rgba(229, 192, 123, 0.6);
        }
        
        .cell::before, .cell::after {
            content: '';
            position: absolute;
            background-color: #5c3a21;
        }
        
        .cell::before {
            width: 100%;
            height: 1px;
            top: 50%;
        }
        
        .cell::after {
            width: 1px;
            height: 100%;
            left: 50%;
        }
        
        .piece {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            z-index: 10;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }
        
        .black {
            background: radial-gradient(circle at 30% 30%, #666, #000);
        }
        
        .white {
            background: radial-gradient(circle at 30% 30%, #fff, #ccc);
            border: 1px solid #999;
        }
        
        .last-move {
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.7);
        }
        
        .win-line {
            position: absolute;
            background-color: rgba(255, 0, 0, 0.7);
            z-index: 5;
            transform-origin: left center;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal {
            animation: fadeIn 0.3s ease-out;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-6xl w-full">
        <h1 class="text-3xl font-bold text-center mb-6 text-gray-800">五子棋对战</h1>
        
        <div class="flex flex-col md:flex-row gap-6 items-center md:items-start justify-center">
            <!-- 游戏面板 -->
            <div class="relative">
                <div class="board mx-auto">
                    <!-- 棋盘将通过JavaScript动态生成 -->
                </div>
                
                <!-- 游戏状态指示器 -->
                <div class="mt-4 flex justify-between items-center px-2">
                    <div class="flex items-center">
                        <div class="w-6 h-6 rounded-full bg-black mr-2"></div>
                        <span id="black-score" class="font-medium">0</span>
                    </div>
                    <div id="game-status" class="px-4 py-1 bg-gray-200 rounded-full text-sm font-medium">黑方回合</div>
                    <div class="flex items-center">
                        <div class="w-6 h-6 rounded-full bg-white border border-gray-400 mr-2"></div>
                        <span id="white-score" class="font-medium">0</span>
                    </div>
                </div>
            </div>
            
            <!-- 游戏控制面板 -->
            <div class="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">游戏设置</h2>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">游戏模式</label>
                        <div class="flex gap-2">
                            <button id="pvp-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md flex-1 hover:bg-blue-700 transition">
                                <i class="fas fa-users mr-2"></i>双人对战
                            </button>
                            <button id="ai-btn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md flex-1 hover:bg-gray-300 transition">
                                <i class="fas fa-robot mr-2"></i>人机对战
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">AI难度</label>
                        <select id="ai-level" class="w-full p-2 border border-gray-300 rounded-md" disabled>
                            <option value="1">简单</option>
                            <option value="2" selected>中等</option>
                            <option value="3">困难</option>
                        </select>
                    </div>
                    
                    <div class="pt-2">
                        <button id="new-game-btn" class="w-full py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center justify-center">
                            <i class="fas fa-plus-circle mr-2"></i>新游戏
                        </button>
                    </div>
                    
                    <div class="pt-2">
                        <button id="undo-btn" class="w-full py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition flex items-center justify-center">
                            <i class="fas fa-undo mr-2"></i>悔棋
                        </button>
                    </div>
                    
                    <div class="pt-2">
                        <button id="restart-btn" class="w-full py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition flex items-center justify-center">
                            <i class="fas fa-redo mr-2"></i>重新开始
                        </button>
                    </div>
                </div>
                
                <div class="mt-6 pt-4 border-t border-gray-200">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">游戏记录</h3>
                    <div id="move-history" class="max-h-40 overflow-y-auto text-sm space-y-1">
                        <div class="text-gray-500 italic">游戏尚未开始</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 胜利模态框 -->
    <div id="win-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
        <div class="bg-white p-8 rounded-xl max-w-md w-full mx-4">
            <div class="text-center">
                <h2 id="win-title" class="text-2xl font-bold mb-4"></h2>
                <div id="win-message" class="mb-6"></div>
                <div class="flex gap-4 justify-center">
                    <button id="play-again-btn" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                        再玩一局
                    </button>
                    <button id="close-modal-btn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 游戏状态
            const gameState = {
                board: Array(15).fill().map(() => Array(15).fill(0)), // 0=空, 1=黑, 2=白
                currentPlayer: 1, // 1=黑, 2=白
                gameOver: false,
                lastMove: null,
                moveHistory: [],
                gameMode: 'pvp', // 'pvp' or 'ai'
                aiLevel: 2, // 1-3
                scores: { black: 0, white: 0 }
            };
            
            // DOM元素
            const boardElement = document.querySelector('.board');
            const gameStatusElement = document.getElementById('game-status');
            const blackScoreElement = document.getElementById('black-score');
            const whiteScoreElement = document.getElementById('white-score');
            const moveHistoryElement = document.getElementById('move-history');
            const pvpBtn = document.getElementById('pvp-btn');
            const aiBtn = document.getElementById('ai-btn');
            const aiLevelSelect = document.getElementById('ai-level');
            const newGameBtn = document.getElementById('new-game-btn');
            const undoBtn = document.getElementById('undo-btn');
            const restartBtn = document.getElementById('restart-btn');
            const winModal = document.getElementById('win-modal');
            const winTitle = document.getElementById('win-title');
            const winMessage = document.getElementById('win-message');
            const playAgainBtn = document.getElementById('play-again-btn');
            const closeModalBtn = document.getElementById('close-modal-btn');
            
            // 初始化棋盘
            function initBoard() {
                boardElement.innerHTML = '';
                
                for (let row = 0; row < 15; row++) {
                    for (let col = 0; col < 15; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell';
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        
                        cell.addEventListener('click', () => handleCellClick(row, col));
                        boardElement.appendChild(cell);
                    }
                }
            }
            
            // 处理点击棋盘
            function handleCellClick(row, col) {
                if (gameState.gameOver || gameState.board[row][col] !== 0) return;
                
                // 人机模式下，如果是AI的回合，不允许玩家下子
                if (gameState.gameMode === 'ai' && gameState.currentPlayer === 2) return;
                
                makeMove(row, col);
                
                // 人机模式下，玩家下完后AI下子
                if (gameState.gameMode === 'ai' && !gameState.gameOver && gameState.currentPlayer === 2) {
                    setTimeout(() => {
                        makeAIMove();
                    }, 500);
                }
            }
            
            // 下子
            function makeMove(row, col) {
                gameState.board[row][col] = gameState.currentPlayer;
                gameState.lastMove = { row, col, player: gameState.currentPlayer };
                gameState.moveHistory.push({ row, col, player: gameState.currentPlayer });
                
                updateBoard();
                
                // 检查是否胜利
                if (checkWin(row, col)) {
                    gameState.gameOver = true;
                    const winner = gameState.currentPlayer === 1 ? '黑方' : '白方';
                    
                    // 更新分数
                    if (gameState.currentPlayer === 1) {
                        gameState.scores.black++;
                        blackScoreElement.textContent = gameState.scores.black;
                    } else {
                        gameState.scores.white++;
                        whiteScoreElement.textContent = gameState.scores.white;
                    }
                    
                    showWinModal(`${winner}胜利!`, `恭喜${winner}获得胜利!`);
                    return;
                }
                
                // 切换玩家
                gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1;
                updateGameStatus();
                
                // 添加到历史记录
                addToMoveHistory(row, col);
            }
            
            // AI下子
            function makeAIMove() {
                if (gameState.gameOver) return;
                
                let row, col;
                
                // 简单AI - 随机下子
                if (gameState.aiLevel === 1) {
                    do {
                        row = Math.floor(Math.random() * 15);
                        col = Math.floor(Math.random() * 15);
                    } while (gameState.board[row][col] !== 0);
                } 
                // 中等AI - 简单评估
                else if (gameState.aiLevel === 2) {
                    const move = findBestMove(1); // 只考虑一步
                    row = move.row;
                    col = move.col;
                }
                // 困难AI - 更复杂的评估
                else {
                    const move = findBestMove(2); // 考虑两步
                    row = move.row;
                    col = move.col;
                }
                
                makeMove(row, col);
            }
            
            // 寻找最佳下法 (简化版)
            function findBestMove(depth) {
                // 优先检查是否有可以立即获胜的位置
                for (let row = 0; row < 15; row++) {
                    for (let col = 0; col < 15; col++) {
                        if (gameState.board[row][col] === 0) {
                            // 检查AI是否能在这里获胜
                            gameState.board[row][col] = 2;
                            if (checkWin(row, col)) {
                                gameState.board[row][col] = 0;
                                return { row, col, score: 10000 };
                            }
                            gameState.board[row][col] = 0;
                            
                            // 检查玩家是否能在这里获胜 (需要阻止)
                            gameState.board[row][col] = 1;
                            if (checkWin(row, col)) {
                                gameState.board[row][col] = 0;
                                return { row, col, score: 9000 };
                            }
                            gameState.board[row][col] = 0;
                        }
                    }
                }
                
                // 如果没有立即获胜或阻止的位置，则评估棋盘
                const moves = [];
                
                // 只在已有棋子周围的空位考虑 (提高效率)
                const consideredPositions = new Set();
                for (let row = 0; row < 15; row++) {
                    for (let col = 0; col < 15; col++) {
                        if (gameState.board[row][col] !== 0) {
                            // 检查周围3x3区域
                            for (let r = Math.max(0, row - 1); r <= Math.min(14, row + 1); r++) {
                                for (let c = Math.max(0, col - 1); c <= Math.min(14, col + 1); c++) {
                                    if (gameState.board[r][c] === 0 && !consideredPositions.has(`${r},${c}`)) {
                                        consideredPositions.add(`${r},${c}`);
                                        const score = evaluatePosition(r, c);
                                        moves.push({ row: r, col: c, score });
                                    }
                                }
                            }
                        }
                    }
                }
                
                // 如果没有可考虑的位置 (开局)，随机选择中心区域
                if (moves.length === 0) {
                    const centerMoves = [];
                    for (let row = 5; row <= 9; row++) {
                        for (let col = 5; col <= 9; col++) {
                            if (gameState.board[row][col] === 0) {
                                centerMoves.push({ row, col, score: 100 });
                            }
                        }
                    }
                    
                    if (centerMoves.length > 0) {
                        return centerMoves[Math.floor(Math.random() * centerMoves.length)];
                    }
                    
                    // 如果中心区域也没有位置，随机选择
                    let row, col;
                    do {
                        row = Math.floor(Math.random() * 15);
                        col = Math.floor(Math.random() * 15);
                    } while (gameState.board[row][col] !== 0);
                    
                    return { row, col, score: 0 };
                }
                
                // 按分数排序并返回最佳移动
                moves.sort((a, b) => b.score - a.score);
                return moves[0];
            }
            
            // 评估位置分数
            function evaluatePosition(row, col) {
                let score = 0;
                
                // 四个方向: 水平, 垂直, 对角线, 反对角线
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                for (const [dx, dy] of directions) {
                    // 评估AI (白子) 的潜力
                    score += evaluateLine(row, col, dx, dy, 2) * 2;
                    
                    // 评估玩家 (黑子) 的潜力 (需要阻止)
                    score += evaluateLine(row, col, dx, dy, 1);
                }
                
                // 中心位置更有价值
                const centerDist = Math.abs(row - 7) + Math.abs(col - 7);
                score += (14 - centerDist) * 10;
                
                return score;
            }
            
            // 评估一条线上的潜力
            function evaluateLine(row, col, dx, dy, player) {
                let score = 0;
                let count = 0; // 连续的同色棋子
                let empty = 0; // 两端的空位
                
                // 向一个方向检查
                for (let i = 1; i <= 4; i++) {
                    const r = row + i * dx;
                    const c = col + i * dy;
                    
                    if (r < 0 || r >= 15 || c < 0 || c >= 15) break;
                    
                    if (gameState.board[r][c] === player) {
                        count++;
                    } else if (gameState.board[r][c] === 0) {
                        empty++;
                        break;
                    } else {
                        break;
                    }
                }
                
                // 向相反方向检查
                for (let i = 1; i <= 4; i++) {
                    const r = row - i * dx;
                    const c = col - i * dy;
                    
                    if (r < 0 || r >= 15 || c < 0 || c >= 15) break;
                    
                    if (gameState.board[r][c] === player) {
                        count++;
                    } else if (gameState.board[r][c] === 0) {
                        empty++;
                        break;
                    } else {
                        break;
                    }
                }
                
                // 根据连续棋子和空位计算分数
                if (count >= 4) return 10000; // 可以形成五连
                if (count === 3 && empty === 2) return 5000; // 活四
                if (count === 3 && empty === 1) return 1000; // 冲四
                if (count === 2 && empty === 2) return 500; // 活三
                if (count === 2 && empty === 1) return 100; // 冲三
                if (count === 1 && empty === 2) return 50; // 活二
                
                return 0;
            }
            
            // 检查是否胜利
            function checkWin(row, col) {
                const player = gameState.board[row][col];
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                for (const [dx, dy] of directions) {
                    let count = 1; // 已经有一个棋子
                    
                    // 向一个方向检查
                    for (let i = 1; i <= 4; i++) {
                        const r = row + i * dx;
                        const c = col + i * dy;
                        
                        if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameState.board[r][c] !== player) break;
                        count++;
                    }
                    
                    // 向相反方向检查
                    for (let i = 1; i <= 4; i++) {
                        const r = row - i * dx;
                        const c = col - i * dy;
                        
                        if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameState.board[r][c] !== player) break;
                        count++;
                    }
                    
                    if (count >= 5) {
                        // 绘制胜利线
                        drawWinLine(row, col, dx, dy, count);
                        return true;
                    }
                }
                
                return false;
            }
            
            // 绘制胜利线
            function drawWinLine(row, col, dx, dy, count) {
                // 找到线的起点和终点
                let startRow = row;
                let startCol = col;
                let endRow = row;
                let endCol = col;
                
                // 向一个方向延伸
                for (let i = 1; i <= 4; i++) {
                    const r = row + i * dx;
                    const c = col + i * dy;
                    
                    if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameState.board[r][c] !== gameState.board[row][col]) break;
                    
                    endRow = r;
                    endCol = c;
                }
                
                // 向相反方向延伸
                for (let i = 1; i <= 4; i++) {
                    const r = row - i * dx;
                    const c = col - i * dy;
                    
                    if (r < 0 || r >= 15 || c < 0 || c >= 15 || gameState.board[r][c] !== gameState.board[row][col]) break;
                    
                    startRow = r;
                    startCol = c;
                }
                
                // 创建线元素
                const line = document.createElement('div');
                line.className = 'win-line';
                
                // 计算线的位置和角度
                const cellSize = boardElement.offsetWidth / 15;
                const startX = (startCol + 0.5) * cellSize;
                const startY = (startRow + 0.5) * cellSize;
                const endX = (endCol + 0.5) * cellSize;
                const endY = (endRow + 0.5) * cellSize;
                
                const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
                const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
                
                // 设置线的样式
                line.style.width = `${length}px`;
                line.style.height = '4px';
                line.style.left = `${startX}px`;
                line.style.top = `${startY}px`;
                line.style.transform = `rotate(${angle}deg)`;
                
                boardElement.appendChild(line);
            }
            
            // 更新棋盘显示
            function updateBoard() {
                // 清除所有棋子
                document.querySelectorAll('.piece').forEach(p => p.remove());
                
                // 重新绘制所有棋子
                for (let row = 0; row < 15; row++) {
                    for (let col = 0; col < 15; col++) {
                        if (gameState.board[row][col] !== 0) {
                            const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
                            const piece = document.createElement('div');
                            piece.className = `piece ${gameState.board[row][col] === 1 ? 'black' : 'white'}`;
                            
                            // 标记最后一步
                            if (gameState.lastMove && gameState.lastMove.row === row && gameState.lastMove.col === col) {
                                piece.classList.add('last-move');
                            }
                            
                            cell.appendChild(piece);
                        }
                    }
                }
            }
            
            // 更新游戏状态显示
            function updateGameStatus() {
                if (gameState.gameOver) {
                    gameStatusElement.textContent = '游戏结束';
                    gameStatusElement.className = 'px-4 py-1 bg-gray-400 rounded-full text-sm font-medium text-white';
                    return;
                }
                
                if (gameState.currentPlayer === 1) {
                    gameStatusElement.textContent = '黑方回合';
                    gameStatusElement.className = 'px-4 py-1 bg-gray-800 rounded-full text-sm font-medium text-white';
                } else {
                    gameStatusElement.textContent = gameState.gameMode === 'pvp' ? '白方回合' : 'AI思考中...';
                    gameStatusElement.className = 'px-4 py-1 bg-white border border-gray-300 rounded-full text-sm font-medium';
                }
            }
            
            // 添加到历史记录
            function addToMoveHistory(row, col) {
                const moveNum = gameState.moveHistory.length;
                const player = gameState.moveHistory[moveNum - 1].player;
                const moveText = `${moveNum}. ${player === 1 ? '黑' : '白'} (${String.fromCharCode(65 + col)}${15 - row})`;
                
                // 如果历史记录为空，清除占位文本
                if (moveHistoryElement.firstChild && moveHistoryElement.firstChild.textContent === '游戏尚未开始') {
                    moveHistoryElement.innerHTML = '';
                }
                
                const moveElement = document.createElement('div');
                moveElement.className = 'flex justify-between items-center py-1 px-2 bg-gray-100 rounded';
                moveElement.innerHTML = `
                    <span>${moveText}</span>
                    <button class="text-blue-600 hover:text-blue-800 text-xs" data-move="${moveNum - 1}">
                        <i class="fas fa-undo"></i>
                    </button>
                `;
                
                moveHistoryElement.prepend(moveElement);
                
                // 为悔棋按钮添加事件
                moveElement.querySelector('button').addEventListener('click', (e) => {
                    const moveIndex = parseInt(e.target.closest('button').dataset.move);
                    undoToMove(moveIndex);
                });
                
                // 限制历史记录数量
                if (moveHistoryElement.children.length > 10) {
                    moveHistoryElement.removeChild(moveHistoryElement.lastChild);
                }
            }
            
            // 悔棋到指定步数
            function undoToMove(moveIndex) {
                if (gameState.gameOver) return;
                
                // 重置游戏状态
                gameState.board = Array(15).fill().map(() => Array(15).fill(0));
                gameState.currentPlayer = 1;
                gameState.gameOver = false;
                gameState.lastMove = null;
                
                // 重新执行所有步数直到指定步
                for (let i = 0; i <= moveIndex; i++) {
                    const move = gameState.moveHistory[i];
                    gameState.board[move.row][move.col] = move.player;
                    gameState.currentPlayer = move.player === 1 ? 2 : 1;
                    gameState.lastMove = move;
                }
                
                // 截断历史记录
                gameState.moveHistory = gameState.moveHistory.slice(0, moveIndex + 1);
                
                // 更新显示
                updateBoard();
                updateGameStatus();
                
                // 重新生成历史记录
                moveHistoryElement.innerHTML = '';
                for (let i = 0; i <= moveIndex; i++) {
                    addToMoveHistory(gameState.moveHistory[i].row, gameState.moveHistory[i].col);
                }
                
                // 如果是AI模式且是AI的回合，让AI下子
                if (gameState.gameMode === 'ai' && gameState.currentPlayer === 2) {
                    setTimeout(() => {
                        makeAIMove();
                    }, 500);
                }
            }
            
            // 显示胜利模态框
            function showWinModal(title, message) {
                winTitle.textContent = title;
                winMessage.innerHTML = `
                    <div class="flex justify-center mb-4">
                        <div class="w-16 h-16 rounded-full ${gameState.currentPlayer === 1 ? 'bg-black' : 'bg-white border border-gray-400'}"></div>
                    </div>
                    <p class="text-lg">${message}</p>
                `;
                winModal.classList.remove('hidden');
            }
            
            // 新游戏
            function newGame() {
                // 重置游戏状态
                gameState.board = Array(15).fill().map(() => Array(15).fill(0));
                gameState.currentPlayer = 1;
                gameState.gameOver = false;
                gameState.lastMove = null;
                gameState.moveHistory = [];
                
                // 清除胜利线
                document.querySelectorAll('.win-line').forEach(line => line.remove());
                
                // 更新显示
                updateBoard();
                updateGameStatus();
                moveHistoryElement.innerHTML = '<div class="text-gray-500 italic">游戏尚未开始</div>';
                
                // 如果是AI模式且AI先手，让AI下子
                if (gameState.gameMode === 'ai' && gameState.currentPlayer === 2) {
                    setTimeout(() => {
                        makeAIMove();
                    }, 500);
                }
            }
            
            // 重新开始 (重置分数)
            function restartGame() {
                gameState.scores = { black: 0, white: 0 };
                blackScoreElement.textContent = '0';
                whiteScoreElement.textContent = '0';
                newGame();
            }
            
            // 事件监听器
            pvpBtn.addEventListener('click', () => {
                gameState.gameMode = 'pvp';
                pvpBtn.className = 'px-4 py-2 bg-blue-600 text-white rounded-md flex-1 hover:bg-blue-700 transition';
                aiBtn.className = 'px-4 py-2 bg-gray-200 text-gray-800 rounded-md flex-1 hover:bg-gray-300 transition';
                aiLevelSelect.disabled = true;
                newGame();
            });
            
            aiBtn.addEventListener('click', () => {
                gameState.gameMode = 'ai';
                pvpBtn.className = 'px-4 py-2 bg-gray-200 text-gray-800 rounded-md flex-1 hover:bg-gray-300 transition';
                aiBtn.className = 'px-4 py-2 bg-blue-600 text-white rounded-md flex-1 hover:bg-blue-700 transition';
                aiLevelSelect.disabled = false;
                newGame();
            });
            
            aiLevelSelect.addEventListener('change', () => {
                gameState.aiLevel = parseInt(aiLevelSelect.value);
            });
            
            newGameBtn.addEventListener('click', newGame);
            undoBtn.addEventListener('click', () => {
                if (gameState.moveHistory.length > 0) {
                    undoToMove(gameState.moveHistory.length - 2);
                }
            });
            
            restartBtn.addEventListener('click', restartGame);
            playAgainBtn.addEventListener('click', () => {
                winModal.classList.add('hidden');
                newGame();
            });
            
            closeModalBtn.addEventListener('click', () => {
                winModal.classList.add('hidden');
            });
            
            // 初始化游戏
            initBoard();
            updateGameStatus();
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kevin213/gobang" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>