贪吃蛇Pro Max Ultra——从凡蛇到吞天巨蟒的修炼之路-CSDN博客

本文链接：https://blog.csdn.net/weixin_49707375/article/details/145970840

之前已经做了一个基础的贪吃蛇游戏，现在想要升级它。让我们来给贪吃蛇做个「豪华升级套餐」，就像给普通泡面加了溏心蛋、肥牛和芝士！以下是升级方案和核心技术点：

🚀 升级方案：「贪吃蛇Pro Max Ultra」

彩虹炫光皮肤：蛇身自动渐变彩虹色，移动时拖尾特效
智能食物系统：
- 🍔普通食物（+10分）
- 🚀加速食物（速度x2，紫色）
- 🐢减速食物（速度÷2，蓝色）
- 💣炸弹食物（减20分，红色）
成就系统：解锁「速度与激情」「大胃王」等勋章
音效系统：吃不同食物触发不同音效
存档功能：自动保存最高分（即使关闭浏览器）

🔧 核心技术栈

CSS动画：实现彩虹渐变和拖尾效果
Web Audio API：播放音效
LocalStorage：存储游戏记录
ES6 Class继承：创建智能食物系统
Canvas绘图：提升渲染性能

🎮 完整代码：「会跳舞的贪吃蛇」

<!DOCTYPE html>
<html>
  <head>
    <title>贪吃蛇Pro Max Ultra</title>
    <style>
      /* 新增成就弹出动画 */
      @keyframes popIn {
        from {
          transform: scale(0);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* 其他原有样式保持不变 */
      .snake-body {
        /* 实际在canvas中绘制，此处可保留 */
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
        animation: rainbow 2s infinite;
        border-radius: 4px;
      }

      @keyframes rainbow {
        0% {
          filter: hue-rotate(0deg);
        }
        100% {
          filter: hue-rotate(360deg);
        }
      }

      .food-speed {
        box-shadow: 0 0 15px #a55eea;
      }
      .food-slow {
        box-shadow: 0 0 15px #45aaf2;
      }
      .food-bomb {
        animation: pulse 1s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.2);
        }
      }
    </style>
  </head>
  <body>
    <div id="score">得分：0 | 最高分：<span id="highScore">0</span></div>
    <div id="achievements"></div>
    <canvas id="game-canvas"></canvas>

    <audio id="eat-sound" src="data:audio/wav;base64,UklGRl..."></audio>
    <audio id="bomb-sound" src="data:audio/wav;base64,UklGRl..."></audio>

    <script>
      class SpecialFood {
        // 定义特殊食物类
        constructor() {
          // 定义食物类型
          this.types = [
            { class: "food-normal", score: 10 }, // 普通食物
            { class: "food-speed", score: 20, speed: 2 }, // 加速
            { class: "food-slow", score: 15, speed: 0.5 }, // 减速
            { class: "food-bomb", score: -20 }, // 炸弹
          ];
          // 生成当前食物
          this.current = this.generate();
          this.nextIsSafe = false; // 新增标志位
        }

        generate() {
          // 随机生成食物类型
          let type;

          // 如果下次需要安全食物
          if (this.nextIsSafe) {
            type = this.types[Math.floor(Math.random() * 3)]; // 只从0-2选择（非炸弹）
            this.nextIsSafe = false;
          }
          // 正常随机生成
          else {
            const shouldGenerateSpecial = Math.random() > 0.7;
            type = shouldGenerateSpecial
              ? this.types[Math.floor(Math.random() * 3) + 1] // 1-3（加速/减速/炸弹）
              : this.types[0]; // 普通食物
          }

          // 如果生成了炸弹，设置下次必须生成安全食物
          if (type.class === "food-bomb") {
            this.nextIsSafe = true;
          }
          // 随机生成食物位置
          return {
            ...type,
            x: Math.floor(Math.random() * 20),
            y: Math.floor(Math.random() * 20),
          };
        }
      }

      class SnakeGame {
        // 定义游戏类
        constructor() {
          // 获取画布
          this.canvas = document.getElementById("game-canvas");
          // 获取画布上下文
          this.ctx = this.canvas.getContext("2d");
          // 初始化蛇身
          this.snake = [];
          // 初始化方向
          this.direction = "right";
          // 初始化食物
          this.food = new SpecialFood();
          // 初始化得分
          this.score = 0;
          // 初始化最高分
          this.highScore = 0;
        }
      }

      class SnakeGamePro extends SnakeGame {
        // 定义高级游戏类
        constructor() {
          super();
          // 设置画布大小
          this.canvas.width = 400;
          this.canvas.height = 400;
          // 设置画布边框
          this.canvas.style.border = "1px solid #000";
          // 初始化蛇身
          this.snake = [
            [10, 10],
            [10, 11],
            [10, 12],
            [10, 13],
          ];
          // 初始化速度倍数
          this.speedMultiplier = 1;
          this.achievements = new Set();
          this.gameLoop = null;

          // 初始化游戏循环
          this.startGame();
          this.setupControls();
          this.loadHighScore();

          // 监听键盘事件
          document.addEventListener("keydown", (e) => this.handleKeyPress(e));
        }

        startGame() {
          if (this.gameLoop) clearInterval(this.gameLoop);
          this.gameLoop = setInterval(() => {
            this.move();
            this.draw();
          }, 150);
        }

        setupControls() {
          document.addEventListener("keydown", (e) => {
            const directions = {
              ArrowUp: "up",
              ArrowDown: "down",
              ArrowLeft: "left",
              ArrowRight: "right",
            };
            const newDir = directions[e.key];
            if (newDir && this.isValidDirection(newDir)) {
              this.direction = newDir;
            }
          });
        }

        isValidDirection(newDir) {
          const opposite = {
            up: "down",
            down: "up",
            left: "right",
            right: "left",
          };
          return this.direction !== opposite[newDir];
        }

        draw() {
          this.ctx.clearRect(0, 0, 400, 400);

          // 绘制蛇身
          this.snake.forEach(([x, y], index) => {
            this.ctx.fillStyle = `hsl(${index * 10}, 70%, 60%)`;
            this.ctx.beginPath();
            this.ctx.roundRect(x * 20, y * 20, 18, 18, 5);
            this.ctx.fill();
          });

          // 绘制食物
          const food = this.food.current;
          this.ctx.fillStyle = food.class.includes("speed")
            ? "#a55eea"
            : food.class.includes("slow")
            ? "#45aaf2"
            : food.class.includes("bomb")
            ? "#ff4757"
            : "#f1c40f";
          this.ctx.beginPath();
          this.ctx.arc(food.x * 20 + 10, food.y * 20 + 10, 8, 0, Math.PI * 2);
          this.ctx.fill();
        }

        // 处理键盘事件
        handleKeyPress(e) {
          const keyMap = {
            ArrowUp: "up",
            ArrowDown: "down",
            ArrowLeft: "left",
            ArrowRight: "right",
          };
          const newDir = keyMap[e.key];
          // 禁止反向移动（比如不能从右直接转左）
          if (
            newDir &&
            !(
              (this.direction === "up" && newDir === "down") ||
              (this.direction === "down" && newDir === "up") ||
              (this.direction === "left" && newDir === "right") ||
              (this.direction === "right" && newDir === "left")
            )
          ) {
            this.direction = newDir;
          }
        }

        move() {
          const head = [...this.snake[0]];
          switch (this.direction) {
            case "up":
              head[1]--;
              break;
            case "down":
              head[1]++;
              break;
            case "left":
              head[0]--;
              break;
            case "right":
              head[0]++;
              break;
          }

          // 边界检测
          if (head[0] < 0 || head[0] >= 20 || head[1] < 0 || head[1] >= 20) {
            return this.gameOver();
          }

          // 自碰检测
          if (
            this.snake.some(
              (segment) => segment[0] === head[0] && segment[1] === head[1]
            )
          ) {
            return this.gameOver();
          }

          // 食物检测
          if (
            head[0] === this.food.current.x &&
            head[1] === this.food.current.y
          ) {
            this.handleFoodEffect();
            this.snake.unshift(head);
            this.score += this.food.current.score;
            document.getElementById(
              "score"
            ).textContent = `得分：${this.score} | 最高分：${this.highScore}`;
            this.food.current = this.food.generate();
          } else {
            this.snake.unshift(head);
            this.snake.pop();
          }
        }

        handleFoodEffect() {
          if (this.food.current.speed) {
            this.speedMultiplier = this.food.current.speed;
            clearInterval(this.gameLoop);
            this.gameLoop = setInterval(() => {
              this.move();
              this.draw();
            }, 150 / this.speedMultiplier);
          }
          if (this.food.current.class === "food-bomb") {
            this.snake = this.snake.slice(0, -2);
            if (this.snake.length < 1) this.gameOver();
          }
        }

        gameOver() {
          this.updateAchievements();
          clearInterval(this.gameLoop);
          alert(`Game Over! 得分：${this.score}`);
          this.saveHighScore();
          // 重置游戏状态
          this.snake = [
            [10, 10],
            [10, 11],
            [10, 12],
            [10, 13],
          ];
          this.direction = "right";
          this.score = 0;
          this.startGame();
        }

        updateAchievements() {
          if (this.score >= 100 && !this.achievements.has("大胃王")) {
            this.showAchievement("🏆 解锁成就：大胃王！");
            this.achievements.add("大胃王");
          }
        }

        showAchievement(text) {
          const div = document.createElement("div");
          div.textContent = text;
          div.style.cssText = `
            animation: popIn 0.5s;
            margin: 5px;
            padding: 8px;
            background: #dff0d8;
            border-radius: 4px;
          `;
          document.getElementById("achievements").appendChild(div);
        }

        loadHighScore() {
          this.highScore =
            parseInt(localStorage.getItem("snakeHighScore")) || 0;
          document.getElementById("highScore").textContent = this.highScore;
        }

        saveHighScore() {
          if (this.score > this.highScore) {
            localStorage.setItem("snakeHighScore", this.score);
            this.highScore = this.score;
          }
        }
      }

      // 启动游戏
      new SnakeGamePro();
    </script>
  </body>
</html>

🛠️ 升级解析：黑科技拆解

彩虹拖尾特效
- 使用HSL色彩模式，根据蛇身段数变化色相
- CSS动画实现自动渐变滤镜

智能食物系统

class SpecialFood {
  constructor() {
    this.types = [ // 不同食物配置
      { class: 'food-normal', score: 10 }, 
      { class: 'food-speed', score: 20, speed: 2 },
      //...
    ];
  }
}