原生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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
使用Vue生成动态表单
Nov 26 Javascript
vue实现购物车结算功能
Jun 18 Javascript
微信小程序 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php读取der格式证书乱码解决方法
2015/06/22 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python extract及contains方法代码实例
2020/09/11 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
新闻编辑自荐书范文
2014/02/12 职场文书
通知格式
2015/04/27 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
小学生暑假安全公约
2015/07/14 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
PHP RabbitMQ消息列队
2022/05/11 PHP