用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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JS中判断null的方法分析
Nov 21 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JavaScript门面模式详解
Oct 19 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
js实现鼠标跟随运动效果
2020/08/02 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
用python制作个视频下载器
2021/02/01 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
工作人员思想汇报
2014/01/09 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
个人催款函范文
2015/06/24 职场文书
门面租赁合同范文
2019/08/06 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏