贪吃蛇小游戏

最新推荐文章于 2024-06-16 12:11:30 发布
我想再眯会
最新推荐文章于 2024-06-16 12:11:30 发布
阅读量849
点赞数 1
文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/qq_63223641/article/details/126420758
版权
<!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>
      body {
        margin: 0px;
        padding: 0px;
      }

      #main {
        margin: 100px;
      }

      .btn {
        width: 100px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <input class="btn" type="button" value="开始游戏" id="begin" />
      <input class="btn" type="button" value="暂停游戏" id="pause" />

      <script>
        var main = document.getElementById("main");
        var showcanvas = true; //是否开启画布格子
        //地图的构造方法
        function Map(atom, xnum, ynum) {
          this.atom = atom;
          this.xnum = xnum;
          this.ynum = ynum;

          this.canvas = null;

          this.create = function () {
            this.canvas = document.createElement("div");
            this.canvas.style.cssText =
              "position:relative;top:40px;border:1px solid darkred;background:#FAFAFA;";
            this.canvas.style.width = this.atom * this.xnum + "px"; //画布宽
            this.canvas.style.height = this.atom * this.ynum + "px"; //画布高
            main.appendChild(this.canvas);

            if (showcanvas) {
              for (var y = 0; y < ynum; y++) {
                for (var x = 0; x < xnum; x++) {
                  var a = document.createElement("div");
                  a.style.cssText = "border:1px solid yellow";
                  a.style.width = this.atom + "px";
                  a.style.height = this.atom + "px";
                  a.style.backgroundColor = "green";
                  a.style.position = "absolute";
                  a.style.left = x * this.atom + "px";
                  a.style.top = y * this.atom + "px";
                  this.canvas.appendChild(a);
                }
              }
            }
          };
        }

        //创建食物的构造方法
        function Food(map) {
          this.width = map.atom;
          this.height = map.atom;
          this.bgcolor =
            "rgb(" +
            Math.floor(Math.random() * 200) +
            "," +
            Math.floor(Math.random() * 200) +
            "," +
            Math.floor(Math.random() * 200) +
            ")";
          this.x = Math.floor(Math.random() * map.xnum);
          this.y = Math.floor(Math.random() * map.ynum);

          this.flag = document.createElement("div");
          this.flag.style.width = this.width + "px";
          this.flag.style.height = this.height + "px";

          this.flag.style.backgroundColor = this.bgcolor;
          this.flag.style.borderRadius = "50%";
          this.flag.style.position = "absolute";
          this.flag.style.left = this.x * this.width + "px";
          this.flag.style.top = this.y * this.height + "px";

          map.canvas.appendChild(this.flag);
        }

        //
        function Snack(map) {
          //设置宽高
          this.width = map.atom;
          this.height = map.atom;
          //默认走的方向
          this.direction = "right";

          this.body = [
            { x: 2, y: 0 }, //蛇头
            { x: 1, y: 0 }, //蛇体
            { x: 0, y: 0 }, //蛇尾
          ];

          //显示蛇
          this.display = function () {
            for (var i = 0; i < this.body.length; i++) {
              if (this.body[i].x != null) {
                //当吃到食物的时，x--null，不然会在0，0处理新建一个
                var s = document.createElement("div");
                //保持状态，以后方便删除使用
                this.body[i].flag = s;
                //设置蛇的状态
                s.style.width = this.width + "px";
                s.style.height = this.height + "px";
                s.style.backgroundColor =
                  "rgb(" +
                  Math.floor(Math.random() * 200) +
                  "," +
                  Math.floor(Math.random() * 200) +
                  "," +
                  Math.floor(Math.random() * 200) +
                  ")";
                s.style.borderRadius = "50%";
                //设置位置
                s.style.position = "absolute";
                s.style.left = this.body[i].x * this.width + "px";
                s.style.top = this.body[i].y * this.height + "px";
                map.canvas.appendChild(s);
              }
            }
          };
          this.run = function () {
            for (var i = this.body.length - 1; i > 0; i--) {
              this.body[i].x = this.body[i - 1].x;
              this.body[i].y = this.body[i - 1].y;
            }
            //根据方向处理方向
            switch (this.direction) {
              case "left":
                this.body[0].x -= 1;
                break;
              case "right":
                this.body[0].x += 1;
                break;
              case "up":
                this.body[0].y -= 1;
                break;
              case "down":
                this.body[0].y += 1;
                break;
            }
            //判断蛇头吃到食物
            if (this.body[0].x == food.x && this.body[0].y == food.y) {
              this.body.push({ x: null, y: null, flag: null });
              map.canvas.removeChild(food.flag);
              food = new Food(map);
            }

            //判断是否出界
            if (
              this.body[0].x < 0 ||
              this.body[0].x > map.xnum - 1 ||
              this.body[0].y < 0 ||
              this.body[0].y > map.ynum - 1
            ) {
              clearInterval(timer);
              alert("撞墙死掉了哦!!!");

              restart(map, this);

              return false;
            }

            for (var i = 4; i < this.body.length; i++) {
              if (
                this.body[0].x == this.body[i].x &&
                this.body[0].y == this.body[i].y
              ) {
                clearInterval(timer);
                alert("把自己弄死掉了哦!!!");

                restart(map, this);

                return false;
              }
            }

            for (var i = 0; i < this.body.length; i++) {
              if (this.body[i].flag != null) {
                //当吃食物 flad为null
                map.canvas.removeChild(this.body[i].flag);
              }
            }

            this.display();
          };
        }
        //重新开始游戏
        function restart(map, snack) {
          for (var i = 0; i < snack.body.length; i++) {
            map.canvas.removeChild(snack.body[i].flag);
          }
          snack.body = [
            { x: 2, y: 0 }, //蛇头
            { x: 1, y: 0 }, //蛇体
            { x: 0, y: 0 }, //蛇尾
          ];
          snack.direction = "right";
          snack.display();

          map.canvas.removeChild(food.flag);
          food = new Food(map);
        }
        var map = new Map(20, 40, 20);
        map.create();
        //构造食物
        var food = new Food(map);
        //构造蛇对象
        var snack = new Snack(map);

        snack.display();

        //个body加键盘事件
        window.onkeydown = function (e) {
          var event = e || window.event;

          switch (event.keyCode) {
            case 38:
              if (snack.direction != "down") {
                snack.direction = "up";
              }
              break;
            case 40:
              if (snack.direction != "up") {
                snack.direction = "down";
              }
              break;
            case 37:
              if (snack.direction != "right") {
                snack.direction = "left";
              }
              break;
            case 39:
              if (snack.direction != "left") {
                snack.direction = "right";
              }
              break;
          }
        };
        var timer;
        document.getElementById("begin").onclick = () => {
          clearInterval(timer);
          timer = setInterval(() => {
            snack.run();
          }, 300);
        };
        document.getElementById("pause").onclick = () => {
          clearInterval(timer);
        };
      </script>
    </div>
  </body>
</html>