关键词：
注：使用了Font Awesome 字体图标库，使用前请下载引入(下载地址）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫雷小游戏2.2</title>
<link rel="stylesheet" href="./css/font-awesome.min.css">
<style>
*
user-select: none;
.mineBox
width: 900px;
height: 600px;
margin: 0 auto;
border: 3px solid gray;
position: relative;
color: black;
.red
font-size: 22px;
color: #B22222;
.black
font-size: 22px;
color: black;
.difficulty
width: 900px;
text-align: center;
margin: 0 auto 15px;
button
width: 60px;
height: 25px;
.info
position: fixed;
top: 100px;
left: 190px;
input
width: 60px;
height: 40px;
margin-left: 2px;
margin-top: 10px;
text-align: center;
font-weight: bold;
font-size: 18px;
#times
font-size: 16px;
font-weight: none;
.success
position: absolute;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
top: -160px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: rgba(255, 255, 255, 0.4);
z-index: 1000;
border-radius: 25px;
display: none;
</style>
</head>
<body>
<div class="success">
恭喜通关
</div>
<div class="difficulty">
<b>难度选择:</b> <b style="color: #FF00FF">Lunatic</b><br>
<button class="Easy">Easy</button>
<button class="Normal">Normal</button>
<button class="Hard">Hard</button>
<button class="Lunatic">Lunatic</button>
<button class="Extra">Extra</button>
</div>
<div class="mineBox"></div>
<div class="info">
地雷:
<input type="text" readonly id="txtB"><br>
旗帜:
<input type="text" readonly id="txtF"><br>
时间:
<input type="text" readonly id="times" value="0"><br>
</div>
<script>
class Mining
constructor()
// 获取存放小盒子的节点
this.mineBox = document.getElementsByClassName('mineBox')[0];
// 定义一个用来存放雷div的下标的数组
this.arr = [];
// 获取存放按钮的节点
this.btnList = document.querySelectorAll('.difficulty button');
// 获取显示难度的节点
this.diff = document.getElementsByTagName('b')[1];
// 获取显示雷数量的节点
this.txtBomb = document.getElementById('txtB');
// 获取显示旗子数量的节点
this.txtFlag = document.getElementById('txtF');
// 获取显示时间的节点
this.txtTime = document.getElementById('times');
// 定义小盒子的默认宽高
this.sDivW = 30;
this.sDivH = 30;
// 定义雷的默认数量
this.bombSum = 120;
// 定义旗子的默认数量
this.flagSum = this.bombSum;
// 将雷和旗子的数量显示到input框内
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
// 设置标记正确后的变量
this.success = 0;
// 设置游戏结束状态
this.endGame = false;
// 定义计时器&计时器状态
this.times = '';
this.timeStatus = true;
// 默认执行一次
this.init();
// 给按钮绑定点击事件
this.btnList.forEach(v =>
v.addEventListener('click', () =>
switch (v.className)
case 'Easy':
this.clear();
this.mineBox.style.width = '500px';
this.mineBox.style.height = '500px';
this.sDivW = 50;
this.sDivH = 50;
this.bombSum = 10;
this.flagSum = this.bombSum;
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
this.init();
this.diff.innerText = 'Easy';
this.diff.style.color = '#00FF00';
break;
case 'Normal':
this.clear();
this.mineBox.style.width = '600px';
this.mineBox.style.height = '600px';
this.sDivW = 50;
this.sDivH = 50;
this.bombSum = 15;
this.flagSum = this.bombSum;
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
this.init();
this.diff.innerText = 'Normal';
this.diff.style.color = '#4169E1';
break;
case 'Hard':
this.clear();
this.mineBox.style.width = '800px';
this.mineBox.style.height = '600px';
this.sDivW = 50;
this.sDivH = 50;
this.bombSum = 30;
this.flagSum = this.bombSum;
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
this.init();
this.diff.innerText = 'Hard';
this.diff.style.color = '#FF0000';
break;
case 'Lunatic':
this.clear();
this.mineBox.style.width = '900px';
this.mineBox.style.height = '600px';
this.sDivW = 30;
this.sDivH = 30;
this.bombSum = 120;
this.flagSum = this.bombSum;
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
this.init();
this.diff.innerText = 'Lunatic';
this.diff.style.color = '#FF00FF';
break;
case 'Extra':
this.clear();
this.mineBox.style.width = '900px';
this.mineBox.style.height = '600px';
this.sDivW = 30;
this.sDivH = 30;
this.bombSum = 180;
this.flagSum = this.bombSum;
this.txtBomb.value = this.bombSum;
this.txtFlag.value = this.flagSum;
this.init();
this.diff.innerText = 'Extra';
this.diff.style.color = '#A020F0';
break;
default:
throw console.error('报错了...');
break;
)
);
clear()
//清空大盒子
this.mineBox.innerHTML = '';
//清空存放div的数组
this.arr = [];
//重置时间
this.txtTime.value = '0';
//清除定时器
clearInterval(this.times);
//设置定时器状态
this.timeStatus = true;
// 设置游戏结束状态
this.endGame = false;
//清除标记正确后的变量
this.succefss = 0;
init()
// 动态创建小div放在box里面
this.create(this.sDivW, this.sDivH);
// 标记地雷
this.markBomb();
// 点击小盒子
this.blockClick();
create(mineW, mineH)
this.mineN = this.mineBox.clientWidth * this.mineBox.clientHeight / (mineW * mineH);
this.mineCol = this.mineBox.clientWidth / mineW;
this.mineRow = this.mineBox.clientHeight / mineH;
// 定义一个数组，将周围div的下标存起来
this.arr2 = [-(this.mineCol + 1), -this.mineCol, -(this.mineCol - 1), -1, 1, this.mineCol - 1, this.mineCol, (this.mineCol + 1)];
for (let i = 0; i < this.mineN; i++)
let block = document.createElement('div');
setStyle(block,
width: mineW - 2 + "px",
height: mineH - 2 + "px",
backgroundColor: "rgb(141,162,155)",
border: "1px solid #fff",
position: "absolute",
left: (i % this.mineCol) * mineW + "px",
top: parseInt(i / this.mineCol) * mineH + "px",
textAlign: "center",
lineHeight: mineH + "px"
)
this.mineBox.appendChild(block);
//判断是不是雷
block.mine = false;
//判断小方块是否被打开
block.show = false;
//判断插旗状态
block.status = 0;
markBomb()
// 标记雷
for (let i = 0; i < this.bombSum; i++)
// 获取随机下标
let index = Math.floor(Math.random() * this.mineN)
// 判断数组中是否已经有了这个下标
if (this.arr.indexOf(index) < 0) this.arr.push(index); else i--;
for (let i = 0; i < this.arr.length; i++)
this.mineBox.children[this.arr[i]].mine = true
for (var i = 0; i < this.mineBox.children.length; i++)
// 如果当前这个div是雷就不统计了
if (this.mineBox.children[i].mine)
continue;
// this.mineBox.children[i] // 每个div
// 查看当前div周围的所有div
// 定义周围雷数量的变量
let bombN = 0
for (var j = 0; j < this.arr2.length; j++)
// 考虑最上面一行 - 不能-(this.mineCol+1) 不能-this.mineCol 不能-(this.mineCol-1)
if (i < this.mineCol && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -this.mineCol || this.arr2[j] === -(this.mineCol - 1)))
continue;
// // 最左边一行过滤掉
if (i % this.mineCol === 0 && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -1 || this.arr2[j] === (this.mineCol - 1)))
continue;
// 最下面一行
if (parseInt(i / this.mineCol) === this.mineRow - 1 && (this.arr2[j] === (this.mineCol - 1) || this.arr2[j] === this.mineCol || this.arr2[j] === (this.mineCol + 1)))
continue;
// 最右边一行
if (i % this.mineCol === this.mineCol - 1 && (this.arr2[j] === -(this.mineCol - 1) || this.arr2[j] === 1 || this.arr2[j] === (this.mineCol + 1)))
continue;
if (this.mineBox.children[i + (this.arr2[j])].mine)
bombN++
// 将雷的数量放在div中
this.mineBox.children[i].bombN = bombN
blockClick()
for (let i = 0; i < this.mineBox.children.length; i++)
this.mineBox.children[i].index = i;
let that = this;
this.mineBox.children[i].onclick = function ()
//如果计时器未开启 则开启计时器 (仅在第一次点击时开启定时器)
if (that.timeStatus)
that.txtTime.value = '1';
that.timer();
that.timeStatus = false;
if (this.mine)
// 如果点击到雷了
for (let j = 0; j < that.mineBox.children.length; j++)
//清除计时器
clearInterval(that.times);
// 设置游戏结束状态
that.endGame = true;
// 给所有不是雷的div设置内容显示，雷的数量
that.mineBox.children[j].innerText = that.mineBox.children[j].bombN ? that.mineBox.children[j].bombN : '';
that.mineBox.children[j].style.backgroundColor = 'rgb(210,222,238)';
// 将所有是雷的div设置为红色
for (let j = 0; j < that.arr.length; j++)
that.mineBox.children[that.arr[j]].style.backgroundColor = 'red';
that.mineBox.children[that.arr[j]].innerHTML = '<i class="fa fa-bomb black">';
else
that.openAround(this.index)
this.mineBox.children[i].oncontextmenu =
function ()
// 如果小盒子已经是打开的状态 则跳出函数
if (this.show) return false;
// 如果游戏已经结束了 则跳出函数
if (that.endGame) return false;
if (this.status == 0)
this.innerHTML = '<i class="fa fa-flag red">';
this.status = 1;
that.flagSum--;
that.txtFlag.value = that.flagSum;
if (this.mine)
that.success++;
if (that.success == that.bombSum)
//清除计时器
clearInterval(that.times);
//设置通关状态
that.endGame = true;
//显示通关信息
document.getElementsByClassName('success')[0].style.display = 'block';
//设置延时2秒后关闭
setTimeout(() =>
document.getElementsByClassName('success')[0].style.display = 'none';
, 2000);
return false;
if (this.status == 1)
this.innerHTML = '<i class="fa fa-question black">';
this.status = 2;
return false;
if (this.status)
if (this.mine)
that.success--;
this.innerHTML = '';
this.status = 0;
that.flagSum++;
that.txtFlag.value = that.flagSum;
return false;
// 打开周围div的递归函数
openAround(index)
this.mineBox.children[index].innerText = this.mineBox.children[index].bombN
this.mineBox.children[index].style.backgroundColor = 'rgb(210,222,238)'
this.mineBox.children[index].show = true
if (this.mineBox.children[index].bombN === 0)
this.mineBox.children[index].innerText = '';
for (let j = 0; j < this.arr2.length; j++)
if (index < this.mineCol && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -this.mineCol || this.arr2[j] === -(this.mineCol - 1)))
continue;
// // 最左边一行过滤掉
if (index % this.mineCol === 0 && (this.arr2[j] === -(this.mineCol + 1) || this.arr2[j] === -1 || this.arr2[j] === (this.mineCol - 1)))
continue;
// 最下面一行
if (parseInt(index / this.mineCol) === this.mineRow - 1 && (this.arr2[j] === (this.mineCol - 1) || this.arr2[j] === this.mineCol || this.arr2[j] === (this.mineCol + 1)))
continue;
// 最右边一行
if (index % this.mineCol === this.mineCol - 1 && (this.arr2[j] === -(this.mineCol - 1) || this.arr2[j] === 1 || this.arr2[j] === (this.mineCol + 1)))
continue;
if (this.mineBox.children[index + this.arr2[j]].show)
continue
this.openAround(index + this.arr2[j])
// 设置计时器函数
timer()
this.times = setInterval(() =>
this.txtTime.value = (this.txtTime.value - 0) + 1;
, 1000);
new Mining;
//封装设置样式的方法
function setStyle(tag, styleObj)
for (var attr in styleObj)
tag.style[attr] = styleObj[attr];
</script>
</body>
</html>
c|简易版扫雷的实现(代码片段)
目录前言游戏实现test.cgame.cgame函数的实现游戏相关规则说明的函数棋盘初始化函数的实现随机生成雷的函数的实现打印数组函数的实现修改mine数组的函数的实现扫雷过程函数的实现修改show数组的函数的实现game.c汇总game.h结语前... 查看详情
练手wpf——扫雷小游戏的简易实现（下）(代码片段)
原文:练手WPF（三）——扫雷小游戏的简易实现（下）十四、响应鼠标点击事件 （1）设置对应坐标位置为相应的前景状态///<summary>///设置单元格图样///</summary>///<paramname="x"></param>///<paramname="y">&... 查看详情
练手wpf——扫雷小游戏的简易实现（下）(代码片段)
十四、响应鼠标点击事件 （1）设置对应坐标位置为相应的前景状态///<summary>///设置单元格图样///</summary>///<paramname="x"></param>///<paramname="y"></param>///<paramname="state">& 查看详情
简易扫雷游戏的详解(代码片段)
...1a;1：text.c游戏测试程序的编写2：进行game.c功能的实现1：在game.h中进行游戏函数的声明：2：初始化棋盘数组函数的定义3：棋盘打印函数的实现4：放置雷函数的实现5：实现在s 查看详情
练手wpf——扫雷小游戏的简易实现（上）(代码片段)
一、创建项目1.创建WPF项目，设置初始化窗口大小（初级难度）：高x宽为430x350。2.添加文件夹Images，并添加相关图片。3.xaml中引入图片资源。<Window.Resources><BitmapImagex:Key="ImgSpace"UriSource="/Images/space.bmp"/><BitmapImagex:Key="Img... 查看详情
扫雷？拿来吧你！(代码片段)
实现简易扫雷扫雷概述原理工程分布代码实现测试文件游戏函数主体框架定义数组长宽游戏主体测试文件代码头文件代码函数的实现棋盘的初始化棋盘的显示布置雷获得雷的个数排查雷函数实现代码游戏效果扫雷概述大家都玩过... 查看详情
c语言小游戏扫雷游戏的实现(代码片段)
前言 利用C语言数组、函数等一些基础知识实现简单的扫雷游戏。此游戏需有一定的数组、函数知识支撑。1.游戏简要及获胜规则 扫雷是电脑上一个十分经典的小游戏，相信大家都和我一样在小的时候胡乱点... 查看详情
扫雷游戏（利用最基础的c语言实现）(代码片段)
扫雷扫雷游戏1.菜单2.初始化棋盘3.打印棋盘4.布置雷5.排查雷6.整体效果展示7.代码分享7.1test.c7.2game.c7.3game.h扫雷游戏今天我们就要设计一款这样的游戏，首先需要设置棋盘，然后对棋盘进行随机布雷，最后在排雷。1.... 查看详情
c语言实现扫雷游戏(超详细)(代码片段)
...避免踩雷，踩到一个雷即全盘皆输。现在我们用C语言实现一个简易的扫雷游戏。游戏的实现非常的简单，主要涉及了C语言中的一些基本知识，循环 查看详情
c语言实现扫雷简易版(代码片段)
直接上代码test.c#define_CRT_SECURE_NO_WARNINGS1#include"game.h"voidmenu() printf("#############################\\n"); printf("#######1.van扫雷######\\n"); printf("#######0.不van了# 查看详情
原生js实现简易转盘抽奖(代码片段)
...快乐。大家好，我是Counter。本章带大家来简单的了解下原生JS实现转盘抽奖。因为主要涉及到JS，在这里HTML和CSS起到的功能就没有那么重要，因此，没有过多的阐述HTML与CSS，而JS基本每行都有注释，但这里CSS也是起到了至关重要... 查看详情
［c语言］c语言实现扫雷(代码片段)
文章目录前言多文件形式游戏逻辑游戏实现打印简易菜单初始化数组打印方块矩阵布置雷玩家排雷完整代码test.cgame.cgame.h前言《扫雷》是一款大众类的益智小游戏，于1992年发行。游戏目标是在最短的时间内根据点击格子出现... 查看详情
原生js实现简易打字游戏
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情
原生js实现简易atm功能(代码片段)
简易ATM题目描述：里面现存100块钱。如果存钱，就用输入的钱数加上先群的钱，然后弹出余额。如果取钱，就减去取的钱，然后显示余额。如果显示余额，就显示余额。如果退出，就进行判断再退出。<script>varmoney=100;varmoneyS... 查看详情
c语言实现简易版扫雷步骤及代码(代码片段)
C语言实现简易版扫雷步骤及代码一、基本思路二、基本流程1.创建地图并初始化2.打印地图showMap3.让玩家输入坐标，表示要翻开的位置4.判定是否踩雷5.更新showMap，在翻开位置显示周围有多少个地雷6.判定玩家是否翻开了... 查看详情
简易扫雷游戏(代码片段)
相信大家都玩过扫雷游戏，在学习了二维数组之后，我也用c语言写了一个简单的扫雷游戏规则如下：1.通过对宏Row和宏List来设置游戏的棋盘大小（如果想玩10x10的扫雷则需设置Row和List为12）；2.通过对宏Boom... 查看详情
c语言实现简易版扫雷(代码片段)
...一个循环里面的。下面是整个游戏的流程图下面开始代码实现我们先写出一个主函数intmain(void)test();return0;我们在test()函数中实现所有的游戏首先写出游戏主体游戏主体voidtest()intinput=0;sran 查看详情
c语言实现扫雷游戏（一步步教你如何写扫雷）(代码片段)
...用工具一、基本思路和流程1.扫雷游戏的游戏规则2.代码实现思路二、实现步骤（具体步骤）1.使用多文件形式2.代码实现定义各个难度等级的棋盘大小和雷的数量定义全局变量游戏规则界面菜单界面选择实现选择难度界面... 查看详情