nanocode/happy-games/games/tetris/test_keyboard.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-container {
            background: #2d3748;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        
        .test-item {
            margin: 10px 0;
            padding: 10px;
            background: #4a5568;
            border-radius: 5px;
        }
        
        .success {
            color: #68d391;
        }
        
        .error {
            color: #fc8181;
        }
        
        .key {
            display: inline-block;
            padding: 5px 10px;
            background: #718096;
            border-radius: 3px;
            margin: 0 5px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>🎮 俄罗斯方块键盘控制测试</h1>
    
    <div class="test-container">
        <h2>测试步骤</h2>
        
        <div class="test-item">
            <h3>1. 打开游戏页面</h3>
            <p>访问: <a href="http://129.211.173.87:8895/games/tetris/" target="_blank">http://129.211.173.87:8895/games/tetris/</a></p>
        </div>
        
        <div class="test-item">
            <h3>2. 测试键盘控制</h3>
            <p>按以下键测试功能：</p>
            <ul>
                <li><span class="key">←</span> 左箭头 - 方块向左移动</li>
                <li><span class="key">→</span> 右箭头 - 方块向右移动</li>
                <li><span class="key">↓</span> 下箭头 - 方块加速下落</li>
                <li><span class="key">↑</span> 或 <span class="key">空格</span> - 方块旋转</li>
                <li><span class="key">P</span> - 暂停/继续游戏</li>
            </ul>
        </div>
        
        <div class="test-item">
            <h3>3. 自动开始功能</h3>
            <p>游戏初始状态：显示"开始"按钮</p>
            <p>按任意方向键或空格键 → 游戏自动开始</p>
            <p>按"开始"按钮 → 游戏开始</p>
        </div>
        
        <div class="test-item">
            <h3>4. 按钮状态验证</h3>
            <p>游戏运行中 → 按钮显示"暂停"</p>
            <p>游戏暂停 → 按钮显示"继续"</p>
            <p>游戏结束 → 按钮显示"重新开始"</p>
        </div>
    </div>
    
    <div class="test-container">
        <h2>预期结果</h2>
        <div class="test-item success">
            ✅ 键盘控制正常响应
        </div>
        <div class="test-item success">
            ✅ 按任意键自动开始游戏
        </div>
        <div class="test-item success">
            ✅ 按钮状态正确显示
        </div>
        <div class="test-item success">
            ✅ 游戏逻辑正常运行
        </div>
    </div>
    
    <div class="test-container">
        <h2>问题排查</h2>
        <div class="test-item">
            <h3>如果键盘控制无效：</h3>
            <ol>
                <li>检查游戏是否已开始（按"开始"按钮）</li>
                <li>检查游戏是否暂停（按P键继续）</li>
                <li>刷新页面重新加载</li>
                <li>检查浏览器控制台是否有错误</li>
            </ol>
        </div>
        
        <div class="test-item">
            <h3>技术支持</h3>
            <p>如果问题持续存在，请提供以下信息：</p>
            <ul>
                <li>浏览器类型和版本</li>
                <li>操作系统</li>
                <li>控制台错误信息（按F12打开开发者工具）</li>
                <li>具体操作步骤</li>
            </ul>
        </div>
    </div>
    
    <script>
        // 简单的键盘测试
        document.addEventListener('keydown', (e) => {
            console.log(`按键测试: ${e.key} (keyCode: ${e.keyCode})`);
            
            // 显示按键反馈
            const feedback = document.createElement('div');
            feedback.className = 'test-item';
            feedback.innerHTML = `<span class="key">${e.key}</span> 键已按下`;
            document.querySelector('.test-container:last-child').appendChild(feedback);
            
            // 3秒后移除反馈
            setTimeout(() => feedback.remove(), 3000);
        });
    </script>
</body>
</html>