极乐门资源网

基于javascript实现贪吃蛇小游戏
网络编程 2024/12/25 佚名
2 0
极乐门资源网 Design By www.ioogu.com

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

先不多说先上图

基于javascript实现贪吃蛇小游戏

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

<!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经典小游戏汇总

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

标签：
js,贪吃蛇
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“基于javascript实现贪吃蛇小游戏”

暂无基于javascript实现贪吃蛇小游戏的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com