多图警告⚠，其中 center 标签已被弃用，部分浏览器可能会无效！如果无法使用，详见下方css目录

各位早上中午下午傍晚晚上半夜凌晨好啊，我自从开设这个网站以来，都还没敲过代码，那我今天就试一下能不能写出一篇雅俗共赏（草）的文章。
好了废话说多点，这样*（@￥&（#&……￥（3

先搞个html，搭建一个初始地图

我们选择9x9的“初级地图”，因为操作起来简单一些

贴图

但是再此之前，我们要把贴图画出来，这里我画了，在下方：

每个贴图大小都是100px × 100px

调试1
调试2
未探索的方块
数字0
数字1
数字2
数字3
数字4
数字5
数字6
数字7
数字8

标错的旗子

创建页面

初始化

接下来写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>minesweeper</title>
</head>
<body><center>
    <!--标题-->
    <h1>minesweeper</h1>
    <!--游戏时间，无内容所以不显示-->
    <h3 id=gameTime></h3>
</body></center>
</html>

效果如下：

大伙可能有疑问：你的剩余雷数呢？

答：不搞😅如果需要，将会在以后补充！！

center标签

来自 www.runoob.com
HTML5 不支持 center 标签。请用 CSS 代替。
在 HTML 4.01 中，center 元素已废弃。
center 对其所包括的文本进行水平居中。

搭建地图

无脑div就好了
但是要注意一点：需要把坐标和该方块雷数信息标出，因为这样能方便程序执行
例如这是我的版本：

1	<img src="img/unknow-1.png" id="1-1 0" >

这里1-1指的是该方块的坐标，0是其雷数（因为还没有点开所以全部都设为0）
这是图片，引用我画的贴图（这是代表“未探索的方块”）
效果如下：

img标签

来自 www.runoob.com
在 HTML 中，图像由 img 标签定义。
img 是空标签，意思是说，它只包含属性，并且没有闭合标签。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

当然
点动成线，线动成面，我们以此类推，创建一排（9个方块）出来

<img src="img/unknow-1.png" id="1-1 0" ><img src="img/unknow-1.png" id="1-2 0" ><img src="img/unknow-1.png" id="1-3 0" ><img src="img/unknow-1.png" id="1-4 0" ><img src="img/unknow-1.png" id="1-5 0" ><img src="img/unknow-1.png" id="1-6 0" ><img src="img/unknow-1.png" id="1-7 0" ><img src="img/unknow-1.png" id="1-8 0" ><img src="img/unknow-1.png" id="1-9 0" >

效果如下：

接下来再添加一个div，这是排数

1
2
3

<div id="1" style="height: 100px;">
    <!--刚刚的9个方块代码放此-->
</div>

这个id可要可不要

重复九次（有九排）
效果如下：

大伙可能有疑问：为啥div的height是要设100px？

答：如果不设成100px，那么就会出现空隙，破坏游戏体验😅！！
如图：

div标签

来自 www.runoob.com
div 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
div 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
提示：div 元素经常与 CSS 一起使用，用来布局网页。
注意：默认情况下，浏览器通常会在 div 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

css什么的设置

没有！对，这个扫雷没有大面积的css使用，让你体验原汁原味的html+js的感jio！

对于 center 标签无法使用，这里利用css解决

1 2	<!--将body后加入如下代码，并删除原先的center标签--> <body style="text-align:center;">

原理：就是text-align居中，没啥😅

js！

初始化

命名一个index.js的文件
然后在“head”处引入js
如：

1	<script src="newMineSweeper.js"></script>

然后！轴，跟我去js搞♂事

右键菜单消失

1
2
3

document.oncontextmenu = function () { //菜单不显示，不然右键按倒菜单夺笋那
    return false;
}

document.oncontextmenu

来自 www.runoob.com
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意：所有浏览器都支持 oncontextmenu 事件，contextmenu 元素只有 Firefox 浏览器支持。

设置点击量

var time = 0//全局变量（只是为了方便调用移到上方）

window.onload = function () {  //判断点击的次数以及点击的坐标
    var arr = document.getElementsByTagName('img');//获取所有关于img标签的元素
    for (let i = 0; i < arr.length; i++) {//因为9*9=81，所以要小于81（不定）
        arr[i].onmousedown = function a() {//指定按下的是img元素


        }
    }
}

如果想看有没有反应，那就插入一个alert或者console在中间

window.onload

来自 www.runoob.com
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload() 通常用于 body 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

onmousedown

来自 www.runoob.com
onmousedown 事件会在鼠标按键被按下时发生。
与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：
- 1.onmousedown
- 2.onmouseup
- 3.onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
- 1.onmousedown
- 2.onmouseup
- 3.oncontextmenu

完整代码

没有！这些东西要自己动手才会懂！这些我也是自己一次次写出来的，自己实践还能加深印象，多好！

恭喜！对于扫雷游戏的初始配置已经完成，下一期！写出一个被解雇的代码！🤮