人体汉字识别游戏

最新推荐文章于 2026-01-06 22:13:31 发布
原创最新推荐文章于 2026-01-06 22:13:31 发布 · 406 阅读
3 ·
CC 4.0 BY-SA版权
文章标签：
#游戏 #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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #1a237e 0%, #311b92 30%, #4a148c 100%);
            color: white;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .game-container {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 20px;
            padding: 20px;
            height: 100vh;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* 游戏主区域 */
        .game-main {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        /* 摄像头区域 */
        .camera-area {
            flex: 1;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            border: 3px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        #video-canvas {
            width: 100%;
            height: 100%;
            display: block;
            transform: scaleX(-1); /* 镜像翻转 */
        }
        
        .camera-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        /* 游戏头部 */
        .game-header {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .game-title {
            font-size: 2.2rem;
            font-weight: bold;
            background: linear-gradient(90deg, #00bcd4, #4caf50);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
        }
        
        .game-info {
            display: flex;
            gap: 30px;
        }
        
        .info-item {
            text-align: center;
        }
        
        .info-value {
            font-size: 2rem;
            font-weight: bold;
            color: #00e5ff;
            text-shadow: 0 0 10px #00e5ff;
        }
        
        .info-label {
            font-size: 0.9rem;
            color: #b3e5fc;
            margin-top: 5px;
        }
        
        /* 侧边控制面板 */
        .control-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        /* 当前汉字区域 */
        .character-display {
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            border: 3px solid rgba(0, 188, 212, 0.4);
            box-shadow: 0 0 30px rgba(0, 188, 212, 0.3);
        }
        
        .character-title {
            font-size: 1.2rem;
            color: #80deea;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .character {
            font-size: 8rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 30px #00e5ff;
            line-height: 1;
            margin: 10px 0;
            font-family: 'KaiTi', '楷体', 'STKaiti', serif;
        }
        
        .character-pinyin {
            font-size: 1.5rem;
            color: #b3e5fc;
            margin-top: 10px;
        }
        
        /* 汉字列表 */
        .characters-list {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            border: 2px solid rgba(255, 215, 0, 0.3);
            flex: 1;
            overflow-y: auto;
        }
        
        .characters-title {
            font-size: 1.2rem;
            color: #ffd700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .characters-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .character-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .character-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }
        
        .character-item.active {
            background: rgba(0, 188, 212, 0.3);
            border-color: #00bcd4;
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
        }
        
        .char-item {
            font-size: 2.5rem;
            font-weight: bold;
            font-family: 'KaiTi', '楷体', 'STKaiti', serif;
        }
        
        .char-desc {
            font-size: 0.8rem;
            color: #b3e5fc;
            margin-top: 5px;
        }
        
        /* 游戏控制 */
        .game-controls {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            border: 2px solid rgba(76, 175, 80, 0.3);
        }
        
        .control-title {
            font-size: 1.2rem;
            color: #4caf50;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .control-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .control-btn {
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .control-btn.start {
            background: linear-gradient(135deg, #4caf50, #2e7d32);
            color: white;
        }
        
        .control-btn.pause {
            background: linear-gradient(135deg, #ff9800, #ef6c00);
            color: white;
        }
        
        .control-btn.next {
            background: linear-gradient(135deg, #2196f3, #0d47a1);
            color: white;
        }
        
        .control-btn.reset {
            background: linear-gradient(135deg, #f44336, #b71c1c);
            color: white;
        }
        
        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .control-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 识别状态 */
        .recognition-status {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            border: 2px solid rgba(255, 215, 0, 0.4);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        }
        
        .status-indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f44336;
            animation: pulse 1.5s infinite;
        }
        
        .status-indicator.detecting {
            background: #4caf50;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .status-text {
            flex: 1;
            font-size: 1rem;
        }
        
        .match-progress {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
            flex: 1;
        }
        
        .match-fill {
            height: 100%;
            background: linear-gradient(90deg, #4caf50, #8bc34a);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        /* 得分效果 */
        .score-effect {
            position: fixed;
            pointer-events: none;
            z-index: 1000;
            font-size: 3rem;
            font-weight: bold;
            color: #ffeb3b;
            text-shadow: 0 0 20px #ffeb3b;
            animation: floatUp 1.5s ease-out forwards;
        }
        
        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) scale(1.5);
                opacity: 0;
            }
        }
        
        /* 提示信息 */
        .hint-message {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            padding: 15px;
            max-width: 300px;
            border-left: 4px solid #00bcd4;
            animation: slideIn 0.5s ease;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .hint-title {
            color: #00bcd4;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .hint-text {
            font-size: 0.9rem;
            color: #e0f7fa;
        }
        
        /* 关节显示样式 */
        .joint-info {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            padding: 15px;
            max-width: 200px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        .joint-title {
            color: #ffd700;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .joint-list {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .joint-tag {
            background: rgba(255, 215, 0, 0.2);
            color: #ffd700;
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 0.8rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .game-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr auto;
            }
            
            .control-panel {
                grid-row: 3;
                flex-direction: row;
            }
            
            .characters-list {
                flex: 1;
            }
            
            .character-display {
                flex: 0 0 200px;
            }
            
            .game-controls {
                flex: 0 0 200px;
            }
        }
        
        @media (max-width: 768px) {
            .game-container {
                padding: 10px;
                gap: 10px;
            }
            
            .character {
                font-size: 5rem;
            }
            
            .info-value {
                font-size: 1.5rem;
            }
            
            .characters-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
    
    <!-- MediaPipe Pose -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="game-container">
        <!-- 游戏主区域 -->
        <div class="game-main">
            <!-- 游戏头部 -->
            <div class="game-header">
                <div class="game-title">👤 人体汉字识别游戏</div>
                <div class="game-info">
                    <div class="info-item">
                        <div class="info-value" id="score">0</div>
                        <div class="info-label">得分</div>
                    </div>
                    <div class="info-item">
                        <div class="info-value" id="level">1</div>
                        <div class="info-label">关卡</div>
                    </div>
                    <div class="info-item">
                        <div class="info-value" id="streak">0</div>
                        <div class="info-label">连击</div>
                    </div>
                    <div class="info-item">
                        <div class="info-value" id="accuracy">0%</div>
                        <div class="info-label">准确率</div>
                    </div>
                </div>
            </div>
            
            <!-- 摄像头区域 -->
            <div class="camera-area">
                <canvas id="video-canvas"></canvas>
                <div class="camera-overlay" id="pose-overlay"></div>
                
                <!-- 识别状态 -->
                <div class="recognition-status">
                    <div class="status-indicator" id="status-indicator"></div>
                    <div class="status-text" id="status-text">等待摄像头启动...</div>
                    <div class="match-progress">
                        <div class="match-fill" id="match-fill"></div>
                    </div>
                </div>
                
                <!-- 提示信息 -->
                <div class="hint-message" id="hint-message" style="display: none;">
                    <div class="hint-title">💡 游戏提示</div>
                    <div class="hint-text">请用身体摆出当前汉字的形状！</div>
                </div>
                
                <!-- 关节信息 -->
                <div class="joint-info" id="joint-info" style="display: none;">
                    <div class="joint-title">🦴 检测到的关节</div>
                    <div class="joint-list" id="joint-list"></div>
                </div>
            </div>
        </div>
        
        <!-- 侧边控制面板 -->
        <div class="control-panel">
            <!-- 当前汉字区域 -->
            <div class="character-display">
                <div class="character-title">
                    <span>🎯 当前汉字</span>
                </div>
                <div class="character" id="current-character">大</div>
                <div class="character-pinyin" id="current-pinyin">dà</div>
            </div>
            
            <!-- 汉字列表 -->
            <div class="characters-list">
                <div class="characters-title">
                    <span>📖 可识别的汉字</span>
                </div>
                <div class="characters-grid" id="characters-grid">
                    <!-- 汉字列表由JS生成 -->
                </div>
            </div>
            
            <!-- 游戏控制 -->
            <div class="game-controls">
                <div class="control-title">
                    <span>🎮 游戏控制</span>
                </div>
                <div class="control-buttons">
                    <button class="control-btn start" id="start-btn">
                        <span>▶️</span>
                        <span>开始游戏</span>
                    </button>
                    <button class="control-btn pause" id="pause-btn">
                        <span>⏸️</span>
                        <span>暂停</span>
                    </button>
                    <button class="control-btn next" id="next-btn">
                        <span>⏭️</span>
                        <span>下一个</span>
                    </button>
                    <button class="control-btn reset" id="reset-btn">
                        <span>🔄</span>
                        <span>重新开始</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 视频元素（隐藏） -->
    <video class="input_video" id="input_video" style="display: none;"></video>
    
    <script>
        // ==========================================
        // 1. 游戏配置
        // ==========================================
        const GameConfig = {
            // 汉字库 - 人体可表达的汉字
            characters: [
                { char: '大', pinyin: 'dà', description: '张开四肢站立', difficulty: 1 },
                { char: '小', pinyin: 'xiǎo', description: '双腿并拢站立', difficulty: 1 },
                { char: '人', pinyin: 'rén', description: '双腿分开站立', difficulty: 1 },
                { char: '十', pinyin: 'shí', description: '双臂平伸站立', difficulty: 2 },
                { char: '土', pinyin: 'tǔ', description: 'T字形站立', difficulty: 2 },
                { char: '工', pinyin: 'gōng', description: '双臂下垂站立', difficulty: 2 },
                { char: '口', pinyin: 'kǒu', description: '双手在头顶合拢', difficulty: 3 },
                { char: '中', pinyin: 'zhōng', description: '中心站立姿势', difficulty: 3 },
                { char: '天', pinyin: 'tiān', description: '头顶双手', difficulty: 3 },
                { char: '木', pinyin: 'mù', description: '树状姿势', difficulty: 3 },
                { char: '火', pinyin: 'huǒ', description: '火焰状姿势', difficulty: 4 },
                { char: '山', pinyin: 'shān', description: '山峰状姿势', difficulty: 4 }
            ],
            
            // 姿势识别配置
            poseDetection: {
                minDetectionConfidence: 0.5,
                minTrackingConfidence: 0.5,
                modelComplexity: 1
            },
            
            // 游戏配置
            game: {
                initialScore: 0,
                basePoints: 100,
                streakBonus: 50,
                matchThreshold: 0.7, // 匹配阈值
                recognitionDelay: 2000, // 识别延迟（毫秒）
                maxStreak: 10,
                levelUpThreshold: 500 // 每500分升一级
            }
        };

        // ==========================================
        // 2. 游戏状态管理
        // ==========================================
        const GameState = {
            isRunning: false,
            isPaused: false,
            currentCharacter: null,
            currentPose: null,
            score: 0,
            level: 1,
            streak: 0,
            correctCount: 0,
            totalAttempts: 0,
            lastRecognitionTime: 0,
            isRecognizing: false,
            poseHistory: [],
            detectedJoints: new Set(),
            selectedCharacter: null
        };

        // ==========================================
        // 3. 汉字姿势检测器
        // ==========================================
        class CharacterPoseDetector {
            constructor() {
                this.poseLandmarks = null;
                this.lastDetectionTime = 0;
            }
            
            // 计算姿势与汉字的匹配度
            matchCharacter(characterChar, landmarks) {
                if (!landmarks) return 0;
                
                // 根据不同的汉字，使用不同的匹配算法
                switch(characterChar) {
                    case '大':
                        return this.matchDa(landmarks);
                    case '小':
                        return this.matchXiao(landmarks);
                    case '人':
                        return this.matchRen(landmarks);
                    case '十':
                        return this.matchShi(landmarks);
                    case '土':
                        return this.matchTu(landmarks);
                    case '工':
                        return this.matchGong(landmarks);
                    case '口':
                        return this.matchKou(landmarks);
                    case '中':
                        return this.matchZhong(landmarks);
                    case '天':
                        return this.matchTian(landmarks);
                    case '木':
                        return this.matchMu(landmarks);
                    case '火':
                        return this.matchHuo(landmarks);
                    case '山':
                        return this.matchShan(landmarks);
                    default:
                        return 0;
                }
            }
            
            // 计算关键点之间的角度
            calculateAngle(pointA, pointB, pointC) {
                const AB = Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2));
                const BC = Math.sqrt(Math.pow(pointB.x - pointC.x, 2) + Math.pow(pointB.y - pointC.y, 2));
                const AC = Math.sqrt(Math.pow(pointC.x - pointA.x, 2) + Math.pow(pointC.y - pointA.y, 2));
                
                if (AB === 0 || BC === 0) return 0;
                
                const cosAngle = (Math.pow(AB, 2) + Math.pow(BC, 2) - Math.pow(AC, 2)) / (2 * AB * BC);
                return Math.acos(Math.min(Math.max(cosAngle, -1), 1)) * (180 / Math.PI);
            }
            
            // 计算关键点之间的距离
            calculateDistance(pointA, pointB) {
                return Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2));
            }
            
            // 检查关键点是否在一条直线上
            checkCollinear(pointA, pointB, pointC, threshold = 10) {
                const area = Math.abs(
                    pointA.x * (pointB.y - pointC.y) +
                    pointB.x * (pointC.y - pointA.y) +
                    pointC.x * (pointA.y - pointB.y)
                ) / 2;
                
                return area < threshold;
            }
            
            // 匹配"大"字 - 张开四肢站立
            matchDa(landmarks) {
                try {
                    const leftShoulder = landmarks[11];
                    const rightShoulder = landmarks[12];
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    const leftKnee = landmarks[25];
                    const rightKnee = landmarks[26];
                    const leftAnkle = landmarks[27];
                    const rightAnkle = landmarks[28];
                    
                    // 检查双腿分开
                    const hipDistance = this.calculateDistance(leftHip, rightHip);
                    const shoulderDistance = this.calculateDistance(leftShoulder, rightShoulder);
                    const legSpread = hipDistance / shoulderDistance;
                    
                    // 检查手臂伸展（如果可见）
                    const leftArmAngle = this.calculateAngle(leftShoulder, leftHip, leftAnkle);
                    const rightArmAngle = this.calculateAngle(rightShoulder, rightHip, rightAnkle);
                    
                    let score = 0;
                    
                    // 腿部分开度评分（最佳比例 1.5-2.5）
                    if (legSpread > 1.2 && legSpread < 3) {
                        score += 0.4;
                    }
                    
                    // 腿部伸直评分
                    const leftLegStraightness = Math.abs(180 - this.calculateAngle(leftHip, leftKnee, leftAnkle));
                    const rightLegStraightness = Math.abs(180 - this.calculateAngle(rightHip, rightKnee, rightAnkle));
                    
                    if (leftLegStraightness < 30 && rightLegStraightness < 30) {
                        score += 0.3;
                    }
                    
                    // 身体直立评分
                    const bodyAlignment = this.checkCollinear(leftShoulder, leftHip, leftAnkle);
                    if (bodyAlignment) {
                        score += 0.3;
                    }
                    
                    return Math.min(score, 1);
                } catch (e) {
                    console.error('匹配"大"字时出错:', e);
                    return 0;
                }
            }
            
            // 匹配"小"字 - 双腿并拢站立
            matchXiao(landmarks) {
                try {
                    const leftShoulder = landmarks[11];
                    const rightShoulder = landmarks[12];
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    const leftAnkle = landmarks[27];
                    const rightAnkle = landmarks[28];
                    
                    // 检查双腿并拢
                    const hipDistance = this.calculateDistance(leftHip, rightHip);
                    const ankleDistance = this.calculateDistance(leftAnkle, rightAnkle);
                    
                    let score = 0;
                    
                    // 腿部和脚踝靠近
                    if (hipDistance < 0.1 && ankleDistance < 0.1) {
                        score += 0.6;
                    }
                    
                    // 身体直立
                    const bodyAlignment = this.checkCollinear(leftShoulder, leftHip, leftAnkle);
                    if (bodyAlignment) {
                        score += 0.4;
                    }
                    
                    return Math.min(score, 1);
                } catch (e) {
                    console.error('匹配"小"字时出错:', e);
                    return 0;
                }
            }
            
            // 匹配"人"字 - 双腿分开站立
            matchRen(landmarks) {
                try {
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    const leftAnkle = landmarks[27];
                    const rightAnkle = landmarks[28];
                    
                    // 计算腿部分开角度
                    const angle = this.calculateAngle(leftHip, leftAnkle, rightAnkle);
                    
                    let score = 0;
                    
                    // 理想的"人"字角度大约30-60度
                    if (angle > 20 && angle < 80) {
                        score = Math.min(angle / 60, 1);
                    }
                    
                    return score;
                } catch (e) {
                    console.error('匹配"人"字时出错:', e);
                    return 0;
                }
            }
            
            // 匹配"十"字 - 双臂平伸站立
            matchShi(landmarks) {
                try {
                    const leftShoulder = landmarks[11];
                    const rightShoulder = landmarks[12];
                    const leftElbow = landmarks[13];
                    const rightElbow = landmarks[14];
                    const leftWrist = landmarks[15];
                    const rightWrist = landmarks[16];
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    
                    let score = 0;
                    
                    // 检查双臂水平伸展
                    const leftArmHorizontal = Math.abs(leftShoulder.y - leftWrist.y) < 0.1;
                    const rightArmHorizontal = Math.abs(rightShoulder.y - rightWrist.y) < 0.1;
                    
                    if (leftArmHorizontal && rightArmHorizontal) {
                        score += 0.5;
                    }
                    
                    // 检查手臂伸展程度
                    const leftArmLength = this.calculateDistance(leftShoulder, leftWrist);
                    const rightArmLength = this.calculateDistance(rightShoulder, rightWrist);
                    const shoulderWidth = this.calculateDistance(leftShoulder, rightShoulder);
                    
                    if (leftArmLength > shoulderWidth * 0.8 && rightArmLength > shoulderWidth * 0.8) {
                        score += 0.3;
                    }
                    
                    // 检查身体直立
                    const bodyStraight = Math.abs(leftShoulder.x - leftHip.x) < 0.1;
                    if (bodyStraight) {
                        score += 0.2;
                    }
                    
                    return Math.min(score, 1);
                } catch (e) {
                    console.error('匹配"十"字时出错:', e);
                    return 0;
                }
            }
            
            // 匹配"土"字 - T字形站立
            matchTu(landmarks) {
                try {
                    const leftShoulder = landmarks[11];
                    const rightShoulder = landmarks[12];
                    const leftWrist = landmarks[15];
                    const rightWrist = landmarks[16];
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    
                    let score = 0;
                    
                    // 检查双臂水平（T字的上横）
                    const armsHorizontal = Math.abs(leftShoulder.y - rightShoulder.y) < 0.1;
                    const armsExtended = this.calculateDistance(leftWrist, rightWrist) > 
                                        this.calculateDistance(leftShoulder, rightShoulder) * 1.5;
                    
                    if (armsHorizontal && armsExtended) {
                        score += 0.6;
                    }
                    
                    // 检查身体垂直（T字的竖）
                    const bodyVertical = Math.abs(leftShoulder.x - leftHip.x) < 0.1;
                    if (bodyVertical) {
                        score += 0.4;
                    }
                    
                    return Math.min(score, 1);
                } catch (e) {
                    console.error('匹配"土"字时出错:', e);
                    return 0;
                }
            }
            
            // 匹配"工"字 - 双臂下垂站立
            matchGong(landmarks) {
                try {
                    const leftShoulder = landmarks[11];
                    const rightShoulder = landmarks[12];
                    const leftElbow = landmarks[13];
                    const rightElbow = landmarks[14];
                    const leftWrist = landmarks[15];
                    const rightWrist = landmarks[16];
                    const leftHip = landmarks[23];
                    const rightHip = landmarks[24];
                    
                    let score = 0;
                    
                    // 检查双臂下垂
                    const leftArmVertical = Math.abs(leftShoulder.x - leftWrist.x) < 0.1;
                    const rightArmVertical = Math.abs(rightShoulder.x - rightWrist.x) < 0.1;
                    const leftArmStraight = this.calculateAngle(leftShoulder, leftElbow, leftWrist) > 150;
                    const rightArmStraight = this.calculateAngle(rightShoulder, rightElbow, rightWrist) > 150;
                    
                    if (leftArmVertical && rightArmVertical && leftArmStraight && rightArmStraight) {
                        score += 0.5;
                    }
                    
                    // 检查身体直立
                    const bodyStraight = Math.abs(leftShoulder.x - leftHip.x) < 0.1;
                    if (bodyStraight) {
                        score += 0.3;
                    }
                    
                    // 检查双腿并拢
                    const hipsClose = this.calculateDistance(leftHip, rightHip) < 0.15;
                    if (hipsClose) {
                        score += 0.2;
                    }
                    
                    return Math.min(score, 1);
                } catch (e) {
                    console.error('匹配"工"字时出错:', e);
                    return 0;
                }
            }
            
            // 其他汉字匹配方法（简化版）
            matchKou(landmarks) {
                // "口"字：双手在头顶合拢形成方形
                const leftWrist = landmarks[15];
                const rightWrist = landmarks[16];
                const nose = landmarks[0];
                
                const wristDistance = this.calculateDistance(leftWrist, rightWrist);
                const heightAboveHead = nose.y - leftWrist.y;
                
                let score = 0;
                if (wristDistance < 0.2 && heightAboveHead > 0.1) {
                    score = 0.7;
                }
                
                return score;
            }
            
            matchZhong(landmarks) {
                // "中"字：中心对称姿势
                return this.matchShi(landmarks) * 0.8;
            }
            
            matchTian(landmarks) {
                // "天"字：头顶双手
                const leftWrist = landmarks[15];
                const rightWrist = landmarks[16];
                const nose = landmarks[0];
                
                const wristHeight = Math.min(leftWrist.y, rightWrist.y);
                let score = 0;
                
                if (wristHeight < nose.y - 0.1) {
                    score = 0.6;
                }
                
                return score;
            }
            
            matchMu(landmarks) {
                // "木"字：树状姿势，双臂上举
                const leftWrist = landmarks[15];
                const rightWrist = landmarks[16];
                const leftShoulder = landmarks[11];
                
                let score = 0;
                if (leftWrist.y < leftShoulder.y && rightWrist.y < leftShoulder.y) {
                    score = 0.7;
                }
                
                return score;
            }
            
            matchHuo(landmarks) {
                // "火"字：火焰状，不对称姿势
                const leftWrist = landmarks[15];
                const rightWrist = landmarks[16];
                const leftShoulder = landmarks[11];
                const rightShoulder = landmarks[12];
                
                const leftArmAngle = this.calculateAngle(leftShoulder, leftWrist, rightShoulder);
                const rightArmAngle = this.calculateAngle(rightShoulder, rightWrist, leftShoulder);
                
                let score = 0;
                if (Math.abs(leftArmAngle - rightArmAngle) > 30) {
                    score = 0.6;
                }
                
                return score;
            }
            
            matchShan(landmarks) {
                // "山"字：山峰状，双臂形成三个顶点
                const leftWrist = landmarks[15];
                const rightWrist = landmarks[16];
                const head = landmarks[0];
                
                let score = 0;
                const wristHeightDiff = Math.abs(leftWrist.y - rightWrist.y);
                const headToWristDiff = Math.abs(head.y - (leftWrist.y + rightWrist.y) / 2);
                
                if (wristHeightDiff > 0.1 && headToWristDiff > 0.2) {
                    score = 0.5;
                }
                
                return score;
            }
            
            // 获取检测到的关节信息
            getDetectedJoints(landmarks) {
                const joints = new Set();
                if (!landmarks) return joints;
                
                // MediaPipe Pose的33个关键点
                const jointNames = [
                    '鼻子', '左眼内', '左眼', '左眼外', '右眼内', '右眼', '右眼外',
                    '左耳', '右耳', '左嘴', '右嘴', '左肩', '右肩', '左肘', '右肘',
                    '左手腕', '右手腕', '左小指', '右小指', '左食指', '右食指',
                    '左大拇指', '右大拇指', '左髋', '右髋', '左膝', '右膝',
                    '左踝', '右踝', '左脚跟', '右脚跟', '左脚尖', '右脚尖'
                ];
                
                landmarks.forEach((landmark, index) => {
                    if (landmark.visibility > 0.5) {
                        joints.add(jointNames[index]);
                    }
                });
                
                return joints;
            }
        }

        // ==========================================
        // 4. 游戏主逻辑
        // ==========================================
        class GameManager {
            constructor() {
                this.poseDetector = new CharacterPoseDetector();
                this.currentCharacterIndex = 0;
                this.initializeUI();
                this.initializePoseDetection();
                this.setupEventListeners();
            }
            
            initializeUI() {
                // 初始化汉字列表
                const charactersGrid = document.getElementById('characters-grid');
                charactersGrid.innerHTML = '';
                
                GameConfig.characters.forEach((char, index) => {
                    const charElement = document.createElement('div');
                    charElement.className = 'character-item';
                    charElement.dataset.index = index;
                    charElement.innerHTML = `
                        <div class="char-item">${char.char}</div>
                        <div class="char-desc">${char.description}</div>
                    `;
                    
                    charElement.addEventListener('click', () => {
                        this.selectCharacter(index);
                    });
                    
                    charactersGrid.appendChild(charElement);
                });
                
                // 设置初始汉字
                this.selectCharacter(0);
            }
            
            selectCharacter(index) {
                // 移除之前的选择
                document.querySelectorAll('.character-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 设置新的选择
                const charElement = document.querySelector(`[data-index="${index}"]`);
                charElement.classList.add('active');
                
                GameState.selectedCharacter = GameConfig.characters[index];
                this.updateCurrentCharacter(GameConfig.characters[index]);
            }
            
            updateCurrentCharacter(character) {
                GameState.currentCharacter = character;
                
                document.getElementById('current-character').textContent = character.char;
                document.getElementById('current-pinyin').textContent = character.pinyin;
                
                // 显示提示
                this.showHint(`请摆出"${character.char}"字的姿势：${character.description}`);
            }
            
            updateGameStats() {
                document.getElementById('score').textContent = GameState.score;
                document.getElementById('level').textContent = GameState.level;
                document.getElementById('streak').textContent = GameState.streak;
                
                if (GameState.totalAttempts > 0) {
                    const accuracy = Math.round((GameState.correctCount / GameState.totalAttempts) * 100);
                    document.getElementById('accuracy').textContent = `${accuracy}%`;
                }
            }
            
            showHint(message, duration = 3000) {
                const hintElement = document.getElementById('hint-message');
                const hintText = document.querySelector('.hint-text');
                
                hintText.textContent = message;
                hintElement.style.display = 'block';
                
                if (duration > 0) {
                    setTimeout(() => {
                        hintElement.style.display = 'none';
                    }, duration);
                }
            }
            
            showScoreEffect(points, x, y) {
                const effect = document.createElement('div');
                effect.className = 'score-effect';
                effect.textContent = `+${points}`;
                effect.style.left = `${x}px`;
                effect.style.top = `${y}px`;
                
                document.body.appendChild(effect);
                
                setTimeout(() => {
                    effect.remove();
                }, 1500);
            }
            
            updateJointInfo(joints) {
                const jointList = document.getElementById('joint-list');
                const jointInfo = document.getElementById('joint-info');
                
                if (joints.size > 0) {
                    jointList.innerHTML = '';
                    joints.forEach(joint => {
                        const tag = document.createElement('span');
                        tag.className = 'joint-tag';
                        tag.textContent = joint;
                        jointList.appendChild(tag);
                    });
                    
                    jointInfo.style.display = 'block';
                } else {
                    jointInfo.style.display = 'none';
                }
            }
            
            checkPoseMatch(landmarks) {
                if (!GameState.isRunning || GameState.isPaused || !GameState.currentCharacter) return;
                
                const now = Date.now();
                if (now - GameState.lastRecognitionTime < GameConfig.game.recognitionDelay) return;
                
                // 获取检测到的关节
                const detectedJoints = this.poseDetector.getDetectedJoints(landmarks);
                GameState.detectedJoints = detectedJoints;
                this.updateJointInfo(detectedJoints);
                
                // 计算匹配度
                const matchScore = this.poseDetector.matchCharacter(
                    GameState.currentCharacter.char,
                    landmarks
                );
                
                // 更新匹配进度条
                const matchFill = document.getElementById('match-fill');
                matchFill.style.width = `${matchScore * 100}%`;
                
                // 更新状态指示器
                const statusIndicator = document.getElementById('status-indicator');
                const statusText = document.getElementById('status-text');
                
                if (matchScore > 0) {
                    statusIndicator.className = 'status-indicator detecting';
                    statusText.textContent = `匹配度: ${Math.round(matchScore * 100)}%`;
                    
                    // 如果匹配度超过阈值
                    if (matchScore >= GameConfig.game.matchThreshold) {
                        this.onPoseMatched(matchScore);
                        GameState.lastRecognitionTime = now;
                    }
                } else {
                    statusIndicator.className = 'status-indicator';
                    statusText.textContent = '请摆出正确的姿势...';
                }
            }
            
            onPoseMatched(matchScore) {
                if (!GameState.isRunning) return;
                
                GameState.totalAttempts++;
                GameState.correctCount++;
                
                // 计算得分
                const basePoints = GameConfig.game.basePoints;
                const streakBonus = GameState.streak * GameConfig.game.streakBonus;
                const accuracyBonus = Math.round(matchScore * 50);
                const totalPoints = basePoints + streakBonus + accuracyBonus;
                
                // 更新游戏状态
                GameState.score += totalPoints;
                GameState.streak++;
                
                // 检查升级
                if (GameState.score >= GameState.level * GameConfig.game.levelUpThreshold) {
                    GameState.level++;
                }
                
                // 限制连击数
                if (GameState.streak > GameConfig.game.maxStreak) {
                    GameState.streak = GameConfig.game.maxStreak;
                }
                
                // 更新UI
                this.updateGameStats();
                
                // 显示得分效果
                const canvas = document.getElementById('video-canvas');
                const x = Math.random() * canvas.clientWidth;
                const y = canvas.clientHeight / 2;
                this.showScoreEffect(totalPoints, x, y);
                
                // 显示成功消息
                this.showHint(`太棒了！成功匹配"${GameState.currentCharacter.char}"字！得分+${totalPoints}`, 2000);
                
                // 自动选择下一个汉字（如果游戏正在运行）
                setTimeout(() => {
                    if (GameState.isRunning && !GameState.isPaused) {
                        this.nextCharacter();
                    }
                }, 1500);
            }
            
            nextCharacter() {
                const currentIndex = GameConfig.characters.findIndex(
                    char => char.char === GameState.currentCharacter.char
                );
                
                let nextIndex = (currentIndex + 1) % GameConfig.characters.length;
                this.selectCharacter(nextIndex);
                
                // 重置匹配进度
                document.getElementById('match-fill').style.width = '0%';
            }
            
            startGame() {
                GameState.isRunning = true;
                GameState.isPaused = false;
                
                document.getElementById('start-btn').disabled = true;
                document.getElementById('pause-btn').disabled = false;
                
                this.showHint('游戏开始！请用身体摆出当前汉字的形状。');
                
                // 重置状态指示器
                const statusIndicator = document.getElementById('status-indicator');
                const statusText = document.getElementById('status-text');
                statusIndicator.className = 'status-indicator';
                statusText.textContent = '等待姿势识别...';
            }
            
            pauseGame() {
                GameState.isPaused = !GameState.isPaused;
                
                const pauseBtn = document.getElementById('pause-btn');
                pauseBtn.innerHTML = GameState.isPaused ? 
                    '<span>▶️</span><span>继续</span>' : 
                    '<span>⏸️</span><span>暂停</span>';
                
                const statusText = document.getElementById('status-text');
                statusText.textContent = GameState.isPaused ? '游戏已暂停' : '等待姿势识别...';
            }
            
            resetGame() {
                GameState.score = 0;
                GameState.level = 1;
                GameState.streak = 0;
                GameState.correctCount = 0;
                GameState.totalAttempts = 0;
                
                this.updateGameStats();
                this.selectCharacter(0);
                
                document.getElementById('match-fill').style.width = '0%';
                
                this.showHint('游戏已重置，请重新开始。');
            }
            
            setupEventListeners() {
                // 开始按钮
                document.getElementById('start-btn').addEventListener('click', () => {
                    this.startGame();
                });
                
                // 暂停按钮
                document.getElementById('pause-btn').addEventListener('click', () => {
                    this.pauseGame();
                });
                
                // 下一个按钮
                document.getElementById('next-btn').addEventListener('click', () => {
                    if (GameState.isRunning && !GameState.isPaused) {
                        this.nextCharacter();
                    }
                });
                
                // 重置按钮
                document.getElementById('reset-btn').addEventListener('click', () => {
                    this.resetGame();
                });
                
                // 键盘快捷键
                document.addEventListener('keydown', (e) => {
                    if (e.code === 'Space') {
                        e.preventDefault();
                        if (!GameState.isRunning) {
                            this.startGame();
                        } else {
                            this.pauseGame();
                        }
                    }
                    
                    if (e.code === 'ArrowRight' && GameState.isRunning && !GameState.isPaused) {
                        this.nextCharacter();
                    }
                    
                    if (e.code === 'KeyR') {
                        this.resetGame();
                    }
                    
                    // 数字键1-9选择汉字
                    if (e.code >= 'Digit1' && e.code <= 'Digit9') {
                        const index = parseInt(e.code[5]) - 1;
                        if (index < GameConfig.characters.length) {
                            this.selectCharacter(index);
                        }
                    }
                });
            }
            
            initializePoseDetection() {
                const videoElement = document.getElementById('input_video');
                const canvasElement = document.getElementById('video-canvas');
                const canvasCtx = canvasElement.getContext('2d');
                
                function onResults(results) {
                    if (!results.poseLandmarks) {
                        // 没有检测到姿势
                        const statusText = document.getElementById('status-text');
                        statusText.textContent = '未检测到人体，请站在摄像头前';
                        return;
                    }
                    
                    // 绘制摄像头画面
                    canvasCtx.save();
                    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
                    canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
                    
                    // 绘制姿势关键点和连线
                    if (results.poseLandmarks) {
                        if (window.drawConnectors && window.drawLandmarks) {
                            drawConnectors(canvasCtx, results.poseLandmarks, POSE_CONNECTIONS, {
                                color: '#00FF00',
                                lineWidth: 2
                            });
                            drawLandmarks(canvasCtx, results.poseLandmarks, {
                                color: '#FF0000',
                                lineWidth: 1,
                                radius: 4
                            });
                        }
                    }
                    
                    canvasCtx.restore();
                    
                    // 检查姿势匹配
                    gameManager.checkPoseMatch(results.poseLandmarks);
                }
                
                // 初始化MediaPipe Pose
                const pose = new Pose({
                    locateFile: (file) => {
                        return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
                    }
                });
                
                pose.setOptions({
                    modelComplexity: GameConfig.poseDetection.modelComplexity,
                    smoothLandmarks: true,
                    minDetectionConfidence: GameConfig.poseDetection.minDetectionConfidence,
                    minTrackingConfidence: GameConfig.poseDetection.minTrackingConfidence
                });
                
                pose.onResults(onResults);
                
                // 启动摄像头
                const camera = new Camera(videoElement, {
                    onFrame: async () => {
                        await pose.send({image: videoElement});
                    },
                    width: 640,
                    height: 480
                });
                
                camera.start().then(() => {
                    console.log('摄像头已启动，姿势识别准备就绪');
                    
                    // 更新状态显示
                    const statusIndicator = document.getElementById('status-indicator');
                    const statusText = document.getElementById('status-text');
                    statusIndicator.className = 'status-indicator';
                    statusText.textContent = '姿势识别已就绪，请开始游戏';
                    
                    // 显示提示
                    gameManager.showHint('摄像头已启动，请点击"开始游戏"按钮开始。');
                    
                }).catch(error => {
                    console.error('摄像头启动失败:', error);
                    
                    const statusText = document.getElementById('status-text');
                    statusText.textContent = '摄像头启动失败，请检查权限';
                    statusText.style.color = '#ff4444';
                    
                    gameManager.showHint('摄像头启动失败，请检查浏览器权限设置。', 5000);
                });
            }
        }

        // ==========================================
        // 5. 初始化游戏
        // ==========================================
        let gameManager;

        window.addEventListener('DOMContentLoaded', () => {
            gameManager = new GameManager();
            gameManager.updateGameStats();
        });

        // 窗口大小调整处理
        window.addEventListener('resize', () => {
            const canvas = document.getElementById('video-canvas');
            if (canvas) {
                // 保持摄像头画面的宽高比
                const container = canvas.parentElement;
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
            }
        });
    </script>
</body>
</html>