js实现简单的贪吃蛇游戏


Posted in Javascript onApril 23, 2020

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

运行截图:

js实现简单的贪吃蛇游戏

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇小游戏</title>
 
  <style>
    body {
      margin:0px;
      padding:0px;
 
    }
 
    #main {
      margin:100px;
    }
 
    .btn {
      width:100px;
      height:40px;
    }
 
    .gtitle {
      font-size:25px;
      font-weight: bold;
 
    }
 
    #gnum {
      color:red;
    }
  </style>
</head>
 
<body>
 
<div id="main">
  <h1>贪吃蛇</h1>
  <input class="btn" type="button" value="开始游戏" id="begin" />
  <input class="btn" type="button" value="暂停游戏" id="pause" />
  <span class="gtitle">第 <span id="gnum">1</span> 关</span>
 
  <script>
    var main = document.getElementById('main');
    var showcanvas = true; //是否开启画布格子
    /**
     * 地图对象的构造方法
     * @param atom 原子大小宽和高是一样的 10
     * @param xnum 横向原子的数量
     * @param ynum 纵向原子的数量
     * @constructor
     */
    function Map(atom, xnum, ynum){
      this.atom = atom; // 20x20
      this.xnum = xnum; //
      this.ynum = ynum;
 
      this.canvas = null;
 
      //创建画布的方法
      this.create = function(){
        this.canvas = document.createElement('div');
        this.canvas.style.cssText="position:relative;top:40px;border:1px solid darkred; background:#FAFAFA";
        this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽
        this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的高
        main.appendChild(this.canvas);
 
        if(showcanvas) {
          for(var y=0; y<ynum; y++) {
            for (var x = 0; x < xnum; x++) {
              var a = document.createElement('div');
              a.style.cssText = "border:1px solid yellow";
              a.style.width = this.atom + 'px';
              a.style.height = this.atom + 'px';
              a.style.backgroundColor = "LightSkyBlue";
              this.canvas.appendChild(a);
              a.style.position = 'absolute';
              a.style.left = x * this.atom + 'px';
              a.style.top = y*this.atom+'px';
            }
          }
        }
 
      }
 
    }
 
    /**
     * 创建食物的构造方法
     * @param map 地图对象
     * @constructor
     */
    function Food(map){
      this.width = map.atom;
      this.height = map.atom;
      this.bgcolor= "rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
      this.x = Math.floor(Math.random()*map.xnum);
      this.y = Math.floor(Math.random()*map.ynum);
      this.flag = document.createElement('div');
      this.flag.style.width = this.width + 'px';
      this.flag.style.height = this.height + 'px';
      this.flag.style.backgroundColor = this.bgcolor;
      // this.flag.style.borderRadius = '50%';
      this.flag.style.position = 'absolute';
      this.flag.style.left = this.x * this.width +'px';
      this.flag.style.top = this.y * this.height + 'px';
 
      map.canvas.appendChild(this.flag);
    }
    function Snake(map) {
      //设置宽,高
      this.width=map.atom;
      this.height = map.atom;
      //默认走的方向
      this.direction = 'right';
 
      this.body = [
        {x:2, y:0}, //蛇头, 第一点 0
        {x:1, y:0}, //蛇脖子, 第二点 1
        {x:0, y:0} //蛇尾, 第三点  2
        //{x:null, y:null, flag:null} 3
      ];
      //显示蛇
      this.display = function(){
        for(var i=0; i<this.body.length; i++){
          if(this.body[i].x !=null) { //当吃到食物时, x==null, 不能新建, 不然会在0,0处理新建一个
            var s = document.createElement('div');
            // 将节点保存到一个状态变量中, 以便以后删除使用
            this.body[i].flag = s;
 
            //设置蛇的样式
            s.style.width = this.width + 'px';
            s.style.height = this.height + 'px';
            s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
            //s.style.borderRadius = '50%';
            //设置位置
            s.style.position = 'absolute';
            s.style.left = this.body[i].x * this.width + 'px';
            s.style.top = this.body[i].y * this.height + 'px';
            //添加到地图中
            map.canvas.appendChild(s);
          }
 
        }
      }
      //让蛇运动起来
      this.run = function() {
 
        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;
        }
        //默认是right left up down
        // 根据方向处理蛇头
        switch(this.direction) {
           case "left": this.body[0].x -=1; break;
           case "right": this.body[0].x +=1;break;
           case "up": this.body[0].y -=1; break;
           case "down": this.body[0].y +=1; break;
        }
 
        //判断蛇头吃到食物, xy和食物的XY重合
        if(this.body[0].x ==food.x && this.body[0].y == food.y ){
          //蛇加一节, 根据最后节点定
          this.body.push({x:null, y:null, flag:null});
 
          //判读一下设置级别
          if(this.body.length > l.slength) {
            l.set();
          }
 
          map.canvas.removeChild(food.flag);
          food = new Food(map);
 
        }
        //判断是否出界, 蛇头
        if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) {
          clearInterval(timer); //清除定时器
 
          alert("怎么这么不小心撞墙了呢,摸摸头");
 
          //重新开始游戏
          restart(map, this)
 
          return false;
        }
 
        //判读是否和自己重合
        for(var i=4; i<this.body.length; i++){
          if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
            clearInterval(timer); //清除定时器
 
            alert("呀,怎么喜欢咬自己的肉肉");
 
            //重新开始游戏
            restart(map, this)
 
            return false;
          }
 
        }        
 
        for(var i=0; i<this.body.length; i++){
          if(this.body[i].flag != null) { //当吃到食物, flag是等null, 且不能删除
            map.canvas.removeChild(this.body[i].flag)
          }
        }
 
        this.display();
      }
 
    }
    //重新开始游戏
    function restart(map, snake) {
      for(var i=0; i<snake.body.length; i++) {
        map.canvas.removeChild(snake.body[i].flag);
      }
 
      snake.body = [
        {x:2, y:0}, //蛇头, 第一点 0
        {x:1, y:0}, //蛇脖子, 第二点 1
        {x:0, y:0} //蛇尾, 第三点  2
 
      ];
      snake.direction = 'right';
      snake.display();
      map.canvas.removeChild(food.flag);
      food = new Food(map);
 
    }
    //设置级别对象
    function Level() {
      this.num = 1; //第几级别
      this.speed= 300; //毫秒, 每升一关, 数量减少20, 速度就加快了
      this.slength = 8; //每个关的长度判断
 
      this.set = function() {
        this.num++;
        if(this.speed <= 50) {
          this.speed = 50;
        }else{
          this.speed -=50;
        }
        this.slength += 10; //这个可以自己定义
        this.display();
        start(); //重新开始, 速度加快
      }
 
      this.display = function() {
        document.getElementById('gnum').innerHTML = this.num;
      }
    }
    var l = new Level();
    l.display();
 
    //创建地图对象
    var map = new Map(20, 40, 20);
    map.create(); //显示画布
 
    //构造食物对象
    var food = new Food(map);
 
    //构造蛇对象
    var snake = new Snake(map);
    snake.display();
 
    // 组body加键盘事件, 上下左右
    window.onkeydown = function(e){
      var event = e || window.event;
 
      // console.log(event.keyCode);
 
      switch(event.keyCode) {
        case 38:
          if(snake.direction != "down") {
            snake.direction = "up";
          }
          break;
        case 40:
          if(snake.direction != "up") {
            snake.direction = "down";
          }
          break;
        case 37:
          if(snake.direction != "right") {
            snake.direction = "left";
          }
          break;
        case 39:
          if(snake.direction != "left") {
            snake.direction = "right";
          }
          break;
      }
    }
 
    var timer; //变量可以提升
 
    function start() {
      clearInterval(timer);
      timer = setInterval(function(){
        snake.run();
      },l.speed);
    }
 
    document.getElementById('begin').onclick=function(){
      start();
    }
 
    document.getElementById('pause').onclick=function() {
      clearInterval(timer);
    }
  </script>
</div>
 
</body>
</html>

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

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

Javascript 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
使用console进行性能测试
Apr 27 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
You might like
php xml 入门学习资料
2011/01/01 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python基于SMTP协议发送邮件
2019/05/31 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
校园安全演讲稿
2014/05/09 职场文书
机械操作工岗位职责
2014/08/08 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android