原生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 表单规则集合对象
Jul 21 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 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版
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
Python标准库与第三方库详解
2014/07/22 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python subprocess模块详细解读
2018/01/29 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python读取stdin方法实例
2019/05/24 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
项目专员岗位职责
2013/12/04 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
中学生学习保证书
2015/02/26 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
生日祝酒词大全
2015/08/10 职场文书