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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php异常处理使用示例
2014/02/25 PHP
php抽象类用法实例分析
2015/07/07 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
工程现场管理求职自荐信
2013/10/02 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
辞职信格式范文
2015/05/13 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Python学习之os包使用教程详解
2022/03/21 Python