面向对象-贪吃蛇

开心很重要
于 2022-06-05 18:07:41 发布
阅读量242
点赞数
文章标签： javascript 前端 css3
本文链接：https://blog.csdn.net/Black_Straight/article/details/125134815
版权
文章目录

一、面向对象-贪吃蛇
一、面向对象-贪吃蛇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
  </body>
  <script type="text/javascript">
    var timerId;
    document.querySelector("button").onclick = function () {
      // 让蛇动起来 - 定时器移动
      timerId = setInterval(() => {
        s.move();
      }, 100);
    };
    // 地图对象
    function Map() {
      // 地图对象负责创建范围，放蛇和食物
      this.map = document.createElement("div");
      setStyle(this.map, {
        width: "800px",
        height: "500px",
        background: "pink",
        border: "2px solid #000",
        position: "relative",
      });
      // 将地图放在body中
      document.body.appendChild(this.map);
    }
    var m = new Map();
    // 食物对象
    function Food() {
      // 食物对象负责生成，消失(地图干掉他)
      this.food = document.createElement("div");
      setStyle(this.food, {
        width: "10px",
        height: "10px",
        background: "blue",
        position: "absolute",
        left: parseInt(getRandom(0, m.map.clientWidth - 10) / 10) * 10 + "px",
        top: parseInt(getRandom(0, m.map.clientHeight - 10) / 10) * 10 + "px",
      });
      // 将食物放到地图中
      m.map.appendChild(this.food);
    }
    var f = new Food();
    // 蛇对象
    function Snake() {
      // 定义蛇的身体的left和top
      this.body = [
        {
          x: 0,
          y: 0,
        },
        {
          x: 10,
          y: 0,
        },
        {
          x: 20,
          y: 0,
        },
      ];
      // 定义蛇的移动方向
      this.direction = "right";
      // 通过按键改变蛇的移动方向
      this.changeDirection();
      // 显示蛇的身体
      this.show();
    }
    Snake.prototype.changeDirection = function () {
      document.onkeypress = (e) => {
        var e = e || window.event;
        // 获取键码
        var code = e.keyCode || e.which;
        // 根据键码改变direction属性
        // console.log(code); // 119 115 97 100
        switch (code) {
          case 119:
            this.direction = "up";
            break;
          case 115:
            this.direction = "down";
            break;
          case 97:
            this.direction = "left";
            break;
          case 100:
            this.direction = "right";
            break;
        }
      };
    };
    Snake.prototype.move = function () {
      console.log(this.direction);
      // 蛇移动需要一个方向 - 默认方向
      // 蛇在移动过程中，不管是哪个方向，移动一步，蛇的第二节身体就是蛇头原来的位置，蛇的最后一节身体就是，第二节身体原来的位置
      for (var i = 0; i < this.body.length - 1; i++) {
        this.body[i].x = this.body[i + 1].x;
        this.body[i].y = this.body[i + 1].y;
      }
      // console.log(this.body);
      // 单独设置蛇头
      switch (this.direction) {
        case "up":
          this.body[this.body.length - 1].y -= 10;
          break;
        case "down":
          this.body[this.body.length - 1].y += 10;
          break;
        case "left":
          this.body[this.body.length - 1].x -= 10;
          break;
        case "right":
          this.body[this.body.length - 1].x += 10;
          break;
      }
      // console.log(this.body);
      // 根据新的数组显示身体
      this.show();
      this.eat();
      // 蛇不能撞墙
      this.die();
    };
    Snake.prototype.die = function () {
      // 撞墙
      if (
        this.body[this.body.length - 1].x > m.map.clientWidth ||
        this.body[this.body.length - 1].x < 0 ||
        this.body[this.body.length - 1].y < 0 ||
        this.body[this.body.length - 1].y > m.map.clientHeight
      ) {
        
        clearInterval(timerId);
        alert("GAME OVER");
        s = new Snake();
      }
      // 撞身体
      for (var i = 0; i < this.body.length - 1; i++) {
        if (
          this.body[i].x === this.body[this.body.length - 1].x &&
          this.body[i].y === this.body[this.body.length - 1].y
        ) {
          clearInterval(timerId);
          alert("GAME OVER");
          s = new Snake();
        }
      }
    };
    Snake.prototype.eat = function () {
      // 蛇头的x和y跟食物的left和top完全相等的时候就吃到了
      if (
        this.body[this.body.length - 1].x === f.food.offsetLeft &&
        this.body[this.body.length - 1].y === f.food.offsetTop
      ) {
        // 吃到了
        // 蛇的身体要加一节
        var oneBody = {
          x: this.body[0].x,
          y: this.body[0].y,
        };
        // 将这个对象放到身体数组的最前面
        this.body.unshift(oneBody);
        // 根据新的数组生成新的身体
        this.show();
        // 食物要消失，并再生成一个
        f.food.parentElement.removeChild(f.food);
        f = new Food();
      }
    };
    Snake.prototype.show = function () {
      // 先删除之前的身体 - 再创建新的身体
      var snakes = m.map.querySelectorAll(".snake");
      // console.log(snakes);
      if (snakes.length !== 0) {
        for (var i = 0; i < snakes.length; i++) {
          snakes[i].parentElement.removeChild(snakes[i]);
        }
      }
      // 遍历身体属性，创建div
      for (var i = 0; i < this.body.length; i++) {
        var div = document.createElement("div");
        div.className = "snake";
        setStyle(div, {
          width: "10px",
          height: "10px",
          background: "#0f0",
          position: "absolute",
          left: this.body[i].x + "px",
          top: this.body[i].y + "px",
        });
        if (i === this.body.length - 1) {
          div.style.background = "red";
        }
        m.map.appendChild(div);
      }
    };
    var s = new Snake();

    function setStyle(ele, styleObj) {
      for (var attr in styleObj) {
        ele.style[attr] = styleObj[attr];
      }
    }
    function getRandom(min, max) {
      if (min > max) {
        var tmp = min;
        min = max;
        max = tmp;
      }
      return parseInt(Math.random() * (max - min) + 1);
    }
  </script>
</html>