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动态绑定事件的简单实现代码
Dec 25 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
Vue封装全局过滤器Filters的步骤
Sep 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具体实现代码
2010/10/12 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Django开发中的日志输出的方法
2018/07/02 Python
详解Python正则表达式re模块
2019/03/19 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
《逃家小兔》教学反思
2014/02/23 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
导游词之山东八大关
2019/12/18 职场文书