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

原生js实现自定义难度的扫雷游戏

Posted in Javascript onJanuary 22, 2021

本文实例为大家分享了js实现扫雷游戏的具体代码，供大家参考，具体内容如下

游戏功能：

1、有四个难度
2、可以自定难度

1、html相关代码

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>扫雷</title>
 <script src="js/mine.js"></script>
 <link rel="stylesheet" href="./css/mine.css" >
</head>
<!-- 
需求分析：
 1.游戏的区域：
  9*9的区域
 2.方格可以打开与标记
  左键打开，显示数字，为周围格子的地雷数，右键标记
 3.地雷
  地雷随机分布
 4.踩到地雷时，游戏结束
  所有的地雷显示出来
 5.连锁开大空方格
 6.剩余地雷数与计时器
 7.游戏胜利条件
  所有的方格除了地雷都被打开了，则游戏胜利
 一个方格所包含的信息：
  坐标 x y
  是否是一个地雷
  周围的地雷数 = 9
  二维数组中存储的是周围的地雷数
 -->
 
<body>
 <div class="level">
 <button type="button" name="button" class="choice-level">自定义</button>
 <button type="button" name="button" class="choice-level">初级</button>
 <button type="button" name="button" class="choice-level">中级</button>
 <button type="button" name="button" class="choice-level">高级</button>
 <button type="button" name="button" class="choice-level">魔鬼级</button>
 <button type="button" name="button" class="restart">重新开始</button>
 </div>
 <div class="gameBox"></div>
 <div class="info">
 <p>剩余雷数：
  <span class="residue"></span>
 </p>
 <p>
  TIME：
  <span class="tick"></span>S
 </p>
 
 </div>
</body>
 
 
</html>

2、css样式

*{
 margin: 0;
 padding: 0;
}
.gameBox{
 margin-top: 30px;
}
body{
 font-size: 0;
}
ul{
 list-style: none;
 text-align: center;
 overflow: hidden;
}
.col{
 display: inline-block;
 width: 22px;
 height: 22px;
 line-height: 22px;
 background-color: rgba(32, 226, 255, 0.4);
 border: 1px solid rgb(129, 129, 129);
 font-size: 16px;
 margin: 1.5px;
 vertical-align: top;
 position: relative;
}
.col:hover{
 background-color: #0af;
}
.col span{
 cursor: default;
}
.hide{
 display: none;
}
.boom{
 background: url("../img/boom.svg") no-repeat 2.5px 2px;
 background-size: 18px 18px;
}
.num-1{
 color: rgb(8, 153, 235);
}
.num-2{
 color: rgb(255, 45, 178);
}
.num-3{
 color:#16a085;
}
.num-4{
 color: #8e44ad;
}
.num-5{
 color: rgb(255, 167, 45);
}
.num-6{
 color: rgb(8, 126, 176);
}
.num-7{
 color: #e67e22;
}
.num-8{
 color: #c0392b;
}
.img-flag{
 width: 18px;
 height: 18px;
 position: absolute;
 top: 3px;
 left: 3px;
}
.level{
 margin-top: 30px;
 font-size: 20px;
 text-align: center;
}
.level button{
 padding: 5px 8px;
 background-color: rgb(67, 183, 189);
 border: none;
 outline: none;
 border-radius: 3px;
 cursor: pointer;
 color: #fff;
}
.level button:hover{
 background-color: rgb(23, 132, 138);
}
.info{
 margin-top: 30px;
 font-size: 16px;
 text-align: center;
}
.info p{
 display: inline-block;
 width: 130px;
 margin: 0 auto;
}
.info p span{
 color: rgb(67, 183, 189);
}

3、js代码

window.onload = function() {
 var row = 4;
 var col = 4;
 var num = 1;
 // 判断踩雷之后不能胜利
 var gg = false;
 // 生成地图
 function mineMap(r, c, num) {
 // 定义行
 var map = [];
 //给行数，生成二维数组
 for (var i = 0; i < r; i++) {
  map[i] = new Array()
 }
 // 赋值
 for (var i = 0; i < map.length; i++) {
  for (var j = 0; j < c; j++) {
  // //周围的地雷数
  map[i][j] = 0;
  }
 }
 var plus = function(array, x, y) {
  if (x >= 0 && x < r && y >= 0 && y < c) {
  if (array[x][y] !== 9) {
   array[x][y]++
  }
  }
 }
 for (var i = 0; i < num; i++) {
  var x = Math.floor(Math.random() * r)
  var y = Math.floor(Math.random() * c)
  if (map[x][y] != 9) {
  map[x][y] = 9
   //上下6个 +1
  for (var j = -1; j < 2; j++) {
   //上三个
   plus(map, x - 1, y + j)
   //下三个
   plus(map, x + 1, y + j)
  }
  //左右2个 +1
  plus(map, x, y - 1)
  plus(map, x, y + 1)
  } else {
  //重新随机
  num++
  }
 }
 return map;
 }
 //先通过x轴数量写入ul，再讲过y轴的属性写入li
 function writeHtml(map) {
 // 获取盒子
 var gameBox = document.querySelector(".gameBox");
 // 声明空字符串，存放生成的ul、li
 var gridHTML = "";
 for (var i = 0; i < map.length; i++) {
  gridHTML += '<ul class = "row" data-x="' + i + '">';
  //生成li
  for (var j = 0; j < map[0].length; j++) {
  var m = map[i][j]
  if (m == 0) {
   m = "";
  }
  gridHTML += "<li class='col' data-y=" + j + ">" +
   "<span class='hide num-" + m + "'>" + m + "</span>" +
   "<img src='img/flag.svg' class='img-flag hide'>" +
   "</li>"
  }
  gridHTML += '</ul>'
  gameBox.innerHTML = gridHTML;
 }
 }
 
 //给方格绑定事件， 点开数字 地雷 右键标记
 function show() {
 // 获取行ul
 var rows = document.querySelectorAll(".row");
 // 遍历所有ul
 for (var i = 0; i < rows.length; i++) {
  var element = rows[i];
  // 添加点击事件
  element.onclick = function(event) {
   // 当前点击元素
   var el = event.target;
   // 判断是否为li
   if (el.nodeName != "LI") {
   return;
   }
   //todo 判断是否被打开以及标记了
   if (el.style.background == "white" || !el.children[1].classList.contains("hide")) {
   return;
   }
   // 获取span标签内容
   var mineNum = el.children[0].innerHTML;
   if (mineNum !== "9" && el.style.background !== "white") {
   // 空白连锁打开
   if (mineNum == "") {
    var x = parseInt(el.parentNode.dataset.x);
    var y = parseInt(el.dataset.y);
    showNoMine(x, y);
   }
   // li背景变白色；span显示
   el.style.background = "white";
   el.children[0].style.display = "inline";
   // 判断打开数量
   clearMineNum++;
   // 胜利函数
   judgeVictory()
 
   } else if (mineNum == "9") {
   // 清除胜利计时器
   clearInterval(stopTime);
   // li添加类名
   el.classList.add("boom");
   alert("你真菜！")
   gg = true;
   // 显示所有地雷,获取所有li
   var all = document.querySelectorAll(".col");
   // 放置所有的地雷
   var ff = [];
   var allnum = 0;
   // 遍历所有li
   for (var i = 0; i < all.length; i++) {
    if (all[i].children[0].innerHTML == "9") {
    // 雷赋值给数组
    ff[allnum] = all[i];
    allnum++;
    }
   }
   // 设置一个计时器一个一个打开雷
   allnum = 0;
   var stop = setInterval(function() {
    ff[allnum].classList.add("boom")
    allnum++;
    // 判断结束条件
    if (allnum == ff.length) {
    // 清除计时器
    clearInterval(stop);
    }
   }, 30)
 
   }
  }
  // 右键标记地雷
  element.oncontextmenu = function(event) {
  // 阻止右键菜单
  event.preventDefault();
  // 获取当前点击节点
  var el = event.target;
  // 判断是否是
  if (el.parentNode.nodeName == "LI") {
   el = el.parentNode;
  }
  if (el.nodeName != "LI") {
   return;
  }
  // 获取img
  var classList = el.children[1].classList;
  // 剩余雷数
  var residue = document.querySelector(".residue");
  var mineNum = parseInt(residue.innerHTML);
  // 如果没有旗子，没有被点开，可以插旗子
  if (classList.contains("hide") && el.style.background != "white") {
   // 移除隐藏
   classList.remove("hide");
   // 获取雷数
   mineNum--;
  } else if (el.style.background != "white") {
   classList.add("hide");
   // 判断雷数
   if (mineNum < num) {
   mineNum++;
   }
  }
  // 剩余雷数
  residue.innerHTML = mineNum;
  }
 }
 }
 
 function judgeVictory() {
 //游戏胜利
 if (clearMineNum === (row * col - num)) {
  //做一个小动画
  var all = document.querySelectorAll(".col");
  var allNum = 0;
  var stop = setInterval(function() {
  var r = Math.floor(Math.random() * 256)
  var g = Math.floor(Math.random() * 256)
  var b = Math.floor(Math.random() * 256)
  all[allNum].style.background = "rgba(" + r + "," + g + "," + b + ",0.6)";
  //将旗子和span都隐藏
  all[allNum].children[0].style.display = "none"
  all[allNum].children[1].style.display = "none"
  allNum++
  if (allNum === all.length) {
   clearInterval(stop)
   if (!gg) {
   alert("大吉大利，今晚吃鸡")
   init(row, col, num)
   }
  }
  }, 20)
 }
 }
 //自动打开空格
 function showNoMine(x, y) {
 for (var i = -1; i <= 1; i++) {
  if (x + i >= 0 && x + i < row) {
  // 获取当前行
  var rowElement = document.querySelectorAll(".row")[x + i];
  for (var j = -1; j <= 1; j++) {
   if (y + j >= 0 && y + j < col) {
   //获取当前单元格
   var el = rowElement.children[y + j]
    //自动打开必须是未打开的方格
   if (el.style.background != "white") {
    el.style.background = "white"
    el.children[0].style.display = "inline"
    //打开方格数量+1
    clearMineNum++
    //判断游戏是否胜利
    judgeVictory(clearMineNum)
 
    if (el.children[0].innerText === "") {
    showNoMine(x + i, y + j)
    }
   }
   }
  }
  }
  // if (x + i >= 0 && x + i < row) {
  // // 获取当前行
  // var rowElement = document.querySelectorAll(".row")[x + i];
  // for (var j = -1; j <= 1; j++ && y + j < col) {
  //  // 获取当前单元格
  //  var el = rowElement.children[y + j];
  //  if (el.style.background !== "white") {
  //  el.style.background = "white";
  //  el.children[0].style.display = "inline";
  //  // 打开放格数量加1
  //  clearMineNum++;
  //  // 判断游戏是否胜利
  //  judgeVictory(clearMineNum);
  //  // 判断打开周围的放格周围是否为空
  //  if (el.children[0].innerHTML === "") {
  //   showNoMine(x + i, y + j)
  //  }
  //  }
  // }
  // }
 }
 
 }
 //初始化方法
 var stopTime;
 
 function init(row, col, num) {
 //数据初始化
 clearMineNum = 0
 gg = false;
 //清除原来的地图，生成新的地图
 var box = document.querySelector(".gameBox")
 box.innerHTML = "";
 var map = mineMap(row, col, num);
 // 新建地图
 writeHtml(map);
 show()
  //将雷数写入html中
 var residue = document.querySelector(".residue")
 residue.innerHTML = num
  // 获取计时
 var tick = document.querySelector(".tick");
 var i = 0;
 // 初始化
 tick.innerHTML = i;
 // 清除计时
 clearInterval(stopTime);
 // 时间计时器
 stopTime = setInterval(function() {
  tick.innerHTML = ++i
 }, 1000)
 }
 // 重置
 var restart = document.querySelector(".restart");
 restart.onclick = function(event) {
  //阻止冒泡
  event.stopPropagation()
  init(row, col, num)
 }
 // 自定义
 var level = document.querySelector(".level")
 level.onclick = function(event) {
 var el = event.target;
 switch (el.innerHTML) {
  case "初级":
  row = 9;
  col = 9;
  num = 10;
  init(row, col, num)
  break;
  case "中级":
  row = 16;
  col = 16;
  num = 40;
  init(row, col, num)
  break;
  case "高级":
  row = 16;
  col = 30;
  num = 479;
  init(row, col, num)
  break;
  case "魔鬼级":
  row = 40;
  col = 50;
  num = 300;
  init(row, col, num)
  break;
  case "自定义":
  row = prompt("请输入列数！");
  col = prompt("请输入行数！");
  num = prompt("请输入你想要的雷数，（请慎重选择）");
  init(row, col, num);
  break;
  default:
  row = 9;
  col = 9;
  num = 10;
  init(row, col, num)
  break;
 }
 }
 init(row, col, num)
}

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

原生js实现自定义难度的扫雷游戏

- Author -

清欢灬

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

Javascript 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
XENON基于JSON变种
Jul 27 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
VUE 实现动态给对象增加属性，并触发视图更新操作示例
Nov 29 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 #Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
element-ui 弹窗组件封装的步骤
Jan 22 #Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
根德(2) Panasonic(1) PHILIPS(3) 德生PL330(2) ICF-SW55(1) ICF-SW7600GR(1) 德劲1103(3) SRF-S84(1) 德生9700DX(1) 松下(1)
You might like
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
form自动提交实例讲解
2017/07/10 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python语法分析之字符串格式化
2019/06/13 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
澳大利亚领先的优质葡萄酒拍卖会：Langton’s Fine Wines
2019/03/24 全球购物
英国IT硬件供应商，定制游戏PC：Mesh Computers
2019/03/28 全球购物
图库照片、免版税图片、矢量艺术、视频片段：Depositphotos
2019/08/02 全球购物
Java程序员面试题
2013/07/15 面试题
毕业生求职信的经典写法
2014/01/31 职场文书
公民授权委托书
2014/10/15 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript