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之对系统的toFixed()方法的修正
May 08 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jquery键盘事件介绍
Jan 31 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
深入PHP curl参数的详解
2013/06/17 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP 实现链式操作
2021/03/09 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Puppet的一些技巧
2018/09/17 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python3实现elasticsearch批量更新数据
2019/12/03 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
高中班长自我鉴定
2013/12/20 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
初婚初育证明
2014/01/14 职场文书
青年文明号复核材料
2014/02/11 职场文书
实习公司领导推荐函
2014/05/21 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
关于做家务的心得体会
2016/01/23 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python