原生JS实现贪吃蛇小游戏


Posted in Javascript onMarch 09, 2020

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下

思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束。

HTML结构:

<body>
 <div id="map"></div>
</body>

CSS样式:

<style>
 #map{
  width: 600px;
  height: 300px;
  background: #ccc;
  border: 5px solid blacks;
  margin: 0 auto;
  position: relative;}
</style>

js实现功能:

<script>
 class Map{ //地图
  constructor(){
   this.mapEle = document.getElementById("map");
   this.w = this.mapEle.offsetWidth;
   this.h = this.mapEle.offsetHeight;
  }
 }
 class Food{ //食物
  constructor(){
   this.w = 20;
   this.h = 20;
   this.x = 0;
   this.y = 0;
   this.c = "orange";
   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: 40%;`;
   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 = 20;
   this.h = 20;
   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;color:#fff;border-radius: 40%;`;
   }
   this.body[0].ele.innerHTML = "00"
   setTimeout(()=>{this.move()},300);
  }
  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();
 document.onkeydown = function(eve){
  var e = eve || window.event;
  var code = e.keyCode || e.which;
  s.direct(code);
 }
</script>

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

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

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
jQuery实现全选按钮
Jan 01 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
Vue vm.$attrs使用场景详解
Mar 08 #Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
js跑马灯代码(自写)
2013/04/17 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
javascript中的隐式调用
2018/02/10 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
名片管理系统python版
2018/01/11 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python 中的lambda函数介绍
2018/10/10 Python
python3 爬取图片的实例代码
2018/11/06 Python
python语言元素知识点详解
2019/05/15 Python
Python: glob匹配文件的操作
2020/12/11 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL