nanocode/happy-games/games/tetris/test_all_versions.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;
        }
        
        .version-card {
            background: #2d3748;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border-left: 5px solid;
        }
        
        .version-1 { border-color: #10b981; }
        .version-2 { border-color: #f59e0b; }
        .version-3 { border-color: #3b82f6; }
        .version-4 { border-color: #8b5cf6; }
        
        .version-title {
            font-size: 24px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .version-desc {
            color: #aaa;
            margin-bottom: 15px;
        }
        
        .features {
            background: #4a5568;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
        }
        
        .test-button {
            display: inline-block;
            padding: 12px 24px;
            background: #2563eb;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            margin-top: 10px;
            transition: all 0.2s;
        }
        
        .test-button:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
        }
        
        .status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .status-stable { background: #10b981; }
        .status-experimental { background: #f59e0b; }
        .status-fixed { background: #3b82f6; }
        
        .debug-info {
            background: #4a5568;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            font-family: monospace;
            font-size: 14px;
        }
        
        .error {
            color: #fc8181;
        }
        
        .success {
            color: #68d391;
        }
        
        .warning {
            color: #f6ad55;
        }
    </style>
</head>
<body>
    <h1>🎮 俄罗斯方块 - 所有版本测试</h1>
    <p>针对Windows浏览器兼容性问题，提供了多个版本进行测试。</p>
    
    <div class="debug-info">
        <div><strong>当前问题诊断：</strong></div>
        <div class="error">1. ❌ PlayCanvas版本兼容性问题 (verticesByteSize错误)</div>
        <div class="error">2. ❌ Poki SDK授权问题 (域名未授权)</div>
        <div class="error">3. ❌ resize方法不兼容 (graphicsDevice.resize不存在)</div>
        <div class="success">4. ✅ 贪吃蛇游戏可正常运行 (参考基准)</div>
    </div>
    
    <div class="version-card version-1">
        <div class="version-title">
            🎯 版本1: Canvas 2D简化版
            <span class="status status-stable">推荐测试</span>
        </div>
        <div class="version-desc">使用原生Canvas 2D API，无外部依赖，兼容性最好</div>
        <div class="features">
            <div class="feature-item">✅ 纯Canvas 2D实现，无PlayCanvas依赖</div>
            <div class="feature-item">✅ 无Poki SDK授权问题</div>
            <div class="feature-item">✅ 完整的游戏逻辑和UI</div>
            <div class="feature-item">✅ 支持键盘和触摸控制</div>
            <div class="feature-item">✅ Windows浏览器兼容性最佳</div>
        </div>
        <a href="tetris_simple_canvas.html" class="test-button" target="_blank">测试此版本</a>
    </div>
    
    <div class="version-card version-2">
        <div class="version-title">
            🔧 版本2: 无Poki SDK版
            <span class="status status-fixed">已修复</span>
        </div>
        <div class="version-desc">移除Poki SDK依赖，保留PlayCanvas 1.66.0版本</div>
        <div class="features">
            <div class="feature-item">✅ 使用贪吃蛇相同的PlayCanvas版本 (1.66.0)</div>
            <div class="feature-item">✅ 移除Poki SDK授权问题</div>
            <div class="feature-item">✅ 采用贪吃蛇的初始化模式</div>
            <div class="feature-item">✅ 添加错误处理</div>
            <div class="feature-item">⚠️ 仍可能有PlayCanvas兼容性问题</div>
        </div>
        <a href="tetris_no_poki.html" class="test-button" target="_blank">测试此版本</a>
    </div>
    
    <div class="version-card version-3">
        <div class="version-title">
            🎮 版本3: 原始修复版
            <span class="status status-experimental">实验性</span>
        </div>
        <div class="version-desc">原始游戏页面的修复版本，尝试解决所有问题</div>
        <div class="features">
            <div class="feature-item">✅ 使用PlayCanvas 1.66.0固定版本</div>
            <div class="feature-item">✅ 添加crypto.randomUUID兼容性修复</div>
            <div class="feature-item">✅ 修复resize方法兼容性</div>
            <div class="feature-item">⚠️ 仍有Poki SDK授权警告</div>
            <div class="feature-item">⚠️ 需要清除浏览器缓存</div>
        </div>
        <a href="index_fixed.html" class="test-button" target="_blank">测试此版本</a>
    </div>
    
    <div class="version-card version-4">
        <div class="version-title">
            📱 版本4: 原始游戏页面
            <span class="status status-experimental">有问题</span>
        </div>
        <div class="version-desc">原始游戏页面，包含所有已知问题</div>
        <div class="features">
            <div class="feature-item">❌ PlayCanvas版本兼容性问题</div>
            <div class="feature-item">❌ Poki SDK授权警告</div>
            <div class="feature-item">❌ resize方法错误</div>
            <div class="feature-item">⚠️ 需要强制清除浏览器缓存</div>
            <div class="feature-item">⚠️ 仅用于对比测试</div>
        </div>
        <a href="index.html" class="test-button" target="_blank">测试此版本</a>
    </div>
    
    <div class="debug-info">
        <div><strong>测试建议：</strong></div>
        <div class="success">1. 首先测试 <strong>版本1 (Canvas 2D简化版)</strong> - 应该能正常工作</div>
        <div class="success">2. 然后测试 <strong>版本2 (无Poki SDK版)</strong> - 检查PlayCanvas兼容性</div>
        <div class="warning">3. 最后测试 <strong>版本3 (原始修复版)</strong> - 验证完整修复</div>
        <div class="error">4. 对比测试 <strong>版本4 (原始游戏页面)</strong> - 查看原始问题</div>
        <br>
        <div><strong>Windows浏览器操作：</strong></div>
        <div>1. 按 <strong>F12</strong> 打开开发者工具</div>
        <div>2. 点击 <strong>Console</strong> 标签查看错误</div>
        <div>3. 按 <strong>Ctrl+Shift+R</strong> 强制刷新页面（清除缓存）</div>
    </div>
    
    <script>
        // 环境检测
        console.log('🎮 俄罗斯方块测试页面');
        console.log('🌐 用户代理:', navigator.userAgent);
        console.log('🖥️ 平台:', navigator.platform);
        console.log('🔧 浏览器特性检测:');
        
        const tests = {
            'Canvas支持': !!document.createElement('canvas').getContext,
            'requestAnimationFrame': !!window.requestAnimationFrame,
            'crypto.randomUUID': !!window.crypto?.randomUUID,
            'PlayCanvas加载': typeof pc !== 'undefined',
            '控制台可用': typeof console !== 'undefined'
        };
        
        Object.entries(tests).forEach(([name, result]) => {
            console.log(`${result ? '✅' : '❌'} ${name}: ${result}`);
        });
        
        // 显示环境信息
        const envInfo = document.createElement('div');
        envInfo.className = 'debug-info';
        envInfo.innerHTML = `
            <div><strong>当前浏览器环境：</strong></div>
            <div>🌐 ${navigator.userAgent}</div>
            <div>🖥️ 平台: ${navigator.platform}</div>
            <div>✅ Canvas支持: ${tests['Canvas支持'] ? '是' : '否'}</div>
            <div>✅ requestAnimationFrame: ${tests['requestAnimationFrame'] ? '是' : '否'}</div>
            <div>✅ crypto.randomUUID: ${tests['crypto.randomUUID'] ? '是' : '否'}</div>
            <div>⚠️ PlayCanvas加载: ${tests['PlayCanvas加载'] ? '是 (可能缓存)' : '否'}</div>
        `;
        document.body.appendChild(envInfo);
    </script>
</body>
</html>