console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
    <title>可暂停贪吃蛇</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #2c3e50;
            font-family: Arial, sans-serif;
            margin: 0;
            min-height: 100vh;
        }
 
        #game-container {
            position: relative;
            margin-top: 20px;
        }
 
        #gameCanvas {
            border: 3px solid #ecf0f1;
            border-radius: 5px;
            background-color: #34495e;
        }
 
        .control-btn {
            position: absolute;
            padding: 15px 30px;
            font-size: 1.2em;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
 
        #startBtn {
            top: 50%;
            left: 50%;
        }
 
        #restartBtn {
            display: none;
            top: 60%;
            left: 50%;
        }
 
        #score {
            color: #ecf0f1;
            font-size: 2em;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <div id="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <button id="startBtn" class="control-btn">开始游戏</button>
        <button id="restartBtn" class="control-btn">重新开始</button>
    </div>
 
    <script>
        const canvas = document.getElementById('gameCanvas'); 
        const ctx = canvas.getContext('2d'); 
        const scoreElement = document.getElementById('score'); 
        const startBtn = document.getElementById('startBtn'); 
        const restartBtn = document.getElementById('restartBtn'); 
 
        // 游戏配置 
        const GRID_SIZE = 20;
        const TILE_COUNT = canvas.width  / GRID_SIZE;
        const GAME_SPEED = 100;
 
        // 游戏状态 
        let snake = [];
        let food = { x: 0, y: 0 };
        let dx = 0;
        let dy = 0;
        let score = 0;
        let lastTime = 0;
        let isPlaying = false;
        let isPaused = false; // 新增暂停状态 
 
        // 初始化游戏 
        function initGame() {
            snake = [{ x: 10, y: 10 }];
            dx = 1;
            dy = 0;
            score = 0;
            scoreElement.textContent  = `得分: ${score}`;
            generateFood();
            isPlaying = true;
            isPaused = false; // 重置暂停状态 
        }
 
        // 生成食物 
        function generateFood() {
            do {
                food.x = Math.floor(Math.random()  * TILE_COUNT);
                food.y = Math.floor(Math.random()  * TILE_COUNT);
            } while (snake.some(segment  => 
                segment.x === food.x && 
                segment.y === food.y 
            ));
        }
 
        // 游戏主循环 
        function gameLoop(timestamp) {
            if (!isPlaying) return;
 
            const delta = timestamp - lastTime;
            
            if (delta > GAME_SPEED) {
                lastTime = timestamp;
 
                if (!isPaused) { // 只在非暂停状态更新游戏 
                    // 无敌模式移动 
                    const newHead = {
                        x: (snake[0].x + dx + TILE_COUNT) % TILE_COUNT,
                        y: (snake[0].y + dy + TILE_COUNT) % TILE_COUNT 
                    };
 
                    snake.unshift(newHead); 
 
                    // 吃食物检测 
                    if (newHead.x === food.x && newHead.y === food.y) {
                        score += 10;
                        scoreElement.textContent  = `得分: ${score}`;
                        generateFood();
                    } else {
                        snake.pop(); 
                    }
                }
 
                draw();
            }
 
            requestAnimationFrame(gameLoop);
        }
 
        // 绘制游戏 
        function draw() {
            ctx.fillStyle  = '#34495e';
            ctx.fillRect(0,  0, canvas.width,  canvas.height); 
 
            // 绘制食物 
            ctx.fillStyle  = '#f1c40f';
            ctx.fillRect( 
                food.x * GRID_SIZE,
                food.y * GRID_SIZE,
                GRID_SIZE - 2,
                GRID_SIZE - 2 
            );
 
            // 绘制蛇 
            snake.forEach((segment,  index) => {
                const centerX = segment.x * GRID_SIZE + GRID_SIZE/2;
                const centerY = segment.y * GRID_SIZE + GRID_SIZE/2;
 
                if (index === 0) {
                    // 绘制三角形蛇头 
                    ctx.save(); 
                    ctx.translate(centerX,  centerY);
                    
                    let angle = 0;
                    if (dx === 1) angle = 0;
                    else if (dx === -1) angle = Math.PI;
                    else if (dy === -1) angle = -Math.PI/2;
                    else if (dy === 1) angle = Math.PI/2;
                    
                    ctx.rotate(angle); 
                    
                    const gradient = ctx.createLinearGradient(-8,  -8, 8, 8);
                    gradient.addColorStop(0,  '#ff0000');
                    gradient.addColorStop(1,  '#cc0000');
                    
                    ctx.beginPath(); 
                    ctx.moveTo(8,  0);
                    ctx.lineTo(-8,  8);
                    ctx.lineTo(-8,  -8);
                    ctx.closePath(); 
                    ctx.fillStyle  = gradient;
                    ctx.fill(); 
                    
                    ctx.restore(); 
                } else {
                    // 绘制彩虹色身体 
                    const hue = (index * 35) % 360;
                    const radius = GRID_SIZE/2 - 2;
                    
                    const gradient = ctx.createRadialGradient( 
                        centerX, centerY, radius * 0.4,
                        centerX, centerY, radius 
                    );
                    gradient.addColorStop(0,  `hsl(${hue}, 100%, 70%)`);
                    gradient.addColorStop(1,  `hsl(${hue}, 100%, 40%)`);
                    
                    ctx.beginPath(); 
                    ctx.arc(centerX,  centerY, radius, 0, Math.PI * 2);
                    ctx.fillStyle  = gradient;
                    ctx.fill(); 
                }
            });
 
            // 绘制暂停状态 
            if (isPaused) {
                ctx.fillStyle  = 'rgba(0, 0, 0, 0.7)';
                ctx.fillRect(0,  0, canvas.width,  canvas.height); 
                ctx.fillStyle  = 'white';
                ctx.font  = '30px Arial';
                ctx.textAlign  = 'center';
                ctx.textBaseline  = 'middle';
                ctx.fillText(' 游戏暂停（按空格键继续）', canvas.width/2,  canvas.height/2); 
            }
        }
 
        // 方向控制 
        function handleKeyDown(e) {
            if (!isPlaying) return;
 
            const key = e.key; 
            
            // 新增空格键暂停功能 
            if (key === ' ' || key === 'Space') {
                e.preventDefault(); 
                isPaused = !isPaused;
                return;
            }
 
            const goingUp = dy === -1;
            const goingDown = dy === 1;
            const goingRight = dx === 1;
            const goingLeft = dx === -1;
 
            switch(key) {
                case 'ArrowLeft':
                    if (!goingRight) { dx = -1; dy = 0; }
                    break;
                case 'ArrowUp':
                    if (!goingDown) { dx = 0; dy = -1; }
                    break;
                case 'ArrowRight':
                    if (!goingLeft) { dx = 1; dy = 0; }
                    break;
                case 'ArrowDown':
                    if (!goingUp) { dx = 0; dy = 1; }
                    break;
            }
        }
 
        // 游戏控制 
        startBtn.addEventListener('click',  () => {
            startBtn.style.display  = 'none';
            restartBtn.style.display  = 'none';
            initGame();
            gameLoop(0);
        });
 
        restartBtn.addEventListener('click',  () => {
            snake = [];
            initGame();
        });
 
        // 初始化事件监听 
        document.addEventListener('keydown',  handleKeyDown);
        initGame();
        draw();
        startBtn.style.display  = 'block';
    </script>
</body>
</html>