js实现经典贪吃蛇小游戏


Posted in Javascript onMarch 19, 2020

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

<script>
  
  class Map{
    constructor(){
      this.w = 800;
      this.h = 400;
      this.c = "#ccc";
      this.createEle();
    }
    createEle(){
      this.mapEle = document.createElement("div");
      this.mapEle.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};margin:0 auto;position:relative;border:solid 10px black;`;
      document.body.appendChild(this.mapEle);
    }
  }
  class Food{
    constructor(){
      this.w = 20;
      this.h = 20;
      this.c = "red";
      this.x = 0;
      this.y = 0;
      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;`;
      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;`;
      }
      this.body[0].ele.innerHTML = "0";
 
      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>

js实现经典贪吃蛇小游戏

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

Javascript 相关文章推荐
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 #Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 #Javascript
JavaScript正则表达式验证登录实例
Mar 18 #Javascript
JS正则表达式验证密码强度
Mar 18 #Javascript
You might like
PHP 批量删除数据的方法分析
2009/10/30 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php删除指定目录的方法
2015/04/03 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
写的htc的数据表格
2007/01/20 Javascript
js 深拷贝函数
2008/12/04 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
python实现多线程端口扫描
2019/08/31 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python里面如何实现tuple和list的转换
2012/06/13 面试题
2014年创卫实施方案
2014/02/18 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2016年元旦致辞
2015/08/01 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python