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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>俄罗斯方块模拟测试</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #0a0a1a;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #game-container {
            width: 540px;
            height: 720px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .game-canvas {
            width: 500px;
            height: 400px;
            background: #111827;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 24px;
            border: 2px solid #2563eb;
        }
        
        .controls-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .control-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .action-button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 100px;
            justify-content: center;
        }
        
        .action-button.start {
            background: linear-gradient(145deg, #10b981 0%, #047857 100%);
            color: white;
        }
        
        .action-button.restart {
            background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }
        
        .control-button {
            width: 65px;
            height: 65px;
            background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
            user-select: none;
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.1s ease;
        }
        
        .control-row:nth-child(2) {
            justify-content: center;
            gap: 5px;
        }
        
        .info-panel {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        
        .info-label {
            color: #aaa;
            font-size: 12px;
        }
        
        .info-value {
            color: #fff;
            font-weight: bold;
            font-size: 20px;
        }
        
        .status-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 1000;
            display: none;
        }
        
        .debug-panel {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: #68d391;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 12px;
            max-width: 300px;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="status-message" id="status-message"></div>
    
    <div id="game-container">
        <div class="game-canvas" id="game-canvas">
            🎮 俄罗斯方块模拟测试
        </div>
        
        <div class="controls-container">
            <!-- 第一行：开始/旋转/重来按钮 -->
            <div class="control-row">
                <button class="action-button start" id="start-btn">
                    <span>▶️</span> 开始
                </button>
                <div class="control-button rotate" id="rotate-btn">↻ 旋转</div>
                <button class="action-button restart" id="restart-btn">
                    <span>🔄</span> 重来
                </button>
            </div>
            
            <!-- 第二行：方向控制按钮 -->
            <div class="control-row">
                <div class="control-button left" id="left-btn">←</div>
                <div class="control-button down" id="down-btn">↓</div>
                <div class="control-button right" id="right-btn">→</div>
            </div>
            
            <!-- 游戏信息面板 -->
            <div class="info-panel">
                <div class="info-item">
                    <span class="info-label">分数</span>
                    <span class="info-value" id="score">0</span>
                </div>
                <div class="info-item">
                    <span class="info-label">等级</span>
                    <span class="info-value" id="level">0</span>
                </div>
                <div class="info-item">
                    <span class="info-label">消行</span>
                    <span class="info-value" id="lines">0</span>
                </div>
                <div class="info-item">
                    <span class="info-label">速度</span>
                    <span class="info-value" id="speed">1.0x</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="debug-panel" id="debug-panel">
        <div>调试信息：</div>
    </div>

    <script>
        // 游戏状态
        let gameState = {
            score: 0,
            level: 0,
            lines: 0,
            speed: 1.0,
            isPaused: true,
            isGameOver: false,
            currentPiece: null
        };
        
        // 调试日志
        function debugLog(message) {
            const debugPanel = document.getElementById('debug-panel');
            const logEntry = document.createElement('div');
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            debugPanel.appendChild(logEntry);
            debugPanel.scrollTop = debugPanel.scrollHeight;
            console.log(message);
        }
        
        // 显示状态消息
        function showStatus(message, duration = 2000) {
            const statusEl = document.getElementById('status-message');
            statusEl.textContent = message;
            statusEl.style.display = 'block';
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, duration);
        }
        
        // 更新UI
        function updateUI() {
            document.getElementById('score').textContent = gameState.score;
            document.getElementById('level').textContent = gameState.level;
            document.getElementById('lines').textContent = gameState.lines;
            document.getElementById('speed').textContent = gameState.speed.toFixed(1) + 'x';
            
            const startBtn = document.getElementById('start-btn');
            if (!gameState.currentPiece && !gameState.isGameOver) {
                startBtn.innerHTML = '<span>▶️</span> 开始';
                startBtn.className = 'action-button start';
            } else if (gameState.isPaused) {
                startBtn.innerHTML = '<span>▶️</span> 继续';
                startBtn.className = 'action-button start';
            } else if (gameState.isGameOver) {
                startBtn.innerHTML = '<span>🔄</span> 重新开始';
                startBtn.className = 'action-button restart';
            } else {
                startBtn.innerHTML = '<span>⏸️</span> 暂停';
                startBtn.className = 'action-button start';
            }
        }
        
        // 游戏控制函数
        function initGame() {
            gameState = {
                score: 0,
                level: 0,
                lines: 0,
                speed: 1.0,
                isPaused: false,
                isGameOver: false,
                currentPiece: { type: 'I', x: 5, y: 0 }
            };
            updateUI();
            showStatus('🎮 游戏开始！');
            debugLog('游戏初始化完成');
        }
        
        function togglePause() {
            gameState.isPaused = !gameState.isPaused;
            showStatus(gameState.isPaused ? '⏸️ 游戏暂停' : '▶️ 游戏继续');
            debugLog(`游戏${gameState.isPaused ? '暂停' : '继续'}`);
            updateUI();
        }
        
        function movePiece(dx, dy) {
            if (gameState.isPaused || gameState.isGameOver) return;
            debugLog(`移动方块: dx=${dx}, dy=${dy}`);
            showStatus(`移动: ${dx > 0 ? '右' : dx < 0 ? '左' : ''}${dy > 0 ? '下' : ''}`);
        }
        
        function rotatePiece() {
            if (gameState.isPaused || gameState.isGameOver) return;
            debugLog('旋转方块');
            showStatus('旋转方块');
        }
        
        // 按钮事件绑定
        function setupControls() {
            debugLog('开始设置控件事件...');
            
            // 开始按钮
            document.getElementById('start-btn').addEventListener('click', () => {
                debugLog('开始按钮被点击');
                if (!gameState.currentPiece && !gameState.isGameOver) {
                    initGame();
                } else if (gameState.isPaused) {
                    togglePause();
                } else if (gameState.isGameOver) {
                    initGame();
                } else {
                    togglePause();
                }
            });
            
            // 重来按钮
            document.getElementById('restart-btn').addEventListener('click', () => {
                debugLog('重来按钮被点击');
                initGame();
            });
            
            // 方向按钮
            document.getElementById('left-btn').addEventListener('click', () => {
                debugLog('左按钮被点击');
                movePiece(-1, 0);
            });
            
            document.getElementById('right-btn').addEventListener('click', () => {
                debugLog('右按钮被点击');
                movePiece(1, 0);
            });
            
            document.getElementById('down-btn').addEventListener('click', () => {
                debugLog('下按钮被点击');
                movePiece(0, 1);
            });
            
            document.getElementById('rotate-btn').addEventListener('click', () => {
                debugLog('旋转按钮被点击');
                rotatePiece();
            });
            
            // 键盘控制
            document.addEventListener('keydown', (e) => {
                debugLog(`键盘按键: ${e.key} (keyCode: ${e.keyCode})`);
                
                // 如果游戏还没开始，按任意键开始游戏
                if (!gameState.currentPiece && !gameState.isGameOver) {
                    initGame();
                    return;
                }
                
                if (gameState.isPaused || gameState.isGameOver) return;
                
                switch(e.key) {
                    case 'ArrowLeft':
                        movePiece(-1, 0);
                        break;
                    case 'ArrowRight':
                        movePiece(1, 0);
                        break;
                    case 'ArrowDown':
                        movePiece(0, 1);
                        break;
                    case 'ArrowUp':
                    case ' ':
                        rotatePiece();
                        break;
                    case 'p':
                    case 'P':
                        togglePause();
                        break;
                }
            });
            
            debugLog('控件事件设置完成');
        }
        
        // 页面加载完成
        window.addEventListener('load', () => {
            debugLog('页面加载完成');
            debugLog(`用户代理: ${navigator.userAgent}`);
            debugLog(`平台: ${navigator.platform}`);
            debugLog(`语言: ${navigator.language}`);
            
            setupControls();
            updateUI();
            
            showStatus('✅ 模拟测试已加载，点击按钮测试功能', 3000);
        });
        
        // 添加按钮按下效果
        document.querySelectorAll('.action-button, .control-button').forEach(btn => {
            btn.addEventListener('mousedown', () => {
                btn.style.transform = 'scale(0.95)';
            });
            
            btn.addEventListener('mouseup', () => {
                btn.style.transform = 'scale(1)';
            });
            
            btn.addEventListener('mouseleave', () => {
                btn.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>