原生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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Vue的props父传子的示例代码
May 20 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php flush类输出缓冲剖析
2008/10/19 PHP
php常量详细解析
2015/10/27 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php之可变函数的实例详解
2017/09/13 PHP
用javascript操作xml
2006/11/04 Javascript
javascript实现轮显新闻标题链接
2007/08/13 Javascript
javascript引导程序
2008/10/26 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
django删除表重建的实现方法
2019/08/28 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python中如何使用insert函数
2020/01/09 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
技术总监的工作职责
2013/11/13 职场文书
经理秘书岗位职责
2013/11/14 职场文书
2014年新生军训方案
2014/05/01 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
运动会表扬稿范文
2015/05/05 职场文书
交通事故代理词范文
2015/05/23 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android