javaScript扫雷
Posted 懒羊羊h
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript扫雷相关的知识，希望对你有一定的参考价值。
文章目录
一、准备工作
1.图片
需要找三张图片 旗子的图片 炸弹的图片 爆炸的图片
2.html
html文件夹新建一个html文件
<!DOCTYPE html>
<html lang="en">
<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>扫雷游戏</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!-- 游戏最外层容器 -->
<div class="container">
<!-- 游戏标题 -->
<h1>扫雷</h1>
<!-- 游戏难度 -->
<div class="level">
<button class="active">初级</button>
<button>中级</button>
<button>高级</button>
</div>
<!-- 总雷数和插旗树 -->
<div class="info">总雷数：<span class="mineNum">10</span></div>
<div class="info">插旗数：<span class="flagNum">0</span></div>
<!-- 扫雷区域 通过js动态添加-->
<div class="mineArea"></div>
</div>
<script src="../js/config.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
目前写好html后的样式
2.css
css文件夹下新建一个css文件
- 初始化
- 内外边框为0
- 改变盒子模型为边框盒子
* /* 初始化内外边距 */ margin: 0; padding: 0; /* 改成边框盒 会把padding什么的算进去 */ box-sizing: border-box; - 标题：
- 文字居中
- 字体大小46px
- 粗100
- 上下边距30 居中 左右20 居中
/* 标题 */ h1 text-align: center; font-size:46px; font-weight: 100; margin:30px auto 20px auto - 游戏难度选择
- 字体居中
- 下边距10px
/* 游戏难度选择 */ .level text-align: center; margin-bottom: 10px; - 游戏难度选择按钮：
- 内边距上下5px 左右15px
- 背景颜色#02a4ad
- 字体颜色白色
- 取消轮廓（outline）
- 取消外边框（border）
- 圆角3px
- 上下边距0 左右边距5px
- 移动到按钮时鼠标改为手指
.level button padding: 5px 15px; background: #02a4ad; color: white; outline: none; border:none; border-radius: 3px; cursor:pointer - 当前按钮样式
- 背景颜色 #00abff
.level button.active background-color: #00abff; - 提示信息相关样式
- 文字居中
- 粗200
- 上下10px 左右居中
- 完成后的样式截图：
3.js
新建一个js文件夹
- 创建index.js 写逻辑
- 创建config.js写配置
二、初始化数据
1. 配置文件
由于整个游戏是可以选择难度的，所以我们需要一些配置信息，我们单独创建了一个config.js，代码如下
// 游戏配置文件
//不同级别的配置
var config =
easy:
row: 10,
col: 10,
mineNum: 10,
, //简单模式
noraml:
row: 15,
col: 15,
mineNum: 30,
, //普通模式
hard:
row: 20,
col: 20,
mineNum: 60,
, //困难模式
custom:
row: '',
col: '',
mineNum: '',
, //自定义模式
// 当前游戏难度 一开始默认为简单模式
var curLevel=config.easy
2.工具文件
新建一个tool.js
// 工具函数
// 1. 获取元素
function $(selector)
return document.querySelector(selector)
//2.获取所有元素
function $$(selector)
return document.querySelectorAll(selector)
3.逻辑文件
1.main函数
// 游戏主要逻辑
// 主函数
function main()
//1.进行游戏的初始化
init()
//2.绑定事件
bindEvent()
main()
// 初始化
function init()
//绑定事件
function bindEvent()
2.init函数
- 思考：初始化要做什么事情？
- 随机生成所选配置对应数量的雷
//index。js最上面的地方写
//用于存储生成的地雷的数组
var mineArray = null
//雷区的容器
var mineArea = $(".mineArea")
// 初始化
function init()
//1.随机生成所选配置对应的数量的雷
mineArray = initMine()
//2.根据雷的数量，生成对应的表格
var table = document.createElement('table')
//初始化格子的下标
var index = 0
for (var i = 0; i < curLevel.row; i++)
var tr = document.createElement('tr')
for (var j = 0; j < curLevel.col; j++)
var td = document.createElement('td')
tr.appendChild(td)
table.appendChild(tr)
mineArea.appendChild(table);
1.随机生成雷
// 随机生成所选配置对应的数量的雷
function initMine()
//1.创建一个数组，用于存储生成的地雷,生成对应长度的数组
var arr = new Array(curLevel.row * curLevel.col)
//2.往这个数组里面填充值
for (var i = 0; i < arr.length; i++)
arr[i] = i
//3.接下来打乱这个数组
arr.sort(() => 0.5 - Math.random())
//4.只保留对应雷数量的数组长度
return arr.slice(0, curLevel.mineNum)
2.css添加
/* 表格相关样式 */
table
background:#929196;
margin: 0 auto;
border-spacing:1px;
table td
width: 24px;
height: 24px;
background:#ccc;
border: 2px solid;
border-color: #fff #a1a1a1 #a1a1a1 #fff;
text-align:center ;
line-height: 24px;
font-weight: bold;
cursor:pointer
三、完整代码
1.html
<!DOCTYPE html>
<html lang="en">
<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>扫雷游戏</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!-- 游戏最外层容器 -->
<div class="container">
<!-- 游戏标题 -->
<h1>扫雷</h1>
<!-- 游戏难度 -->
<div class="level">
<button class="active">初级</button>
<button>中级</button>
<button>高级</button>
<button>自定义</button>
</div>
<!-- 总雷数和插旗树 -->
<div class="info">总雷数：<span class="mineNum">10</span></div>
<div class="info">插旗数：<span class="flagNum">0</span></div>
<!-- 扫雷区域 通过js动态添加-->
<div class="mineArea"></div>
</div>
<script src="../js/tool.js"></script>
<script src="../js/config.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
2.js
config.js
// 游戏配置文件
//不同级别的配置
var config =
easy:
row: 10,
col: 10,
mineNum: 10,
, //简单模式
normal:
row: 15,
col: 15,
mineNum: 30,
, //普通模式
hard:
row: 20,
col: 20,
mineNum: 60,
, //困难模式
custom:
row: '',
col: '',
mineNum: '',
, //自定义模式
// 当前游戏难度 一开始默认为简单模式
var curLevel=config.easy
index.js
// 游戏主要逻辑
//用于存储生成的地雷的数组
var mineArray = null
//雷区的容器
var mineArea = $('.mineArea')
//用于存储整张地图每个格子额外的一些信息
var tableData = []
//用于存储用户插旗的DOM元素
var flagArray = []
var mineNumber = $('.mineNum')
// 主函数
var btns = document.getElementsByTagName('button')
function main()
//1.进行游戏的初始化
init()
//2.绑定事件
bindEvent()
main()
function clearScene()
mineArea.innerHTML = ''
flagArray=[];
$('.flagNum').innerHTML=0;//重置插旗
mineNumber.innerHTML=curLevel.mineNum
// 初始化
function init()
//清空场景，或者叫做重置信息
clearScene();
//1.随机生成所选配置对应的数量的雷
mineArray = initMine()
// console.log(mineArray)
//2.根据雷的数量，生成对应的表格
var table = document.createElement('table')
//初始化格子的下标
var index = 0
for (var i = 0; i < curLevel.row; i++)
var tr = document.createElement('tr')
tableData[i] = []
for (var j = 0; j < curLevel.col; j++)
var td = document.createElement('td')
var div = document.createElement('div')
//每一个小格子都会对应一个js对象
//该对象存储了额外的一些信息
tableData[i][j] =
row: i, //该格子的行
col: j, //该格子的列
type: 'number', //格子的属性 数字number 雷mine
value: 0, //周围雷的数量
index, //格子的下标
checked: false, //是否被检验过，后面会用到
//为每一个div添加一个下标，方便用户点击的时候获取相应格子的下标
div.dataset.id = index
//当前格子是可以插旗的
// div.classList.add('canFlag')
div.setAttribute('class', 'canFlag')
//查看当前格子的下标是否在雷的数组里面
if (mineArray.includes(tableData[i][j].index))
tableData[i][j].type = 'mine'
div.classList.add('mine')
td.appendChild(div)
tr.appendChild(td)
//下标自增
index++
table.appendChild(tr)
mineArea.appendChild(table)
// console.log(table)
// console.log(tableData)
mineArea.onmousedown = function (e)
if (e.button === 0)
//左键
//进行区域搜索操作
searchArea(e.target)
if (e.button === 2)
//右键
//插旗子
flag(e.target)
// 随机生成所选配置对应的数量的雷
function initMine()
//1.创建一个数组，用于存储生成的地雷,生成对应长度的数组
var arr = new Array(curLevel.row * curLevel.col)
//2.往这个数组里面填充值
for (var i = 0; i < arr.length; i++)
arr[i] = i
//3.接下来打乱这个数组
arr.sort(() => 0.5 - Math.random())
//4.只保留对应雷数量的数组长度
return arr.slice(0, curLevel.mineNum)
//显示答案
function showAnswer()
运用HTML+CSS+JavaScript实现扫雷游戏
运行结果如下：
运用+Html+Css+JavaScript实现扫雷游戏
最近玩了一个小游戏扫雷，玩着玩着觉得这游戏挺有意思的，不如自己做一个出来，这样既可以让我更加了解扫雷这个游戏，同时也能敲敲代码，提高自己写代码的速度，哈哈！不过，通过做这个扫雷游戏，我也感觉又复习了一下过去学习数据结构的栈(用来解决迷宫问题的)。
文章目录
1. 实现原理
这里用9*9扫雷举例，在81个位置上共有10颗地雷，这10颗地雷的位置是随机的(通过js下的生成随机数方法实现地雷的位置随机)。为了便于将这些地雷附近雷数显
以上是关于javaScript扫雷的主要内容，如果未能解决你的问题，请参考以下文章