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 datepicker 使用方法
May 20 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
谈一谈javascript闭包
Jan 28 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python中下划线的使用方法
2015/03/27 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python如何基于redis实现ip代理池
2020/01/17 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
大学生考试作弊被抓检讨书
2014/12/27 职场文书
小学运动会通讯稿
2015/07/18 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
警用民用对讲机找不同
2022/02/18 无线电