手搓贪吃蛇

结构与布局层
HTML5：语义化结构，使用 <canvas> 作为游戏主渲染区，配合语义化标签（如 header、div 容器）构建UI界面。
Tailwind CSS (CDN)：通过 CDN 引入的实用优先（Utility-First）CSS 框架，快速构建响应式布局、霓虹光效、玻璃拟态（Glassmorphism）UI和网格系统。
自定义 CSS3：
- CSS Grid & Flexbox：控制移动端虚拟方向键（D-Pad）和页面布局。
- 媒体查询 (@media)：检测屏幕宽度（768px 断点），在移动端自动显示触摸控制器，桌面端隐藏。
- CSS 动画：fade-in-up 关键帧动画、按钮点击反馈、扫描线（Scanline）特效（使用 linear-gradient 背景模拟 CRT 显示器效果）。
- Text Shadows & Gradients：实现霓虹发光文字和渐变色彩。

游戏渲染与逻辑层 (核心)
HTML5 Canvas API：
- 使用 2D Rendering Context 绘制所有游戏元素（蛇、食物、粒子）。
- 动态计算坐标系统（GRID_SIZE * TILE_COUNT），实现基于网格（Grid-based）的移动逻辑。
原生 JavaScript (ES6+)：
- 面向对象编程：使用 class Particle 实现粒子爆炸效果（吃东西时的视觉反馈）。
- 现代语法：箭头函数、解构赋值 (const {x, y} = direction)、模板字符串、const/let 块级作用域。
- 游戏循环：使用 requestAnimationFrame 实现平滑的游戏循环，配合时间差（deltaTime）计算控制蛇的移动速度。

交互与输入处理
键盘事件 (KeyboardEvent)：监听 keydown 事件，支持方向键和 WASD 键，并防止反向移动（180度掉头）的逻辑判断。
触摸事件 (Touch Events)：为移动端按钮添加 touchstart 事件监听，并调用 e.preventDefault() 防止双击缩放和页面滚动。
剪贴板 API (Clipboard API)：支持从外部粘贴数字（虽然这个游戏里主要是贪吃蛇，但框架预留了类似的交互逻辑模式）。

数据持久化
Web Storage API (localStorage)：用于保存玩家的最高分（High Score），数据在浏览器本地持久存储，刷新页面后依然存在。

字体与视觉资源
Google Fonts：引入 Orbitron（科技感/赛博朋克风格标题字体）和 Roboto Mono（等宽字体用于代码风格的数字显示），通过 WebFont API 加载。

技术总结

这套技术栈非常适合轻量级休闲游戏或演示原型，优势在于单文件部署、加载速度快、无需服务器端支持，纯客户端运行。

<!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>霓虹贪吃蛇 | Neon Snake</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto+Mono:wght@400;700&display=swap');

    body {
        margin: 0;
        overflow: hidden;
        background: #0f172a;
        font-family: 'Roboto Mono', monospace;
        touch-action: none; /* Prevent pull-to-refresh on mobile */
    }

    #game-container {
        position: relative;
        box-shadow: 0 0 50px rgba(139, 92, 246, 0.3);
    }

    canvas {
        display: block;
        background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    }

    .neon-text {
        font-family: 'Orbitron', sans-serif;
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.8),
                     0 0 20px rgba(139, 92, 246, 0.5),
                     0 0 30px rgba(139, 92, 246, 0.3);
    }

    .ui-overlay {
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
    }

    /* Mobile Controls */
    .d-pad {
        display: none;
    }
    
    @media (max-width: 768px) {
        .d-pad {
            display: grid;
        }
        .desktop-hint {
            display: none;
        }
    }

    .control-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(139, 92, 246, 0.5);
        backdrop-filter: blur(4px);
        active: scale(0.95);
        transition: all 0.1s;
    }
    .control-btn:active {
        background: rgba(139, 92, 246, 0.3);
        transform: scale(0.95);
    }

    /* Scanline effect */
    .scanlines {
        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,0) 50%,
            rgba(0,0,0,0.1) 50%,
            rgba(0,0,0,0.1)
        );
        background-size: 100% 4px;
        pointer-events: none;
    }
</style>

</head>
<body class="h-screen w-screen flex flex-col items-center justify-center text-white">

<!-- Header Stats -->
<div class="absolute top-4 left-0 w-full px-6 flex justify-between items-center z-10 max-w-4xl mx-auto left-0 right-0">
    <div class="flex flex-col">
        <span class="text-xs text-gray-400 uppercase tracking-widest">Score</span>
        <span id="scoreDisplay" class="text-3xl font-bold neon-text text-purple-400">0</span>
    </div>
    <div class="flex flex-col items-end">
        <span class="text-xs text-gray-400 uppercase tracking-widest">High Score</span>
        <span id="highScoreDisplay" class="text-2xl font-bold text-pink-400">0</span>
    </div>
</div>

<!-- Game Container -->
<div id="game-container" class="relative rounded-lg overflow-hidden border-2 border-purple-500/30">
    <canvas id="gameCanvas"></canvas>
    
    <!-- CRT Scanline Overlay -->
    <div class="absolute inset-0 scanlines z-0"></div>

    <!-- Start Screen -->
    <div id="startScreen" class="absolute inset-0 ui-overlay flex flex-col items-center justify-center z-20">
        <h1 class="text-5xl md:text-7xl font-black mb-2 neon-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 italic">
            SNAKE
        </h1>
        <p class="text-gray-400 mb-8 text-sm tracking-widest uppercase">Neon Edition</p>
        
        <div class="space-y-4 text-center">
            <button id="startBtn" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-bold text-lg hover:scale-105 transition-transform shadow-lg shadow-purple-500/30">
                START GAME
            </button>
            <p class="text-xs text-gray-500 desktop-hint">Use Arrow Keys or WASD to move</p>
            <p class="text-xs text-gray-500 md:hidden">Use on-screen controls</p>
        </div>
    </div>

    <!-- Game Over Screen -->
    <div id="gameOverScreen" class="hidden absolute inset-0 ui-overlay flex flex-col items-center justify-center z-20">
        <h2 class="text-4xl font-bold mb-2 text-red-500 neon-text">GAME OVER</h2>
        <div class="text-center mb-6">
            <p class="text-gray-400 text-sm">Final Score</p>
            <p id="finalScore" class="text-4xl font-bold text-white">0</p>
        </div>
        <button id="restartBtn" class="px-8 py-3 bg-white text-slate-900 rounded-full font-bold text-lg hover:scale-105 transition-transform">
            TRY AGAIN
        </button>
    </div>

    <!-- Pause Overlay -->
    <div id="pauseScreen" class="hidden absolute inset-0 ui-overlay flex items-center justify-center z-10">
        <p class="text-2xl font-bold text-gray-300 tracking-widest">PAUSED</p>
    </div>
</div>

<!-- Mobile Controls -->
<div class="d-pad grid-cols-3 gap-2 mt-6 w-48 h-48 select-none">
    <div></div>
    <button class="control-btn rounded-lg flex items-center justify-center" id="btnUp">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
    </button>
    <div></div>
    <button class="control-btn rounded-lg flex items-center justify-center" id="btnLeft">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
    </button>
    <button class="control-btn rounded-lg flex items-center justify-center" id="btnDown">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
    </button>
    <button class="control-btn rounded-lg flex items-center justify-center" id="btnRight">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
    </button>
</div>

<div class="mt-4 flex gap-4 text-xs text-gray-500 desktop-hint">
    <span>[P] Pause</span>
    <span>[R] Restart</span>
    <span>[Space] Start</span>
</div>

<script>
    // Game Configuration
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size
    const GRID_SIZE = 20;
    const TILE_COUNT = 20; // 20x20 grid
    canvas.width = GRID_SIZE * TILE_COUNT;
    canvas.height = GRID_SIZE * TILE_COUNT;

    // Game State
    let snake = [];
    let food = {};
    let particles = [];
    let direction = { x: 0, y: 0 };
    let nextDirection = { x: 0, y: 0 };
    let score = 0;
    let highScore = localStorage.getItem('snakeHighScore') || 0;
    let gameSpeed = 100; // ms per frame
    let lastTime = 0;
    let gameLoop;
    let isGameRunning = false;
    let isPaused = false;

    // Colors
    const COLORS = {
        snakeHead: '#a855f7', // purple-500
        snakeBody: '#c084fc', // purple-400
        food: '#ec4899',      // pink-500
        grid: '#1e293b',      // slate-800
        particle: ['#f472b6', '#a855f7', '#22d3ee'] // pink, purple, cyan
    };

    // Initialize
    document.getElementById('highScoreDisplay').textContent = highScore;

    // Particle System for visual effects
    class Particle {
        constructor(x, y, color) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.size = Math.random() * 3 + 2;
            this.speedX = (Math.random() - 0.5) * 4;
            this.speedY = (Math.random() - 0.5) * 4;
            this.life = 1; // Opacity
        }
        update() {
            this.x += this.speedX;
            this.y += this.speedY;
            this.life -= 0.02;
            this.size *= 0.95;
        }
        draw() {
            ctx.save();
            ctx.globalAlpha = this.life;
            ctx.fillStyle = this.color;
            ctx.shadowBlur = 10;
            ctx.shadowColor = this.color;
            ctx.fillRect(this.x, this.y, this.size, this.size);
            ctx.restore();
        }
    }

    function createExplosion(x, y) {
        for (let i = 0; i < 8; i++) {
            const color = COLORS.particle[Math.floor(Math.random() * COLORS.particle.length)];
            particles.push(new Particle(x + GRID_SIZE/2, y + GRID_SIZE/2, color));
        }
    }

    // Game Functions
    function initGame() {
        snake = [
            { x: 10, y: 10 },
            { x: 10, y: 11 },
            { x: 10, y: 12 }
        ];
        direction = { x: 0, y: -1 }; // Start moving up
        nextDirection = { x: 0, y: -1 };
        score = 0;
        gameSpeed = 100;
        particles = [];
        placeFood();
        updateScore();
    }

    function placeFood() {
        do {
            food = {
                x: Math.floor(Math.random() * TILE_COUNT),
                y: Math.floor(Math.random() * TILE_COUNT)
            };
        } while (isSnakeAt(food.x, food.y));
    }

    function isSnakeAt(x, y) {
        return snake.some(segment => segment.x === x && segment.y === y);
    }

    function update(currentTime) {
        if (!isGameRunning || isPaused) return;

        const deltaTime = currentTime - lastTime;
        
        if (deltaTime > gameSpeed) {
            lastTime = currentTime;
            
            // Update direction
            direction = nextDirection;
            
            // Move snake
            const head = {
                x: snake[0].x + direction.x,
                y: snake[0].y + direction.y
            };

            // Wall Collision Check
            if (head.x < 0 || head.x >= TILE_COUNT || head.y < 0 || head.y >= TILE_COUNT) {
                gameOver();
                return;
            }

            // Self Collision Check
            if (isSnakeAt(head.x, head.y)) {
                gameOver();
                return;
            }

            snake.unshift(head);

            // Check Food
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                updateScore();
                createExplosion(head.x * GRID_SIZE, head.y * GRID_SIZE);
                placeFood();
                // Increase speed slightly
                gameSpeed = Math.max(50, 100 - Math.floor(score / 50) * 5);
            } else {
                snake.pop();
            }
        }

        // Update particles
        particles = particles.filter(p => p.life > 0);
        particles.forEach(p => p.update());

        draw();
        gameLoop = requestAnimationFrame(update);
    }

    function draw() {
        // Clear with fade effect for trail illusion (optional, using solid clear here)
        ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw Grid
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
        ctx.lineWidth = 1;
        for (let i = 0; i <= TILE_COUNT; i++) {
            ctx.beginPath();
            ctx.moveTo(i * GRID_SIZE, 0);
            ctx.lineTo(i * GRID_SIZE, canvas.height);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(0, i * GRID_SIZE);
            ctx.lineTo(canvas.width, i * GRID_SIZE);
            ctx.stroke();
        }

        // Draw Food with glow
        ctx.save();
        ctx.shadowBlur = 20;
        ctx.shadowColor = COLORS.food;
        ctx.fillStyle = COLORS.food;
        ctx.fillRect(food.x * GRID_SIZE + 2, food.y * GRID_SIZE + 2, GRID_SIZE - 4, GRID_SIZE - 4);
        ctx.restore();

        // Draw Snake
        snake.forEach((segment, index) => {
            ctx.save();
            ctx.shadowBlur = index === 0 ? 15 : 10;
            ctx.shadowColor = index === 0 ? COLORS.snakeHead : COLORS.snakeBody;
            ctx.fillStyle = index === 0 ? COLORS.snakeHead : COLORS.snakeBody;
            
            // Rounded corners for snake segments
            const x = segment.x * GRID_SIZE;
            const y = segment.y * GRID_SIZE;
            const size = GRID_SIZE - 2;
            
            ctx.fillRect(x + 1, y + 1, size, size);
            
            // Eyes for head
            if (index === 0) {
                ctx.fillStyle = '#fff';
                ctx.shadowBlur = 0;
                const eyeSize = 3;
                const offset = 5;
                if (direction.x === 1) { // Right
                    ctx.fillRect(x + 12, y + 5, eyeSize, eyeSize);
                    ctx.fillRect(x + 12, y + 12, eyeSize, eyeSize);
                } else if (direction.x === -1) { // Left
                    ctx.fillRect(x + 5, y + 5, eyeSize, eyeSize);
                    ctx.fillRect(x + 5, y + 12, eyeSize, eyeSize);
                } else if (direction.y === -1) { // Up
                    ctx.fillRect(x + 5, y + 5, eyeSize, eyeSize);
                    ctx.fillRect(x + 12, y + 5, eyeSize, eyeSize);
                } else { // Down
                    ctx.fillRect(x + 5, y + 12, eyeSize, eyeSize);
                    ctx.fillRect(x + 12, y + 12, eyeSize, eyeSize);
                }
            }
            ctx.restore();
        });

        // Draw Particles
        particles.forEach(p => p.draw());
    }

    function updateScore() {
        document.getElementById('scoreDisplay').textContent = score;
        if (score > highScore) {
            highScore = score;
            localStorage.setItem('snakeHighScore', highScore);
            document.getElementById('highScoreDisplay').textContent = highScore;
        }
    }

    function gameOver() {
        isGameRunning = false;
        cancelAnimationFrame(gameLoop);
        document.getElementById('finalScore').textContent = score;
        document.getElementById('gameOverScreen').classList.remove('hidden');
    }

    function startGame() {
        document.getElementById('startScreen').classList.add('hidden');
        document.getElementById('gameOverScreen').classList.add('hidden');
        initGame();
        isGameRunning = true;
        isPaused = false;
        lastTime = performance.now();
        gameLoop = requestAnimationFrame(update);
    }

    function togglePause() {
        if (!isGameRunning) return;
        isPaused = !isPaused;
        if (isPaused) {
            document.getElementById('pauseScreen').classList.remove('hidden');
            cancelAnimationFrame(gameLoop);
        } else {
            document.getElementById('pauseScreen').classList.add('hidden');
            lastTime = performance.now();
            gameLoop = requestAnimationFrame(update);
        }
    }

    // Input Handling
    document.addEventListener('keydown', (e) => {
        if (!isGameRunning && e.code === 'Space') {
            startGame();
            return;
        }
        
        if (e.code === 'KeyP') togglePause();
        if (e.code === 'KeyR') startGame();

        if (!isGameRunning || isPaused) return;

        switch(e.key) {
            case 'ArrowUp':
            case 'w':
            case 'W':
                if (direction.y === 0) nextDirection = { x: 0, y: -1 };
                break;
            case 'ArrowDown':
            case 's':
            case 'S':
                if (direction.y === 0) nextDirection = { x: 0, y: 1 };
                break;
            case 'ArrowLeft':
            case 'a':
            case 'A':
                if (direction.x === 0) nextDirection = { x: -1, y: 0 };
                break;
            case 'ArrowRight':
            case 'd':
            case 'D':
                if (direction.x === 0) nextDirection = { x: 1, y: 0 };
                break;
        }
    });

    // Touch Controls
    document.getElementById('btnUp').addEventListener('touchstart', (e) => { e.preventDefault(); if(direction.y === 0) nextDirection = { x: 0, y: -1 }; });
    document.getElementById('btnDown').addEventListener('touchstart', (e) => { e.preventDefault(); if(direction.y === 0) nextDirection = { x: 0, y: 1 }; });
    document.getElementById('btnLeft').addEventListener('touchstart', (e) => { e.preventDefault(); if(direction.x === 0) nextDirection = { x: -1, y: 0 }; });
    document.getElementById('btnRight').addEventListener('touchstart', (e) => { e.preventDefault(); if(direction.x === 0) nextDirection = { x: 1, y: 0 }; });

    // Prevent double tap zoom
    document.addEventListener('dblclick', function(event) {
        event.preventDefault();
    }, { passive: false });

    // Button Listeners
    document.getElementById('startBtn').addEventListener('click', startGame);
    document.getElementById('restartBtn').addEventListener('click', startGame);

    // Initial Draw
    ctx.fillStyle = '#0f172a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw demo snake
    ctx.fillStyle = '#334155';
    for(let i=0; i<3; i++) {
        ctx.fillRect((10+i)*GRID_SIZE, 10*GRID_SIZE, GRID_SIZE-2, GRID_SIZE-2);
    }
</script>

</body>
</html>