贪吃蛇

创意工具 admin · 2026-08-24 · 使用 52
经典贪吃蛇小游戏，支持键盘和触屏操作，有计分和最高分记录。蛇越来越长、速度越来越快，挑战你的反应极限！
贪吃蛇
放大可直接操作
预览
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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
      color: #fff;
    }

    .game-container {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      padding: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      max-width: 480px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .game-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .score-box {
      background: rgba(0, 0, 0, 0.3);
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 14px;
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .score-box span {
      font-weight: bold;
      color: #4ade80;
      font-size: 18px;
    }

    .score-box .high-score {
      color: #fbbf24;
    }

    .btn-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      color: #fff;
      padding: 10px 20px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      user-select: none;
      -webkit-user-select: none;
    }

    .btn:active {
      transform: scale(0.95);
      opacity: 0.8;
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-danger {
      background: linear-gradient(135deg, #f093fb, #f5576c);
    }

    .btn-success {
      background: linear-gradient(135deg, #4ade80, #22c55e);
    }

    .canvas-wrapper {
      background: #1a1a2e;
      border-radius: 16px;
      padding: 4px;
      margin-bottom: 16px;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }

    #gameCanvas {
      display: block;
      width: 100%;
      border-radius: 12px;
      background: #16213e;
    }

    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .dpad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 200px;
      margin: 0 auto;
    }

    .dpad-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 24px;
      padding: 16px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-select: none;
      min-height: 48px;
    }

    .dpad-btn:active {
      background: rgba(255, 255, 255, 0.25);
      transform: scale(0.9);
    }

    .dpad-btn.empty {
      visibility: hidden;
    }

    .status-text {
      text-align: center;
      margin-top: 12px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      min-height: 20px;
    }

    .game-over-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .game-over-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .game-over-overlay h2 {
      font-size: 32px;
      margin-bottom: 8px;
      color: #f87171;
    }

    .game-over-overlay p {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .game-over-overlay .btn {
      font-size: 16px;
      padding: 12px 24px;
    }

    .overlay-wrapper {
      position: relative;
    }

    .snake-emoji {
      font-size: 40px;
      margin-bottom: 10px;
    }

    @media (max-width: 480px) {
      .game-container {
        padding: 12px;
        border-radius: 16px;
      }

      .score-box {
        font-size: 12px;
        padding: 6px 12px;
      }

      .btn {
        padding: 8px 14px;
        font-size: 12px;
      }

      .dpad {
        width: 180px;
      }

      .dpad-btn {
        padding: 12px;
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="game-header">
      <div class="score-box">
        <div>🍎 <span id="score">0</span></div>
        <div>🏆 <span class="high-score" id="highScore">0</span></div>
      </div>
      <div class="btn-group">
        <button class="btn btn-success" id="startBtn">▶ 开始</button>
        <button class="btn" id="pauseBtn" disabled>⏸ 暂停</button>
        <button class="btn btn-danger" id="resetBtn">🔄 重置</button>
      </div>
    </div>

    <div class="overlay-wrapper">
      <div class="canvas-wrapper">
        <canvas id="gameCanvas"></canvas>
      </div>
      <div class="game-over-overlay" id="gameOverOverlay">
        <div class="snake-emoji">🐍</div>
        <h2>游戏结束</h2>
        <p>得分: <span id="finalScore">0</span></p>
        <button class="btn btn-success" id="restartBtn">🔄 再来一局</button>
      </div>
    </div>

    <div class="controls">
      <div class="dpad">
        <button class="dpad-btn empty"></button>
        <button class="dpad-btn" data-dir="up">↑</button>
        <button class="dpad-btn empty"></button>
        <button class="dpad-btn" data-dir="left">←</button>
        <button class="dpad-btn" data-dir="down">↓</button>
        <button class="dpad-btn" data-dir="right">→</button>
      </div>
    </div>

    <div class="status-text" id="statusText">按"开始"或方向键开始游戏</div>
  </div>

  <script>
    (function () {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      const scoreEl = document.getElementById('score');
      const highScoreEl = document.getElementById('highScore');
      const startBtn = document.getElementById('startBtn');
      const pauseBtn = document.getElementById('pauseBtn');
      const resetBtn = document.getElementById('resetBtn');
      const restartBtn = document.getElementById('restartBtn');
      const gameOverOverlay = document.getElementById('gameOverOverlay');
      const finalScoreEl = document.getElementById('finalScore');
      const statusText = document.getElementById('statusText');

      // 游戏配置
      const gridSize = 20; // 网格大小(px)
      let cols = 20;
      let rows = 20;
      let snake = [];
      let direction = { x: 1, y: 0 };
      let nextDirection = { x: 1, y: 0 };
      let food = { x: 5, y: 5 };
      let score = 0;
      let highScore = parseInt(localStorage.getItem('snakeHighScore')) || 0;
      let gameState = 'idle'; // idle, running, paused, over
      let gameSpeed = 150; // 毫秒/帧
      let gameInterval = null;
      let lastTime = 0;

      // 初始化高分显示
      highScoreEl.textContent = highScore;

      // 计算画布尺寸
      function resizeCanvas() {
        const wrapper = canvas.parentElement;
        const wrapperWidth = wrapper.clientWidth - 16; // 减去padding
        const size = Math.floor(wrapperWidth / gridSize) * gridSize;
        canvas.width = size;
        canvas.height = size;
        cols = size / gridSize;
        rows = size / gridSize;
        
        // 如果蛇超出边界，重置游戏
        if (snake.length > 0) {
          const maxIndex = Math.min(snake.length - 1, 0);
          if (snake[maxIndex].x >= cols || snake[maxIndex].y >= rows) {
            resetGame();
          }
        }
      }

      // 初始化蛇
      function initSnake() {
        snake = [];
        const centerX = Math.floor(cols / 2);
        const centerY = Math.floor(rows / 2);
        for (let i = 0; i < 3; i++) {
          snake.push({ x: centerX - i, y: centerY });
        }
        direction = { x: 1, y: 0 };
        nextDirection = { x: 1, y: 0 };
      }

      // 生成食物
      function generateFood() {
        let newFood;
        do {
          newFood = {
            x: Math.floor(Math.random() * cols),
            y: Math.floor(Math.random() * rows)
          };
        } while (snake.some(s => s.x === newFood.x && s.y === newFood.y));
        food = newFood;
      }

      // 绘制游戏
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制网格背景
        ctx.fillStyle = '#16213e';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制网格线
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
        ctx.lineWidth = 1;
        for (let i = 0; i <= cols; i++) {
          ctx.beginPath();
          ctx.moveTo(i * gridSize, 0);
          ctx.lineTo(i * gridSize, canvas.height);
          ctx.stroke();
        }
        for (let i = 0; i <= rows; i++) {
          ctx.beginPath();
          ctx.moveTo(0, i * gridSize);
          ctx.lineTo(canvas.width, i * gridSize);
          ctx.stroke();
        }

        // 绘制食物
        ctx.fillStyle = '#f87171';
        ctx.shadowColor = '#f87171';
        ctx.shadowBlur = 12;
        ctx.beginPath();
        ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.shadowBlur = 0;

        // 绘制蛇身
        snake.forEach((segment, index) => {
          const isHead = index === 0;
          const isTail = index === snake.length - 1;
          
          // 蛇身颜色渐变
          const hue = 120 + (index * 2) % 60;
          ctx.fillStyle = isHead ? '#4ade80' : `hsl(${hue}, 70%, 50%)`;
          
          // 蛇身圆角
          const padding = 2;
          const x = segment.x * gridSize + padding;
          const y = segment.y * gridSize + padding;
          const w = gridSize - padding * 2;
          const h = gridSize - padding * 2;
          
          if (isHead) {
            ctx.shadowColor = '#4ade80';
            ctx.shadowBlur = 10;
          } else {
            ctx.shadowBlur = 0;
          }
          
          ctx.beginPath();
          ctx.roundRect(x, y, w, h, 4);
          ctx.fill();
          
          // 画蛇眼睛
          if (isHead) {
            ctx.fillStyle = '#fff';
            ctx.shadowBlur = 0;
            const eyeSize = 3;
            const eyeOffset = 4;
            let eyeX1, eyeY1, eyeX2, eyeY2;
            
            if (direction.x === 1) {
              eyeX1 = x + w - eyeOffset;
              eyeY1 = y + eyeOffset;
              eyeX2 = x + w - eyeOffset;
              eyeY2 = y + h - eyeOffset;
            } else if (direction.x === -1) {
              eyeX1 = x + eyeOffset;
              eyeY1 = y + eyeOffset;
              eyeX2 = x + eyeOffset;
              eyeY2 = y + h - eyeOffset;
            } else if (direction.y === 1) {
              eyeX1 = x + eyeOffset;
              eyeY1 = y + h - eyeOffset;
              eyeX2 = x + w - eyeOffset;
              eyeY2 = y + h - eyeOffset;
            } else {
              eyeX1 = x + eyeOffset;
              eyeY1 = y + eyeOffset;
              eyeX2 = x + w - eyeOffset;
              eyeY2 = y + eyeOffset;
            }
            
            ctx.beginPath();
            ctx.arc(eyeX1, eyeY1, eyeSize, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(eyeX2, eyeY2, eyeSize, 0, Math.PI * 2);
            ctx.fill();
            
            // 瞳孔
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(eyeX1, eyeY1, 1.5, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(eyeX2, eyeY2, 1.5, 0, Math.PI * 2);
            ctx.fill();
          }
        });
      }

      // 游戏循环
      function gameLoop(timestamp) {
        if (gameState !== 'running') return;
        
        if (timestamp - lastTime >= gameSpeed) {
          update();
          draw();
          lastTime = timestamp;
        }
        
        if (gameState === 'running') {
          gameInterval = requestAnimationFrame(gameLoop);
        }
      }

      // 更新游戏逻辑
      function update() {
        // 应用方向
        direction = { ...nextDirection };
        
        // 计算新蛇头位置
        const head = snake[0];
        const newHead = {
          x: head.x + direction.x,
          y: head.y + direction.y
        };
        
        // 检查是否撞墙
        if (newHead.x < 0 || newHead.x >= cols || newHead.y < 0 || newHead.y >= rows) {
          gameOver();
          return;
        }
        
        // 检查是否撞到自己
        if (snake.some(s => s.x === newHead.x && s.y === newHead.y)) {
          gameOver();
          return;
        }
        
        // 移动蛇
        snake.unshift(newHead);
        
        // 检查是否吃到食物
        if (newHead.x === food.x && newHead.y === food.y) {
          score++;
          scoreEl.textContent = score;
          
          // 更新最高分
          if (score > highScore) {
            highScore = score;
            highScoreEl.textContent = highScore;
            localStorage.setItem('snakeHighScore', highScore.toString());
          }
          
          // 生成新食物
          generateFood();
          
          // 加速
          if (gameSpeed > 80) {
            gameSpeed -= 2;
          }
        } else {
          snake.pop();
        }
      }

      // 游戏结束
      function gameOver() {
        gameState = 'over';
        cancelAnimationFrame(gameInterval);
        finalScoreEl.textContent = score;
        gameOverOverlay.classList.add('show');
        startBtn.disabled = false;
        pauseBtn.disabled = true;
        statusText.textContent = '游戏结束，点击"再来一局"重新开始';
      }

      // 开始游戏
      function startGame() {
        if (gameState === 'idle' || gameState === 'over') {
          initSnake();
          generateFood();
          score = 0;
          scoreEl.textContent = '0';
          gameSpeed = 150;
          gameOverOverlay.classList.remove('show');
        }
        
        if (gameState === 'paused') {
          // 继续
        }
        
        gameState = 'running';
        startBtn.disabled = true;
        pauseBtn.disabled = false;
        statusText.textContent = '游戏中...';
        lastTime = performance.now();
        cancelAnimationFrame(gameInterval);
        gameInterval = requestAnimationFrame(gameLoop);
      }

      // 暂停游戏
      function pauseGame() {
        if (gameState === 'running') {
          gameState = 'paused';
          cancelAnimationFrame(gameInterval);
          startBtn.disabled = false;
          pauseBtn.disabled = true;
          statusText.textContent = '已暂停，点击"开始"继续';
        }
      }

      // 重置游戏
      function resetGame() {
        cancelAnimationFrame(gameInterval);
        gameState = 'idle';
        initSnake();
        generateFood();
        score = 0;
        scoreEl.textContent = '0';
        gameSpeed = 150;
        gameOverOverlay.classList.remove('show');
        startBtn.disabled = false;
        pauseBtn.disabled = true;
        statusText.textContent = '按"开始"或方向键开始游戏';
        draw();
      }

      // 设置方向
      function setDirection(x, y) {
        // 防止反向
        if (x === -direction.x && y === -direction.y) return;
        if (x === direction.x && y === direction.y) return;
        
        nextDirection = { x, y };
        
        // 如果游戏未开始，自动开始
        if (gameState === 'idle' || gameState === 'over') {
          startGame();
        } else if (gameState === 'paused') {
          startGame();
        }
      }

      // 键盘控制
      document.addEventListener('keydown', (e) => {
        const key = e.key.toLowerCase();
        
        switch (key) {
          case 'arrowup':
          case 'w':
            e.preventDefault();
            setDirection(0, -1);
            break;
          case 'arrowdown':
          case 's':
            e.preventDefault();
            setDirection(0, 1);
            break;
          case 'arrowleft':
          case 'a':
            e.preventDefault();
            setDirection(-1, 0);
            break;
          case 'arrowright':
          case 'd':
            e.preventDefault();
            setDirection(1, 0);
            break;
          case ' ':
            e.preventDefault();
            if (gameState === 'running') {
              pauseGame();
            } else if (gameState === 'paused' || gameState === 'idle') {
              startGame();
            }
            break;
        }
      });

      // 方向按钮控制
      document.querySelectorAll('.dpad-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          const dir = btn.dataset.dir;
          if (!dir) return;
          
          switch (dir) {
            case 'up':
              setDirection(0, -1);
              break;
            case 'down':
              setDirection(0, 1);
              break;
            case 'left':
              setDirection(-1, 0);
              break;
            case 'right':
              setDirection(1, 0);
              break;
          }
        });
      });

      // 按钮事件
      startBtn.addEventListener('click', startGame);
      pauseBtn.addEventListener('click', pauseGame);
      resetBtn.addEventListener('click', resetGame);
      restartBtn.addEventListener('click', () => {
        resetGame();
        startGame();
      });

      // 初始化
      window.addEventListener('resize', () => {
        resizeCanvas();
        initSnake();
        generateFood();
        draw();
      });

      // 启动
      resizeCanvas();
      initSnake();
      generateFood();
      draw();
    })();
  </script>
</body>
</html>
暂无评论，来说两句吧
贪吃蛇

评论（0）
