首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于JavaScript实现简单扫雷游戏

Posted in Javascript onJanuary 02, 2021

对于10年前的人来说，扫雷肯定是家喻户晓，由于当时的科技并不是很发达，大家对于电脑游戏的了解，可能都是从扫雷开始的，今天就交大家一种用js原生代码写一个简单的扫雷游戏，话不多说，直接上干货：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  li{
   list-style: none;
  }
  .box{
   border: 1px solid #666;
   position: fixed;
   width: 300px;
   height: 350px;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
  }
  .btn-group{
   display: flex;
   height: 50px;
   line-height: 50px;
   text-align: center;
   justify-content: space-evenly;
   font-size: 12px;
  }
  .row{
   height: 30px;
   line-height: 30px;
   text-align: center;
   display: flex;
  }
  .col{
   flex-shrink: 0;
   /* flex-shrink 是否允许缩小 */
   flex-grow: 0;
   /* flex-grow 是否允许放大 */
   width: 30px;
   height: 30px;
   border: 1px solid #666;
   background-color: #ccc;
   box-sizing: border-box;
  }
 </style>
</head>
<body>
 <div class="box">
  <div class="qipan">
  </div>
  <div class="btn-group">
   <div class="btn-item">
    <span class="item-name">时间</span>
    <span class="item-value passTime">000</span>
   </div>
   <div class="btn-item">
    <span class="item-name">剩余雷数</span>
    <span class="item-value leftLei">10</span>
   </div>
   <div class="btn-item">
    <select class="level">
     <option value="1">初级</option>
     <option value="2">中级</option>
     <option value="3">高级</option>
    </select>
   </div>
   <div class="btn-item">
    <span class="start">开始</span>
    <span class="restart">重开</span>
   </div>
  </div>
 </div>
 <script>
  function $(s,t){
   if(t == 'l'){
    return document.querySelectorAll(s)
   }else{
    return document.querySelector(s)
   }
  }
  var qipan = $('.qipan'),
    box = $('.box'),
    level = $('.level'),
    leftLei = $('.leftLei'),
    start = $('.start'),
    restart = $('.restart'),
    passTime = $('.passTime')
    ;
  var row = 10,// 行数
    col = 10,// 列数
    leiNum = 10,// 雷数
    restNum = 10,//剩余的雷数
    flag = false,// 格子是否可以被点击
    time,//计时器的名字
    count = 0,// 计时的秒数
    leiList = [],// 用来存放地雷坐标的数组
    sum = col*row,// 棋盘所有格子的总数
    openGz = 0,// 已经点开的格子的数量
    color = ['rgba(0,0,255,.6)','rgba(0,255,0,.6)','red','blue','yellow','pink','auqa','black']
    ;
  window.oncontextmenu = function(e){
   e.preventDefault();
   if(!flag){
    alert('请先点开始！');
    return;
   }
   if(e.target.isOpen){
    alert('这个格子已经翻过了，换个格子标记');
    return
   }
   if(e.target.localName == 'li'){
    if(e.target.isMark){
     e.target.isMark = false;
     e.target.innerHTML = '';
     restNum++;
    }else{
     e.target.isMark = true;
     e.target.innerHTML = '▲';
     e.target.style.color = 'red';
     restNum--;
    }
    leftLei.innerHTML = restNum
   }
  }
  start.onclick = function(){//点击开始游戏
   flag = true;// 棋盘可以被点击
   if(time>0){// 判断开始键是否已经被点过,防止重复点击
    alert('游戏已经开始了,不要再点开始了')
    return
   }
   countTime()//开始计时
  }
  restart.onclick = function(){//点击开始游戏
   flag = false;// flag置为false，棋盘格子变成不可点击状态
   createQp();// 画棋盘
  }
  box.onclick = function(e){//点击棋盘的格子
   var t = e.target;
   if(t.localName == 'li'){// 只有当点击的格子是li的时候才会继续往下判断
    if(!flag){// 如果当前不允许点击，提示先点开始
     alert('请先点开始！')
     return
    }
    var x = t.dataset.x - 0 ,y = t.dataset.y - 0;
    // console.log(x,y);
    if(t.isOpen){
     alert('这个格子已经翻过了，换个格子翻');
     return
    }
    if(t.isMark){
     alert('这个格子已经标记了，换个格子翻');
     return
    }
    if(isInArray(x,y,leiList) != -1 ){
     flag = false;
     clearInterval(time);
     count = 0;
     passTime.innerHTML = count;
     boom();
     alert('你输了')
    }else{
     testLei(x,y);
     if(leiNum == sum - openGz){
      flag = false;
      boom();
      clearInterval(time);
      alert('你赢了');
     }
    }
   }
  }
  level.onchange = function(){
   var v = this.value;//获取改变后的level
   if(v == 1){//改变棋盘规格及雷的数量
    row = 10;
    col = 10;
    leiNum = 10;
   }else if(v == 2){
    row = 16;
    col = 16;
    leiNum = 40;
   }else if(v == 3){
    row = 16;
    col = 30;
    leiNum = 99;
   }
   createQp();// 重新画棋盘
  };
  function createQp(){// 创建棋盘
   var str = '';
   for(var i = 0;i<row;i++){// 行数
    str += '<ul class="row">'
    for(var j = 0;j<col;j++){// 列数
     str+='<li class="col" data-x="'+i+'" data-y="'+j+'"></li>'
    }
    str += '</ul>'
   }
   box.style.width = col * 30 +'px';//修改box的宽度
   box.style.height = row * 30 + 50 +'px';// 修改box的高度
   leftLei.innerHTML = leiNum;// 修改剩余雷数
   qipan.innerHTML = str;// 将拼接的棋盘内容添加到棋盘中
   count = 0;// 计时重置为0
   sum = row*col;// 重置格子的总数
   openGz = 0;// 重置已经点开的格子的数量
   passTime.innerHTML = count; // 时间设置为count
   restNum = leiNum;//重置剩余的雷的数量
   leftLei.innerHTML = restNum;
   clearInterval(time);// 清除定时器
   time = 0;// 定时器变量的值置为 0 
   createLei();
  }
  function countTime(){// 开始计时
   time = setInterval(function(){
    count++;
    passTime.innerHTML = count;
   },1000)
  }
  function createLei(){// 创建地雷
   leiList = [];// 把地雷的坐标先清空
   for(var i = 0;i<leiNum;i++){
    var x = parseInt(Math.random()*row),//
     y = parseInt(Math.random()*col);//
     if(isInArray(x,y,leiList) == -1){// 如果 x,y组成的坐标[x,y] 不在leiList里
      leiList.push([x,y])// 把 [x,y] push进 leiList里
     }else{// x,y组成的坐标 [x,y] 已经在 leiList里了
      i-- // 重新取一次随机坐标
     }
   }
  }
  // arr = [[0,0],[1,1],[2,2],...]
  function isInArray(x,y,arr){// 判断 x,y 组成的坐标 [x,y] 在不在数组 arr 里
   for(var i = 0;i<arr.length;i++){// 遍历arr的每一个元素
    if(x == arr[i][0] && y == arr[i][1]){// 将 x与arr[i]的第0个元素对比，将 y 与 arr[i]的第1个元素对比，如果能对上，说明 [x,y] 已经存在于 arr 里，
     return i;// 返回[x,y] 在 arr中的索引
    }
   }
   if(i == arr.length){// 当 循环遍历一遍也没在arr中找到与 [x,y] 相同的坐标时，说明 [x,y] 不在arr 里
    return -1;// 返回 -1;
   }
  }
  function boom(){// boom
   var ul = $('.row','l');//获取棋盘里所有的行
   for(var i = 0;i<leiList.length;i++){
    var li = ul[leiList[i][0]].querySelectorAll('li')[leiList[i][1]];//通过索引去获取行里具体的li
    li.style.background = 'red'
   }
  }
  function testLei(x,y){
   var num = 0; // 声明一个num用来累计雷的数量
   for(var i = 0;i<leiList.length;i++){// 遍历所有的雷的坐标
    if(Math.abs(x - leiList[i][0]) <2 && Math.abs(y - leiList[i][1])<2){// 找到在当前点击的格子周围八个格子里的雷
     num++;
    }
   }
   var ul = $('.row','l');
   var li = ul[x].querySelectorAll('li')[y];// 通过索引获取当前被点击的格子
   li.innerHTML = num;// 把格子的内容换成雷的数量
   li.isOpen = true;// 给当前格子加一个属性 isOpen,表示当前格子已经被点开了
   openGz++;
   li.style.background = '#fff';
   if(num>0){
    li.style.color = color[num-1];// 把代表雷的数量的数字换一个颜色
   }
   if(num == 0){// 如果当前格子周围没有雷
    li.innerHTML = '';// 
    for(var a = x-1;a<=x+1;a++){// 
     for(var b = y-1;b<=y+1;b++){// 遍历当前格子周围八个格子
      var ul = $('ul','l');
      if(a>= 0 && a<row && b>=0 && b<col){// 保证要遍历的格子坐标在棋盘之内
       var dom = ul[a].querySelectorAll('li')[b];// 通过坐标获取到具体的 li
       if(!dom.isOpen && !dom.isMark){// 判断当前的li格子是否已经被点开了，如果还没有被点开,递归查询该格子周围有几颗雷
        testLei(a,b)
       }
      }
     }
    }
   }
  }
  createQp();
 </script>
</body>
</html>

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

基于JavaScript实现简单扫雷游戏

- Author -

北冰洋_WH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
搭建vue开发环境
Jul 19 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
JS+CSS实现过渡特效
Jan 02 #Javascript
jQuery实现全选按钮
Jan 01 #jQuery
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
利用 JavaScript 实现并发控制的示例代码
Dec 31 #Javascript
类加载器(1) json_extract(1) NoSQL(1) form表单(1) netty(1) 变量提升(1) 弹窗(1) JOIN(1) 缓冲区(1) Launch Mode(1)
You might like
Terran热键控制
2020/03/14 星际争霸
2020最新CPU的性能排名
2020/04/02 数码科技
多php服务器实现多session并发运行
2006/10/09 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP实现的博客欢迎提示功能（很特别哦）
2014/06/05 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
node跨域请求方法小结
2017/08/25 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python多线程编程（八）：使用Event实现线程间通信
2015/04/05 Python
Django中Model的使用方法教程
2018/03/07 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python列表切片操作实例总结
2019/02/19 Python
python图像和办公文档处理总结
2019/05/28 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
详解解决Python memory error的问题（四种解决方案）
2019/08/08 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
2014年行政部工作总结
2014/11/19 职场文书