JavaScript的小游戏——贪吃蛇

最新推荐文章于 2024-08-12 03:46:42 发布

吃不饱的我

最新推荐文章于 2024-08-12 03:46:42 发布

阅读量694

点赞数

分类专栏：笔记文章标签： javascript css css3

本文链接：https://blog.csdn.net/yh_31/article/details/128105248

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

通过上下左右的方向键控制

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #main {
      width: 360px;
      height: 420px;
      border: 10px solid #000;
      background-color: #b7d4a8;
      border-radius: 20px;
      margin: 50px auto;
    }

    #stage {
      width: 304px;
      height: 304px;
      border: 2px solid #000;
      margin: 20px auto;
      position: relative;
    }

    #snake>div {
      width: 10px;
      height: 10px;
      background-color: #000;
      position: absolute;
      border: 1px solid #b7d4a8;
    }

    #food {
      width: 10px;
      height: 10px;
      position: absolute;
      top: 100px;
      left: 120px;
      display: flex;
      /* 自动换行 */
      flex-flow: wrap;
    }

    #food div {
      width: 5px;
      height: 5px;
      background-color: #000;
      transform: rotate(45deg);
    }

    #info {
      width: 304px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      font: bold 20px Courier;
    }
  </style>
</head>

<body>
  <div id="main">
    <div id="stage">
      <!-- 贪吃蛇的 -->
      <div id="snake">
        <div></div>
      </div>

      <!-- 食物 -->
      <div id="food">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <div id="info">
      <div>SCORE:<span id="score">0</span></div>
      <div>LEVEL<span id="level">1</span></div>
    </div>
  </div>

  <script>
    // 获取snake
    const snake = document.getElementById("snake");

    // 获取snake里的div
    const snakes = snake.getElementsByTagName("div");

    // 获取食物
    const food = document.getElementById("food");

    // 获取分数和等级的span
    const scoreSpan = document.getElementById("score");
    const levelSpan = document.getElementById("level");

    // 创建变量 存储分数和等级
    let score = 0;
    let level = 0;



    // 事物的坐标应该在0--290之间

    function changeFood() {
      // 生成0--29之间的随机数  
      //向下取整
      const x = Math.floor(Math.random() * 30) * 10;
      const y = Math.floor(Math.random() * 30) * 10;

      // 设置食物坐标
      food.style.left = x + "px";
      food.style.top = y + "px";

    }


    // 定义一个变量  存储运动的方向
    let dir;
    // 创建一个变量 记录按键的状态
    let keyActive = true;

    const keyArr = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];

    // 创建对象
    const reObj = {
      ArrowUp: "ArrowDown",
      ArrowDown: "ArrowUp",
      ArrowRight: "ArrowLeft",
      ArrowLeft: "ArrowRight"
    }
    // 禁止掉头
    // 身体超过2，不能是相反的方向
    // 保持原来的方向不变（不修改dir的值）



    // 绑定按键事件keydown keyup
    //  键盘事件只能绑定给可以获取焦点的元素或者是doucument
    document.addEventListener("keydown", (event) => {

      if (keyActive && keyArr.includes(event.key)) {

        if (snakes.length < 2 || reObj[dir] !== event.key) {
          // 设置方向
          dir = event.key;
          keyActive = false;
        }
      }
    })

    // 要想使得身体和头一起运动 只需将尾部的一个移动位置

    let isGameOver;
    setTimeout(function move() {
      keyActive = true;

      // 获取头部
      const head = snakes[0];

      // 获取头部坐标
      let x = head.offsetLeft;
      let y = head.offsetTop;

      switch (dir) {
        case "ArrowUp":

          y -= 10;
          break;
        case "ArrowRight":

          // 向右移动，让left增加
          x += 10;
          break;
        case "ArrowDown":

          y += 10;
          break;
        case "ArrowLeft":

          x -= 10;
          break;
      }

      // 检查是否吃到食物
      if (head.offsetTop === food.offsetTop &&
        head.offsetLeft === food.offsetLeft) {
        // 1改变食物位置，
        changeFood();
        // 2增加其身体长度
        snake.insertAdjacentHTML("beforeend", "<div/>")

        score++;
        scoreSpan.textContent = score;
        // 检查等级
        if (score % 10 === 0 && level < 14) {
          level++;
          levelSpan.textContent = level + 1;
        }

      }

      // 判断游戏是否结束
      // 撞墙
      if (x < 0 || x > 290 || y < 0 || y > 290) {
        // 游戏结束
        alert("撞墙啦，游戏结束~")
        return
      }
      // 撞自己
      if (dir) {
        for (let i = 0; i < snakes.length; i++) {
          if (snakes[i].offsetLeft === x && snakes[i].offsetTop === y) {
            alert("撞到自己啦，游戏结束~");
            return;
          }
        }
      }

      // 获取尾巴
      const tail = snakes[snakes.length - 1]
      // 移动的位置
      tail.style.left = x + "px"
      tail.style.top = y + "px"

      // 将尾巴移到最前面
      snake.insertAdjacentElement("afterbegin", tail);
      keyActive = true;

      setTimeout(move, 300 - level * 20);
    }, 300)

  </script>
</body>

</html>