nanocode/happy-games/games/tetris/test_simple.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块简单测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #1a202c;
            color: white;
        }
        
        .test-area {
            background: #2d3748;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .button {
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .start-btn {
            background: linear-gradient(145deg, #10b981 0%, #047857 100%);
            color: white;
        }
        
        .restart-btn {
            background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        
        .control-btn {
            background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
            color: white;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            font-size: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 5px;
        }
        
        .log {
            background: #4a5568;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            font-family: monospace;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .success {
            color: #68d391;
        }
        
        .error {
            color: #fc8181;
        }
        
        .info {
            color: #63b3ed;
        }
    </style>
</head>
<body>
    <h1>🎮 俄罗斯方块功能测试</h1>
    
    <div class="test-area">
        <h2>1. 按钮点击测试</h2>
        <p>点击以下按钮，查看控制台输出：</p>
        
        <button class="button start-btn" id="test-start">▶️ 开始</button>
        <button class="button restart-btn" id="test-restart">🔄 重来</button>
        
        <div style="margin: 20px 0;">
            <div class="control-btn" id="test-left">←</div>
            <div class="control-btn" id="test-down">↓</div>
            <div class="control-btn" id="test-right">→</div>
            <div class="control-btn" id="test-rotate">↻</div>
        </div>
        
        <div class="log" id="click-log">
            <div class="info">点击按钮日志将显示在这里...</div>
        </div>
    </div>
    
    <div class="test-area">
        <h2>2. 键盘事件测试</h2>
        <p>按以下键测试键盘事件：</p>
        <ul>
            <li><strong>← → ↓</strong> - 方向键</li>
            <li><strong>空格键</strong> - 旋转</li>
            <li><strong>P键</strong> - 暂停/继续</li>
            <li><strong>任意键</strong> - 自动开始游戏</li>
        </ul>
        
        <div class="log" id="keyboard-log">
            <div class="info">键盘事件日志将显示在这里...</div>
        </div>
    </div>
    
    <div class="test-area">
        <h2>3. JavaScript环境检测</h2>
        <div class="log" id="env-log">
            <div class="info">正在检测JavaScript环境...</div>
        </div>
    </div>
    
    <div class="test-area">
        <h2>4. 链接到实际游戏</h2>
        <p><a href="http://129.211.173.87:8895/games/tetris/" target="_blank" style="color: #63b3ed; font-weight: bold;">点击这里打开俄罗斯方块游戏</a></p>
        
        <h3>如果游戏按钮无响应：</h3>
        <ol>
            <li>按 <strong>F12</strong> 打开开发者工具</li>
            <li>点击 <strong>Console（控制台）</strong> 标签页</li>
            <li>刷新页面</li>
            <li>查看是否有红色错误信息</li>
            <li>将错误信息截图或复制给我</li>
        </ol>
    </div>

    <script>
        // 环境检测
        const envLog = document.getElementById('env-log');
        envLog.innerHTML = '';
        
        const tests = [
            { name: 'JavaScript支持', test: () => typeof window !== 'undefined', message: '✅ JavaScript已启用' },
            { name: '控制台支持', test: () => typeof console !== 'undefined', message: '✅ 控制台可用' },
            { name: '事件监听支持', test: () => typeof document.addEventListener === 'function', message: '✅ 事件监听可用' },
            { name: '按钮元素', test: () => document.getElementById('test-start'), message: '✅ 按钮元素存在' },
            { name: '键盘事件', test: () => typeof KeyboardEvent !== 'undefined', message: '✅ 键盘事件支持' },
            { name: '触摸事件', test: () => typeof TouchEvent !== 'undefined', message: '✅ 触摸事件支持' },
        ];
        
        tests.forEach(test => {
            const div = document.createElement('div');
            try {
                const result = test.test();
                div.innerHTML = result ? `<span class="success">${test.message}</span>` : `<span class="error">❌ ${test.name}失败</span>`;
            } catch (e) {
                div.innerHTML = `<span class="error">❌ ${test.name}错误: ${e.message}</span>`;
            }
            envLog.appendChild(div);
        });
        
        // 按钮点击测试
        const clickLog = document.getElementById('click-log');
        const buttons = [
            { id: 'test-start', name: '开始按钮' },
            { id: 'test-restart', name: '重来按钮' },
            { id: 'test-left', name: '左按钮' },
            { id: 'test-down', name: '下按钮' },
            { id: 'test-right', name: '右按钮' },
            { id: 'test-rotate', name: '旋转按钮' }
        ];
        
        buttons.forEach(btn => {
            const element = document.getElementById(btn.id);
            if (element) {
                element.addEventListener('click', () => {
                    const logEntry = document.createElement('div');
                    logEntry.innerHTML = `<span class="success">✅ ${btn.name} 点击成功</span> (时间: ${new Date().toLocaleTimeString()})`;
                    clickLog.appendChild(logEntry);
                    clickLog.scrollTop = clickLog.scrollHeight;
                    
                    // 模拟按钮反馈
                    element.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        element.style.transform = 'scale(1)';
                    }, 100);
                });
            }
        });
        
        // 键盘事件测试
        const keyboardLog = document.getElementById('keyboard-log');
        document.addEventListener('keydown', (e) => {
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span class="info">⌨️ 按键: <strong>${e.key}</strong> (keyCode: ${e.keyCode})</span>`;
            keyboardLog.appendChild(logEntry);
            keyboardLog.scrollTop = keyboardLog.scrollHeight;
            
            // 阻止某些键的默认行为（如空格键滚动页面）
            if (e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                e.preventDefault();
            }
        });
        
        // 添加测试说明
        const infoDiv = document.createElement('div');
        infoDiv.innerHTML = '<div class="info" style="margin-top: 10px;">📝 如果所有测试都通过✅，但实际游戏按钮无响应，可能是游戏代码问题。</div>';
        envLog.appendChild(infoDiv);
        
        console.log('🎮 俄罗斯方块测试页面已加载');
        console.log('📱 用户代理:', navigator.userAgent);
        console.log('🌐 语言:', navigator.language);
        console.log('🖥️ 平台:', navigator.platform);
    </script>
</body>
</html>