基于javascript实现贪吃蛇小游戏

本文实例为大家分享了js贪吃蛇游戏的具体代码，供大家参考，具体内容如下

先不多说先上图

下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈，请不要在意哈），还有操作键是使用 ↑ ↓ ← → ）

<!DOCTYPE html>
<html>

<head lang="en">
 <meta charset="UTF-8">
 <title>贪食蛇</title>
 <style>
  .map {
   width: 800px;
   height: 600px;
   background-color: #ccc;
   position: relative;
   left: 50%;
   transform: translate(-50%);
  }

  #dv {
   color: whitesmoke;
   font-weight: 700;
   text-align: center;
   line-height: 50px;
   width: 150px;
   height: 50px;
   position: absolute;
   background-color: orange;
   border-radius: 10px;
   top: 50%;
   left: 50%;
   transform: translate(-50%);
   cursor: pointer;
  }
 </style>
</head>

<body>
 <div class="map">
  <div id="dv">开始游戏</div>
 </div>

 <script>
  //食物:是一个对象,有宽,有高,有颜色,有横纵坐标
  //自调用函数
  (function () {
   var element = []; //用来保存每个小方块食物的
   function Food(x, y, width, height, color) {
    this.x = x || 0;
    this.y = y || 0;
    this.width = width || 20;
    this.height = height || 20;
    this.color = color || "green";
   }

   //为原型添加初始化的方法(作用:在页面上显示这个食物)
   //因为食物要在地图上显示,所以,需要地图的这个参数(map--就是页面上的.class=map的这个div)
   Food.prototype.init = function (map) {
    //先删除这个小食物
    //外部无法访问,此函数在自调用函数里面
    remove();
    //创建div
    var div = document.createElement("div");
    //把div加到map里面
    map.appendChild(div);
    //获取div的样式
    div.style.width = this.width + "px";
    div.style.height = this.height + "px";
    div.style.backgroundColor = this.color;
    //脱离文档流
    div.style.position = "absolute";
    //横纵坐标先停止----随机产生
    this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
    this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
    div.style.left = this.x + "px";
    div.style.top = this.y + "px";

    //把div加入element数组中
    element.push(div);

    //改变食物的样式---改成自己喜欢的东西
    div.style.backgroundImage = "url(" + "../images/shi.png" + ")";
    div.style.backgroundRepeat = "no-repaet";
    div.style.backgroundSize = "cover";
   };

   //私有函数
   function remove() {
    for (var i = 0; i < element.length; i++) {
     var ele = element[i];
     //找到这个子元素的父级元素,然后删除这个子元素
     ele.parentNode.removeChild(ele);
     //再次把element中的这个子元素删除
     element.splice(i, 1);
    }
   }

   //把Food暴露给window,外部可以使用
   window.Food = Food;
  }());

  //自调用函数---小蛇
  (function () {
   //存放小蛇的每个身体部分
   var element = [];
   //小蛇的构造函数
   function Snake(width, height, driection) {
    this.width = width || 20;
    this.height = height || 20;
    //小蛇的身体
    this.body = [{
      x: 3,
      y: 2,
      color: "red"
     },
     {
      x: 2,
      y: 2,
      color: "orange"
     },
     {
      x: 1,
      y: 2,
      color: "orange"
     }
    ];
    //方向
    this.driection = driection || "right";
   }

   //为原型添加方法---小蛇初始化的方法
   Snake.prototype.init = function (map) {
    //先删除之前的小蛇
    remove();
    //循环遍历创建div
    for (var i = 0; i < this.body.length; i++) {
     //数组中的每个数组元素都是一个对象
     var obj = this.body[i];
     //创建div
     var div = document.createElement("div");
     //把div加入地图map中
     map.appendChild(div);
     //设置div的样式
     div.style.position = "absolute";
     div.style.width = this.width + "px";
     div.style.height = this.height + "px";
     //横纵坐标
     div.style.left = obj.x * this.width + "px";
     div.style.top = obj.y * this.height + "px";
     //背景颜色
     div.style.backgroundColor = obj.color;
     //方向还没定

     //把div加入到element数组中---目的是为了删除
     //把div加入数组中

     element.push(div);
     //更改头部的----变成图片
     if (i == 0) {
      div.style.backgroundImage = "url(" + "../images/tou_03.png" + ")";
      div.style.backgroundRepeat = "no-repaet";
      div.style.backgroundSize = "cover";
     }
     //更改尾巴的样式照片
     if (i != 0) {
      div.style.backgroundImage = "url(" + "../images/shi.png" + ")";
      div.style.backgroundRepeat = "no-repaet";
      div.style.backgroundSize = "cover";
     }
    }
   };

   //为原型添加方法---小蛇动起来
   Snake.prototype.move = function (food, map) {
    var i = this.body.length - 1;
    for (; i > 0; i--) {
     this.body[i].x = this.body[i - 1].x;
     this.body[i].y = this.body[i - 1].y;
    }
    //判断方向---改变小蛇的头的坐标位置
    switch (this.driection) {
     case "left":
      this.body[0].x -= 1;
      break;
     case "right":
      this.body[0].x += 1;
      break;
     case "top":
      this.body[0].y -= 1;
      break;
     case "bottom":
      this.body[0].y += 1;
      break;
    }

    //判断有没有吃到食物
    //小蛇的头的坐标和食物的坐标一致
    var headX = this.body[0].x * this.width;
    var headY = this.body[0].y * this.height;
    //判断小蛇的头和食物坐标是否相同
    if (headX == food.x && headY == food.y) {
     //获取小蛇的最后的尾巴
     var last = this.body[this.body.length - 1];
     //把最后的蛇尾复制一个,重新的加入到小蛇的body中
     this.body.push({
      x: last.x,
      y: last.y,
      color: last.color
     });
     //把食物删除,重新初始化食物
     food.init(map);
    }
   };

   //删除小蛇的私有函数
   function remove() {
    //获取数组
    var i = element.length - 1;
    for (; i >= 0; i--) {
     var ele = element[i];
     //从map地图上删除这个子元素div
     ele.parentNode.removeChild(ele);
     element.splice(i, 1);
    }
   }

   window.Snake = Snake;
  }());

  //自调用函数---游戏对象
  (function () {
   var that = null;
   //游戏的构造函数
   function game(map) {
    this.food = new Food(); //食物对象
    this.snake = new Snake(); //小蛇对象
    this.map = map; //地图
    that = this;
   }

   game.prototype.init = function () {
    //初始化游戏
    //食物初始化
    this.food.init(this.map);
    //小蛇初始化
    this.snake.init(this.map);
    that = this;
    document.getElementById("dv").onclick = function () {
     document.getElementById("dv").style.display = "none";
     //调用小蛇移动的方法
     that.runSnake(that.food, that.map);
     //调用按键的方法
     that.bindKey();
    }.bind(that);

   };
   //添加原型方法---设置小蛇可以自动跑起来
   game.prototype.runSnake = function (food, map) {
    //自动的去移动
    var time = 90;
    var fn = function () {
     //此时this是window
     //移动小蛇
     this.snake.move(food, map);
     //初始化小蛇
     this.snake.init(map);
     //横坐标的最大值
     var maxX = map.offsetWidth / this.snake.width;
     //纵坐标的最大值
     var maxY = map.offsetHeight / this.snake.height;
     //小蛇的头的坐标
     var headX = this.snake.body[0].x;
     var headY = this.snake.body[0].y;
     //判断 横坐标 有没撞墙
     if (headX < 0 || headX >= maxX) {
      //撞墙停止定时器
      clearInterval(timeId);
      alert("游戏结束");
      location.reload();
     }
     //判断 纵坐标 有没撞墙
     if (headY < 0 || headY >= maxY) {
      clearInterval(timeId);
      alert("游戏结束");
      location.reload();
     }
     //判断 小蛇的头部 有没有 撞到自己
     for (let i = 1; i < this.snake.body.length; i++) {
      let x = this.snake.body[i].x;
      let y = this.snake.body[i].y;
      if (headX === x && headY === y) {
       clearInterval(timeId);
       alert("游戏结束");
       location.reload();
      }
     }
     //增加游戏难度,判断 到达一定数量的时候 加速
     switch (true) {
      case 5 <= this.snake.body.length && this.snake.body.length <= 10:
       clearInterval(timeId);
       time = 60;
       timeId = setInterval(fn, time);
       break;
      case 10 <= this.snake.body.length && this.snake.body.length <= 15:
       clearInterval(timeId);
       time = 40;
       timeId = setInterval(fn, time);
       break;
      case 15 <= this.snake.body.length:
       clearInterval(timeId);
       time = 30;
       timeId = setInterval(fn, time);
       break;
     }
     console.log(this.snake.body.length + "--" + "time:" + time);
    }.bind(that);
    //定时器小蛇自运动
    var timeId = setInterval(fn, time);
   };
   //添加原型方法---设置用户按键,改变小蛇移动的方向
   game.prototype.bindKey = function () {
    //获取用户的按键,改变小蛇的移动方向
    document.addEventListener("keydown", function (e) {
     //获取按键的值并进行判断是,改变小蛇移动的方向
     switch (e.keyCode) {
      //没有bind方法时此时的this指向的是documen
      case 37:
       if (this.snake.driection != "right") {
        this.snake.driection = "left";
       }
       break;
      case 38:
       if (this.snake.driection != "bottom") {
        this.snake.driection = "top";
       }
       break;
      case 39:
       if (this.snake.driection != "left") {
        this.snake.driection = "right";
       }
       break;
      case 40:
       if (this.snake.driection != "top") {
        this.snake.driection = "bottom";
       }
       break;
     }
    }.bind(that), false);
   };

   //把game暴露给window,外部就可以访问game对象
   window.game = game;
  }());

  //初始化游戏对象
  var gm = new game(document.querySelector(".map"));
  //初始化游戏---开始游戏
  gm.init();

 </script>
</body>

</html>

我已经尽量给以上代码注上注释。希望能帮到更多朋友更好的理解贪食蛇游戏的实现思路！

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。