**HTML扫雷大战小游戏**
文章目录
前言
这里使用html代码5编写了一个扫雷大战小游戏
一、游戏截图
二、使用步骤
1.代码
代码如下（示例）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>html {
font-size: 10px;
}
body {
counter-reset: total cleared bombs flagged;
font-size: 1.6rem;
font-family: sans-serif;
}
H1 {
font-size:2rem;
margin:1rem auto;
width:fit-content
}
#game {
overflow:hidden;
position:relative;
margin:0 auto;
background:lightgrey;
width:fit-content;
height:fit-content;
padding:1rem;
border:0.3rem outset lightgrey;
border-radius:1rem;
}
/*
grid square.
*/
.square {
position: relative;
float: left;
display: block;
width: 2rem;
height: 2rem;
border: 1px grey solid;
background-color: lightgrey;
text-align: center;
}
/*
these will be the "buttons"
that hide the grid.
*/
.square > label,
.square > .flag {
position: absolute;
left: -0.1rem;
top: -0.1rem;
right: -0.1rem;
bottom: -0.1rem;
border: 0.2rem outset grey;
background-color: darkgrey;
}
/*
switch for flag mode and clear mode
*/
#flag-mode {
display:none;
}
/*
buttons for global settings
*/
[for="flag-mode"],
[for="show-bombs"] {
display:block;
margin:0 auto;
width:fit-content;
background:lightgrey;
padding:0 0.5rem;
border:2px outset grey;
border-radius:0.5rem;
margin:0.2rem auto;
}
#flag-mode:not(:checked) + [for="flag-mode"]:after {
content:" OFF ";
font-weight:bold;
}
#flag-mode:checked + [for="flag-mode"]:after {
content:" ON ";
font-weight:bold;
}
/*
checkboxes to control state of each square
these need to be "visible"
for the counter to work.
push them far off to the left.
*/
.open-square,.flag-square {
position: absolute;
left: -1000rem;
}
/*
count the total clearable
*/
.open-square:not(.bomb) {
counter-increment:total;
}
/*
count the number of bombs
*/
.open-square.bomb {
counter-increment:bombs;
}
/*
hide the label "button" when it's clicked
*/
.open-square:checked + .square > label {
display: none;
}
/*
show the number of surounding bombs (if any)
with different colors for the count values
*/
:not(.bomb)[data-count] + .square:before {
line-height:2rem;
font-weight:bold;
}
:not(.bomb)[data-count="1"] + .square:before {
content:"1";
color: blue;
}
:not(.bomb)[data-count="2"] + .square:before {
content:"2";
color: green;
}
:not(.bomb)[data-count="3"] + .square:before {
content:"3";
color: red;
}
:not(.bomb)[data-count="4"] + .square:before {
content:"4";
color: darkblue;
}
:not(.bomb)[data-count="5"] + .square:before {
content:"5";
color: brown;
}
:not(.bomb)[data-count="6"] + .square:before {
content:"6";
color: cyan;
}
:not(.bomb)[data-count="7"] + .square:before {
content:"7";
color: black;
}
:not(.bomb)[data-count="8"] + .square:before {
content:8;
color: grey;
}
/*
bomb square.
*/
.bomb + .square {
background-color: red
}
.bomb + .square:before {
content: "