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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
jquery实现心算练习代码
Dec 06 Javascript
js 窗口抖动示例
Sep 04 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
ES6 Generator函数的应用实例分析
Jun 26 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
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中的函数嵌套层数限制分析
2011/06/13 PHP
浅析php原型模式
2014/11/25 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS之相等操作符详解
2016/09/13 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python接口自动化测试的实现
2020/08/28 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
大课间体育活动方案
2014/03/12 职场文书
委托书模板
2014/04/04 职场文书
理想演讲稿范文
2014/05/21 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
刑事起诉书范文
2015/05/19 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL