加强版贪吃蛇完整代码

最新推荐文章于 2024-05-24 23:45:01 发布

有点困了.

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量99

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_55541470/article/details/136832534

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>贪吃蛇</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #8b8b8b;
      }
      #game-board {
        width: 400px;
        height: 400px;
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(20, 1fr);
        border: 1px solid #333;
      }
      .cell {
        border: 0.5px solid #fff;
        transition: background-color 0.1s;
      }
      .apple {
        background-color: red;
      }
      .snake {
        background-color: rgb(25, 193, 25);
      }
      .colorful-apple {
        border-radius: 50%;
      }
      #score {
        text-align: center;
        color: #fff;
        font-size: 24px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    <div id="score">Score: 0</div>

    <script>
      const board = document.getElementById("game-board");
      const scoreDisplay = document.getElementById("score");
      let cells = [];
      let score = 0;

      // 创建游戏板和单元格
      for (let i = 0; i < 400; i++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        board.appendChild(cell);
        cells.push(cell);
      }

      let currentSnake = [2, 1, 0]; // 初始蛇的位置
      let direction = 1; // 初始移动方向
      let appleIndex = 0; // 苹果位置
      let speed = 300; // 初始速度
      let intervalId = 0;

      function startGame() {
        currentSnake.forEach((index) => cells[index].classList.remove("snake"));
        cells[appleIndex].classList.remove("apple");
        cells[appleIndex].style.backgroundColor = ""; // 移除彩色
        cells[appleIndex].classList.remove("colorful-apple");
        clearInterval(intervalId);
        currentSnake = [2, 1, 0];
        direction = 1;
        speed = 300;
        score = 0;
        scoreDisplay.textContent = "Score: " + score;
        generateApple();
        currentSnake.forEach((index) => cells[index].classList.add("snake"));
        intervalId = setInterval(move, speed);
      }

      function move() {
        // 移动逻辑
        const head = currentSnake[0];
        const tail = currentSnake.pop();
        cells[tail].classList.remove("snake");
        let nextHead;
        if (direction === 1 && head % 20 !== 19) {
          nextHead = head + 1;
        } else if (direction === -1 && head % 20 !== 0) {
          nextHead = head - 1;
        } else if (direction === -20 && head >= 20) {
          nextHead = head - 20;
        } else if (direction === 20 && head < 380) {
          nextHead = head + 20;
        } else {
          handleGameOver();
          return;
        }
        if (currentSnake.includes(nextHead)) {
          handleGameOver();
          return;
        }

        if (cells[nextHead].classList.contains("colorful-apple")) {
          score += 4;
          scoreDisplay.textContent = "Score: " + score;
        }

        currentSnake.unshift(nextHead);
        if (nextHead === appleIndex) {
          cells[appleIndex].classList.remove("apple");
          cells[appleIndex].style.backgroundColor = ""; // 移除彩色
          cells[appleIndex].classList.remove("colorful-apple");
          generateApple();
          currentSnake.push(tail);
          cells[tail].classList.add("snake");
          score += 1;
          scoreDisplay.textContent = "Score: " + score;
          clearInterval(intervalId);
          speed = speed * 0.9; // 加快速度
          intervalId = setInterval(move, speed);
        }
        cells[currentSnake[0]].classList.add("snake");
      }

      function generateApple() {
        appleIndex = Math.floor(Math.random() * 400);
        while (cells[appleIndex].classList.contains("snake")) {
          appleIndex = Math.floor(Math.random() * 400);
        }
        // 20%的概率生成彩色苹果
        if (Math.random() < 0.2) {
          cells[appleIndex].style.backgroundColor =
            "rgb(" + getRandomColor() + ")";
          cells[appleIndex].classList.add("colorful-apple");
        } else {
          cells[appleIndex].classList.add("apple");
        }
      }

      function getRandomColor() {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return `${r}, ${g}, ${b}`;
      }

      function control(e) {
        if (e.keyCode === 37) {
          direction = -1;
        } else if (e.keyCode === 38) {
          direction = -20;
        } else if (e.keyCode === 39) {
          direction = 1;
        } else if (e.keyCode === 40) {
          direction = 20;
        }
      }

      function handleGameOver() {
        clearInterval(intervalId);
        alert("Game over! Your score is: " + score);
        const restart = confirm("Do you want to restart the game?");
        if (restart) {
          startGame();
        }
      }

      document.addEventListener("keyup", control);
      startGame();
    </script>
  </body>
</html>