JavaScript实现简单贪吃蛇效果


Posted in Javascript onMarch 09, 2020

本文实例为大家分享了js实现简单贪吃蛇效果的具体代码,供大家参考,具体内容如下

上代码之前,先给大家看一下效果:

JavaScript实现简单贪吃蛇效果

是不是想说:我能这样玩一天…

话不多说,代码如下:

<script>
 class Map{
 constructor(){
  // 提前设定将来的地图的样式数据
  this.w = 450;
  this.h = 250;
  this.c = "#DDD";
  // 执行创建地图方法
  this.createEle();
 }
 createEle(){
  this.mapEle = document.createElement("div");
  this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:100px auto;position:relative;border:solid 10px #AAA;`;
  document.body.appendChild(this.mapEle);
 }
 }
 class Food{
 constructor(){
  // 提前设定将来的食物的样式数据
  this.w = 10;
  this.h = 10;
  this.c = "red";
  this.x = 0;
  this.y = 0;
  // 执行创建食物方法
  this.createEle();
 }
 createEle(){
  this.foodEle = document.createElement("div");
  this.foodEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute;left:${this.x * this.w}px;top:${this.y * this.h}px;border-radius:10px`;
  m.mapEle.appendChild(this.foodEle);
 }
 randomPos(){
  // 随机位置,随机产生的是格子的位置,不是真正的像素
  this.x = random(0,(m.w-this.w) / this.w);
  this.y = random(0,(m.h-this.h) / this.h);
  // 设置位置时,要换算成像素,然后再生效
  this.foodEle.style.left = this.x * this.w + "px";
  this.foodEle.style.top = this.y * this.h + "px";
 }
 }
 class Snake{
 constructor(){
  // 提前设定将来的蛇节的样式数据
  this.w = 10;
  this.h = 10;
  // 因为蛇由多个设计组成,每个蛇节都有自己的独立信息,所以数据结构设计成如下格式
  this.body = [{
  ele:null,
  x:4,
  y:3,
  c:randomColor()
  },{
  ele:null,
  x:3,
  y:3,
  c:randomColor()
  },{
  ele:null,
  x:2,
  y:3,
  c:randomColor()
  }];
  // 提前设置默认方向
  this.d = "right";

  // 开始创建蛇节元素,设置样式
  this.createEle();
 }
 createEle(){
  // 使用循环多次创建,因为有多个蛇节
  for(var i=0;i<this.body.length;i++){
  // 创建之前,需要判断元素是否已经存在,如果已经存在,不需要创建
  if(!this.body[i].ele){
   this.body[i].ele = document.createElement("div");
   m.mapEle.appendChild(this.body[i].ele);
  }
  this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.body[i].c};position:absolute;left:${this.body[i].x * this.w}px;top:${this.body[i].y * this.h}px;border-radius: 10px`;
  }

  // 延迟之后,开始移动
  setTimeout(()=>{
  this.move();
  },200);
 }
 move(){
  // 从最后一个元素向前找前一个元素的坐标,直到第一个
  for(var i=this.body.length-1; i>0; i--){
  this.body[i].x = this.body[i-1].x;
  this.body[i].y = this.body[i-1].y;
  }
  // 第一个元素根据默认方向,决定想哪走
  switch(this.d){
  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;
  } 
  // 移动过程中,判断是否撞到边界,任意一个边界都不行
  if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > ((m.w-this.w) / this.w) || this.body[0].y > ((m.h-this.h) / this.h)){
  alert("撞墙了");
  return;
  }
  // 移动过程中,判断是否与食物的坐标重复,如果重复
  if(this.body[0].x === f.x && this.body[0].y === f.y){
  // 给蛇增加一个蛇节
  this.body.push({
   ele:null,
   x:this.body[this.body.length-1].x,
   y:this.body[this.body.length-1].y,
   c:randomColor()
  })
  // 刷新食物的坐标
  f.randomPos();
  }

  // 移动过程中,判断蛇头的坐标是否与某个任意一个蛇节的坐标重复
  for(var i=1;i<this.body.length;i++){
  if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
   // 如果重复,撞到自己,结束程序
   alert("撞到自己了");
   return;
  }
  }
  this.createEle();
 }
 direct(type){
  switch(type){
  case 37:
   if(this.d === "right") break;
   this.d = "left";
   break;
  case 38:
   if(this.d === "bottom") break;
   this.d = "top";
   break;
  case 39:
   if(this.d === "left") break;
   this.d = "right";
   break;
  case 40:
   if(this.d === "top") break;
   this.d = "bottom";
   break;
  }
 }
 }

 function random(a,b){
 return Math.round(Math.random()*(a-b)+b)
 }
 function randomColor(){
 return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
 }

 var m = new Map();
 
 var f = new Food();
 f.randomPos();
 var s = new Snake();
 // 当按下键盘时,将按下的键盘的code值,传给蛇的专属处理方法
 document.onkeydown = function(eve){
 var e = eve || window.event;
 var code = e.keyCode || e.which;
 s.direct(code);
 }
</script>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

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

Javascript 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
vue.js实现简单购物车功能
May 30 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
原生js无缝轮播插件使用详解
Mar 09 #Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 #Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
You might like
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python的多态性实例分析
2015/07/07 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Python页面加载的等待方式总结
2021/02/28 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
群胜软件Java笔试题
2012/09/29 面试题
应届生会计电算化求职信
2013/10/03 职场文书
五一活动标语
2014/06/30 职场文书
污水处理保证书
2015/05/09 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
鉴史问廉观后感
2015/06/10 职场文书
生产设备维护保养制度
2015/08/06 职场文书
2016年党建工作简报
2015/11/26 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
七年级英语教学反思
2016/02/15 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android