原生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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
JavaScript中window和document用法详解
Jul 28 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
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js实现分割上传大文件
2016/03/09 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python实现画图软件功能方法详解
2020/07/28 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
劳资员岗位职责
2015/02/13 职场文书
三八妇女节寄语
2015/02/27 职场文书
2016高考感言
2015/08/01 职场文书