用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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
读懂CommonJS的模块加载
Apr 19 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
银行求职自荐书
2014/06/25 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏