用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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
Js切换功能的简单方法
Nov 23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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 批量删除数据的方法分析
2009/10/30 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
angular 服务随记小结
2019/05/06 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
试用期辞职信范文
2015/03/02 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
学校证明范文
2015/06/24 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书