五子棋游戏 body { background-color: #f0f0f0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: Arial, sans-serif; }

    #gameCanvas {
        background-color: #f3d2b5;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        margin: 20px 0;
    }
    
    #status {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    #restartBtn {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
    }
    
    #restartBtn:hover {
        background-color: #45a049;
    }
</style>

重新开始

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const statusDiv = document.getElementById('status');
    const restartBtn = document.getElementById('restartBtn');
    
    // 棋盘设置
    const BOARD_SIZE = 15;
    const CELL_SIZE = 400 / (BOARD_SIZE - 1);
    const BOARD_WIDTH = 400;
    const BOARD_HEIGHT = 400;
    
    // 游戏状态
    let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
    let currentPlayer = 1; // 1为黑棋，2为白棋
    let gameOver = false;
    let winner = 0;
    
    // 绘制棋盘
    function drawBoard() {
        ctx.clearRect(0, 0, BOARD_WIDTH, BOARD_HEIGHT);
        ctx.fillStyle = '#f3d2b5';
        ctx.fillRect(0, 0, BOARD_WIDTH, BOARD_HEIGHT);
        
        // 绘制网格线
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 1;
        
        for (let i = 0; i < BOARD_SIZE; i++) {
            // 水平线
            ctx.beginPath();
            ctx.moveTo(0, i * CELL_SIZE);
            ctx.lineTo(BOARD_WIDTH, i * CELL_SIZE);
            ctx.stroke();
            
            // 垂直线
            ctx.beginPath();
            ctx.moveTo(i * CELL_SIZE, 0);
            ctx.lineTo(i * CELL_SIZE, BOARD_HEIGHT);
            ctx.stroke();
        }
        
        // 绘制棋子
        for (let row = 0; row < BOARD_SIZE; row++) {
            for (let col = 0; col < BOARD_SIZE; col++) {
                if (board[row][col] !== 0) {
                    drawPiece(col, row, board[row][col]);
                }
            }
        }
    }
    
    // 绘制棋子
    function drawPiece(col, row, player) {
        const x = Math.round(col * CELL_SIZE);
        const y = Math.round(row * CELL_SIZE);
        
        ctx.beginPath();
        ctx.arc(x, y, CELL_SIZE / 2 - 2, 0, Math.PI * 2);
        
        if (player === 1) { // 黑棋
            ctx.fillStyle = '#000';
        } else { // 白棋
            ctx.fillStyle = '#fff';
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.stroke();
        }
        
        ctx.fill();
    }
    
    // 检查胜利
    function checkWin(row, col, player) {
        // 检查水平方向
        let count = 1;
        // 向左检查
        for (let c = col - 1; c >= 0 && board[row][c] === player; c--) count++;
        // 向右检查
        for (let c = col + 1; c < BOARD_SIZE && board[row][c] === player; c++) count++;
        if (count >= 5) return true;
        
        // 检查垂直方向
        count = 1;
        // 向上检查
        for (let r = row - 1; r >= 0 && board[r][col] === player; r--) count++;
        // 向下检查
        for (let r = row + 1; r < BOARD_SIZE && board[r][col] === player; r++) count++;
        if (count >= 5) return true;
        
        // 检查左上到右下对角线
        count = 1;
        // 向左上检查
        for (let r = row - 1, c = col - 1; r >= 0 && c >= 0 && board[r][c] === player; r--, c--) count++;
        // 向右下检查
        for (let r = row + 1, c = col + 1; r < BOARD_SIZE && c < BOARD_SIZE && board[r][c] === player; r++, c++) count++;
        if (count >= 5) return true;
        
        // 检查右上到左下对角线
        count = 1;
        // 向右上检查
        for (let r = row - 1, c = col + 1; r >= 0 && c < BOARD_SIZE && board[r][c] === player; r--, c++) count++;
        // 向左下检查
        for (let r = row + 1, c = col - 1; r < BOARD_SIZE && c >= 0 && board[r][c] === player; r++, c--) count++;
        if (count >= 5) return true;
        
        return false;
    }
    
    // 处理点击事件
    canvas.addEventListener('click', function(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 / CELL_SIZE);
        const row = Math.round(y / CELL_SIZE);
        
        // 检查是否在棋盘范围内且该位置没有棋子
        if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE && board[row][col] === 0) {
            board[row][col] = currentPlayer;
            
            if (checkWin(row, col, currentPlayer)) {
                gameOver = true;
                winner = currentPlayer;
                statusDiv.textContent = `游戏结束！${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`;
            } else {
                // 切换玩家
                currentPlayer = currentPlayer === 1 ? 2 : 1;
                statusDiv.textContent = `${currentPlayer === 1 ? '黑棋' : '白棋'}下棋`;
            }
            
            drawBoard();
        }
    });
    
    // 重新开始游戏
    restartBtn.addEventListener('click', function() {
        board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
        currentPlayer = 1;
        gameOver = false;
        winner = 0;
        statusDiv.textContent = '黑棋先行';
        drawBoard();
    });
    
    // 初始化游戏
    drawBoard();
</script>