基于javascript实现贪吃蛇小游戏


Posted in Javascript onNovember 25, 2019

本文实例为大家分享了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经典小游戏汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Express框架之connect-flash详解
May 31 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
JavaScript This指向问题详解
Nov 25 #Javascript
简单了解JavaScript sort方法
Nov 25 #Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 #Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 #Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
You might like
php正则
2006/07/07 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php图片添加水印例子
2016/07/20 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
一端时间轮换的广告
2006/06/26 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
个人道歉信大全
2019/04/11 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB