HTML部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS扫雷</title>
<link rel="stylesheet" href="Mine.css">
</head>
<body>
<div class="wrapper">
<div class="btn" id="btn"></div>
<div class="box" id="box"></div>
<div class="flagBox" id="flagBox">当前剩余雷数：
<span id="score">10</span>
</div>
<div class="alertBox" id="alertBox">
<div class="alertImg" id="alertImg">
<div class="close" id="close"></div>
</div>
</div>
</div>
<script type="text/javascript" src="Mine.js"></script>
</body>
</html>
CSS部分：
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-image: url("bg.jpg");
background-size: 100% 100%;
}
.btn {
height: 140px;
width: 170px;
position: absolute;
left: 50px;
background-image: url("startGame.png");
background-size: 100% 100%;
cursor: pointer;
}
.box {
width: 500px;
height: 500px;
transform: perspective(800px) rotateX(45deg);
margin: 20px auto;
border-top: 1px solid #b25f27;
border-left: 1px solid #b25f27;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
display: none;
}
.flagBox {
position: absolute;
top: 50px;
left: 50%;
width: 200px;
height: 50px;
margin-left: -100px;
color: #333;
font-size: 20px;
font-weight: bolder;
}
.alertBox {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.alertImg {
height: 400px;
width: 600px;
background-image: url("success.png");
background-size: 100% 100%;
position: absolute;
left: -9px;
top: 3px;
right: 0;
bottom: 0;
margin: auto;
border-radius: 20px;
}
.close {
position: absolute;
right: 0;
top: 0;
height: 40px;
width: 40px;
background-image: url("closeBtn.png");
background-size: 100% 100%;
cursor: pointer;
}
.block {
width: 49px;
height: 49px;
border-right: 1px solid #b25f27;
border-bottom: 1px solid #b25f27;
box-shadow: 0 0 4px #333 inset;
background-image: url("cao.jpg");
float: left;
}
.show {
background-imag: url("dilei.jpg");
background-size: 100% 100%;
}
.num {
background: #ecd0a1;
font-size: 18px;
font-weight: bold;
line-height: 49px;
text-align: center;
}
.flag {
background-image: url("hongqi.jpg");
background-size: 100% 100%;
javascript部分:
//// JavaScript Document
var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var score = document.getElementById('score');
var minesNum;
var mineOver;
var block;
var mineMap = [];
var startGameBool = true;
bindEvent();
function bindEvent() {
startBtn.onclick = function() {
if (startGameBool) {
box.style.display = 'block';
flagBox.style.display = 'block';
init();
startGameBool = false;
}
}
box.onmousedown = function() {
return false;
}
box.onmousedown = function(e) {
var event = e.target;
if (e.which == 1) {
leftClick(event);
} else if (e.which == 3) {
rightClick(event);
}
}
closeBtn.onclick = function() {
alertBox.style.display = 'none';
flagBox.style.display = 'none';
box.style.display = 'none';
box.innerHTML = '';
startGameBool = true;
}
}
function init() {
minesNum = 10;
mineOver = 10;
score.innerHTML = mineOver;
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
var con = document.createElement('div');
con.classList.add('block');
con.setAttribute('id', i + '-' + j);
box.appendChild(con);
mineMap.push({
mine: 0
});
}
}
block = document.getElementsByClassName('block');
while (minesNum) {
var mineIndex = Math.floor(Math.random() * 100);
if (mineMap[mineIndex].mine === 0) {
block[mineIndex].classList.add('islei');
mineMap[mineIndex].mine === 1;
minesNum--;
}
}
}
function leftClick(dom) {
var islei = document.getElementsByClassName('islei');
if (dom && dom.classList.contains('islei')) {
for (var i = 0; i < islei.length; i++) {
islei[i].classList.add('show');
}
setTimeout(function() {
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url("over.jpg")';
}, 800)
} else {
var n = 0;
var posArr = dom && dom.getAttribute('id').split('-');
var posX = posArr && +posArr[0];
var posY = posArr && +posArr[1];
dom && dom.classList.add('num');
for (i = posX - 1; i <= posX + 1; i++) {
for (var j = posY - 1; j <= posY + 1; j++) {
var aroundBox = document.getElementById(i + '-' + j);
if (aroundBox && aroundBox.classList.contains('islei')) {
n++;
}
}
}
dom && (dom.innerHTML = n);
if (n == 0) {
for (i = posX - 1; i <= posX + 1; i++) {
for (j = posY - 1; j <= posY + 1; j++) {
var nearBox = document.getElementById(i + '-' + j);
if (nearBox && nearBox.length != 0) {
if (!nearBox.classList.contains('check'))
nearBox.classList.add('check');
leftClick(nearBox);
}
}
}
}
}
}
function rightClick(dom) {
if (dom.classList.contains('num')) {
return;
}
dom.classList.toggle('flag');
if (dom.classList.contains('islei') && dom.classList.contains('flag')) {
mineOver--;
}
if (dom.classList.contains('islei') && !dom.classList.contains('flag')) {
mineOver++;
}
score.innerHTML = mineOver;
if (mineOver == 0) {
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url("success.png")';
}
}
来源：https://www.cnblogs.com/czhiyong/p/10878084.html