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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
js弹出对话框方式小结
Nov 17 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 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 中的一些经验积累
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python遍历目录的方法小结
2016/04/28 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python 元组的使用方法
2020/06/09 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
如何获得EntityManager
2014/02/09 面试题
教师节促销活动方案
2014/02/14 职场文书
学习演讲稿范文
2014/05/10 职场文书
初中同学会活动方案
2014/08/22 职场文书
党章培训心得体会
2014/09/04 职场文书
廉政承诺书
2015/01/19 职场文书
爱心捐书倡议书
2015/04/27 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python