用JavaScript实现贪吃蛇游戏


Posted in Javascript onOctober 23, 2020

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

地图

地图:宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的,这里小蛇和食物都是地图的子元素,随机位置显示,脱离文档流的,地图也需要脱离文档流relative,----css需要设置:宽,高,背景颜色,脱标

食物—div元素

elements---->存储div的数组(将来删除的食物div时候,先从map中删除div,再从数组中移除div)
食物:宽,高,背景颜色,横坐标,纵坐标
一个食物就是一个对象,这个对象有相应的属性,这个对象需要在地图上显示
最终要创建食物的对象,先有构造函数,并且把相应的值作为参数传入到构造函数中
食物要想显示在地图上,食物的初始化就是一个行为

1、食物的构造函数—>创建食物对象
2、食物的显示的方法—>通过对象调用方法,显示食物,设置相应的样式
2.1.1 因为食物要被小蛇吃掉,吃掉后应该再次出现食物,原来的食物就删除了
2.1.2 每一次初始化食物的时候先删除原来的食物,然后重新的初始化食物
2.1.3 通过一个私有的函数(外面不能调用的函数)删除地图上的食物,同时最开始的食物也相应的保存到一个数组中,再从这个数组中把食物删除

小蛇

小蛇就是一个对象
属性:每个身体都有宽、高、方向
属性:身体分三个部分,每个部分都是一个对象,每个部分都有横纵坐标,背景颜色
方法:小蛇要想显示在地图上,先删除之前的小蛇,然后再初始化小蛇(小蛇要移动)
移动思路:把小蛇的头的坐标给小蛇第一部分的身体,第一部分的身体的坐标给下一个部分身体小蛇的头,需要单独的设置:方向

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .map {
  width: 800px;
  height: 600px;
  background-color: #ccc;
  position: relative;
 }
 </style>
</head>
<body>
<div class="map"></div>
<script src="贪吃蛇案例.js"></script>
</body>
</html>

js

//自调用函数--食物
(function () {
 var elements = [];//用来保存每个小方块元素
 //创建小方块对象,需要先构造函数 小方块有宽高颜色 横纵坐标属性
 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.appendChild(div);
 //设置div的样式
 div.style.width = this.width + 'px';
 div.style.height = this.height + 'px';
 div.style.backgroundColor = this.color;
 //横纵坐标需要随机产生 在这先停止
 //使div小方块脱离文档流
 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加到数组elements中
 elements.push(div);
 };

 //私有的函数---删除食物
 function remove() {
 for (var i = 0; i < elements.length; i++) {
  var ele = elements[i];
  //找到子元素的父元素,删除这个子元素
  ele.parentNode.removeChild(ele);
  // 再次把elements中的子元素删除
  elements.splice(0, 1);//从0位置开始删除1个
 }
 }

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

//自调用函数--小蛇
(function () {
 //放小蛇的每个部分
 var elements = [];

 //创建小蛇的构造函数
 function Snake(width, height, direction) {
 //小蛇每个部分的宽和高
 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.direction = direction || '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.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;
  //把小蛇每部分加到数组中
  elements.push(div);
  }
 };

 //为小蛇添加原型方法使小蛇移动
 Snake.prototype.move = function (food, map) {
  //先改变小蛇身体移动的位置
  var i = this.body.length - 1;//2
  for (; i > 0; i--) {
  //i>0 就不包括头部
  this.body[i].x = this.body[i - 1].x;//让第三部分身体的横坐标等于第二部分身体的横坐标
  this.body[i].y = this.body[i - 1].y;//让第三部分身体的纵坐标等于第二部分身体的纵坐标
  }
  //判断方向--改变小蛇头部的方向
  switch (this.direction) {
  case 'right':
   this.body[0].x += 1;
   break;
  case 'left':
   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 = elements.length - 1;
  for (; i >= 0; i--) {
  //先从当前的子元素中找到该元素的父即元素,然后在删除这个子元素 (i>=0因为包括头部)
  var ele = elements[i];
  //从map地图上删除这个子元素
  ele.parentNode.removeChild(ele);
  //再删除数组中的每个元素
  elements.splice(i, 1);
  }
 }
 }

 //把Snake暴露给window
 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);//初始化小蛇
 //调用自动移动小蛇的方法
 this.runSnake(this.food, this.map);
 //小蛇移动后调用键盘方法
 this.bindKey();
 };

 //原型对象添加小蛇自动移动的方法
 Game.prototype.runSnake = function (food, map) {
 //自动的去移动
 //这里的this指向window
 var timeID = setInterval(function () {
  //移动小蛇
  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('游戏结束')
  }
  if (headY < 0 || headY >= maxY) {
  clearInterval(timeID);
  alert('游戏结束')
  }
 }.bind(that), 150)
 };

 //原型对象--设置用户按键,是小蛇方向改变
 Game.prototype.bindKey=function(){
 //获取用户的按键,改变小蛇的方向
 document.addEventListener('keydown',function(e){
  //这里的this应该是触发keydown的事件对象---document
  //所以这里的this指的是document
  switch(e.keyCode){
  case 37:this.snake.direction='left';break;
  case 38:this.snake.direction='top';break;
  case 39:this.snake.direction='right';break;
  case 40:this.snake.direction='bottom';break;
  }
 }.bind(that),false)
 };

 window.Game = Game;
}());

//实例化游戏对象
var gm = new Game(document.querySelector('.map'));
//初始化开始游戏
gm.init();


//实例化食物对象
// var fd = new Food();
// var map = document.querySelector('.map');
// fd.init(map);
// //实例化小蛇对象
// var snake = new Snake();
// snake.init(map);//先在地图上看到小蛇
// setInterval(function () {
// snake.init(map);
// snake.move(fd, map);
// }, 150);

// snake.init(map);//先在地图上看到小蛇
// snake.move(fd,map);//走一步
// snake.init(map);//初始化--重新画一条小蛇(把之前的小蛇先删除,再把现在得小蛇显示出来)

更多有趣的经典小游戏实现专题,分享给大家:

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

Javascript 相关文章推荐
JavaScript中的方法重载实例
Mar 16 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
基于JavaScript实现选项卡效果
Jul 21 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
You might like
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python使用mysql的两种使用方式
2018/03/07 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
枚举与#define宏的区别
2014/04/30 面试题
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
如何理解及使用Python闭包
2021/06/01 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android