网页版扫雷
新建一个空html文件，粘贴下面的代码，保存后，用浏览器打开就可以玩了（兼容IE10）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扫雷</title>
<style type="text/css">
.container {margin: auto;width: 960px;}
.panel {position: relative;height: 40px;font-size: 18px;}
.time-container {position: absolute;height: 30px;left: 60px;top: 0;bottom: 0;margin: auto;}
.count-container {position: absolute;height: 30px;right: 60px;top: 0;bottom: 0;margin: auto;}
.time,
.count {display: inline-block;width: 60px;color: #F00000;}
.sweep {
display: table;border-collapse: collapse;width: 960px;height: 512px;table-layout: fixed;
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
cursor: default;}
.table-row {display: table-row;}
.table-cell {
display: table-cell;border: 1px solid #333333;box-shadow: 0 0 6px #CCCCCC inset;
width: 32px;height: 32px;background: #6090FF;text-align: center;
vertical-align: middle;font-size: 16px;color: #333333;font-weight: 700;}
.color-1 {color: #00AA00;}
.color-2 {color: #3060FF;}
.color-3 {color: #CC0000;}
.color-4 {color: #0000AA;}
.color-5 {color: #880000;}
.color-6 {color: #007f7b;}
.color-7 {color: #000000;}
.color-8 {color: #666666;}
.show {background: #FFFFFF;}
</style>
</head>
<body>
<div class="container">
<div class="panel">
<div class="time-container"><span>已用时: </span><span id="time" class="time">0</span></div>
<div class="count-container"><span>剩余雷数: </span><span id="count" class="count">99</span></div>
</div>
<div id="sweep" class="sweep">
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function Mine(isMine) {
this.isMine = isMine;
this.num = 0;
this.status = 0;
this.row = 0;
this.column = 0;
}
var param = {rows: 16, columns: 30, mineCount: 99, leftCount: 0, showCount: 0, minest: [], running: false};
var sweep = document.querySelector('#sweep'),
tableCells = document.querySelectorAll('.table-cell');
var time = document.querySelector('#time'),
count = document.querySelector('#count');
var initTime = +new Date();
init();
function init() {
var minest = param.minest,
rows = param.rows,
columns = param.columns;
param.showCount = 0;
param.leftCount = param.mineCount;
count.innerHTML = param.leftCount;
minest.length = 0;
var arr = [];
for (var i = 0; i < rows * columns; i++) {
arr.push(new Mine(i < param.mineCount));
}
var minesr = null, s = null;
for (var i = 0; i < rows * columns; i++) {
if (i % columns === 0) {
minesr = [];
}
s = arr.splice((Math.random() * arr.length) | 0, 1)[0];
s.row = (i / columns) | 0;
s.column = i % columns;
minesr.push(s);
if (i % columns + 1 === columns) {
minest.push(minesr);
}
}
var m = 0;
for (var i = 0; i < rows * columns; i++) {
m = 0;
findRounds(minest[(i / columns) | 0][i % columns]).forEach(function (t) {
m += t.isMine;
});
minest[(i / columns) | 0][i % columns].num = m;
tableCells[i].innerHTML = '';
tableCells[i].classList.remove('show');
tableCells[i].setAttribute('data-index-row', (i / columns) | 0);
tableCells[i].setAttribute('data-index-column', i % columns);
}
}
function show(mine) {
if (mine.status === 1 || mine.status === 2) {
return;
}
var cell = tableCells[mine.row * param.columns + mine.column];
mine.status = 1;
cell.classList.add('show');
cell.innerHTML = mine.isMine ? ('') : ('+ mine.num + '">' + (mine.num || '') + '');
if (mine.isMine) {
setTimeout(function () {
param.running = false;
alert('失败了');
init();
}, 25);
return;
}
param.showCount++;
if (param.showCount >= param.rows * param.columns - param.mineCount) {
setTimeout(function () {
param.running = false;
alert('恭喜您赢了');
init();
}, 25);
return;
}
if (mine.num === 0) {
findRounds(mine).forEach(function (t) {
show(t);
});
}
}
function sign(mine) {
if (mine.status === 1) {
return;
}
var cell = tableCells[mine.row * param.columns + mine.column];
mine.status = 2;
param.leftCount--;
count.innerHTML = param.leftCount;
cell.innerHTML = '';
}
function unsign(mine) {
if (mine.status === 1) {
return;
}
var cell = tableCells[mine.row * param.columns + mine.column];
mine.status = 0;
param.leftCount++;
count.innerHTML = param.leftCount;
cell.innerHTML = '';
}
function findRounds(mine) {
var mines = [],
row = mine.row,
column = mine.column,
minest = param.minest,
rows = param.rows,
columns = param.columns;
var round = null;
if (row > 0) {
if (column > 0) {
round = minest[row - 1][column - 1];
if (round.status !== 1) {
mines.push(round);
}
}
round = minest[row - 1][column];
if (round.status !== 1) {
mines.push(round);
}
if (column < columns - 1) {
round = minest[row - 1][column + 1];
if (round.status !== 1) {
mines.push(round);
}
}
}
if (column > 0) {
round = minest[row][column - 1];
if (round.status !== 1) {
mines.push(round);
}
}
if (column < columns - 1) {
round = minest[row][column + 1];
if (round.status !== 1) {
mines.push(round);
}
}
if (row < rows - 1) {
if (column > 0) {
round = minest[row + 1][column - 1];
if (round.status !== 1) {
mines.push(round);
}
}
round = minest[row + 1][column];
if (round.status !== 1) {
mines.push(round);
}
if (column < columns - 1) {
round = minest[row + 1][column + 1];
if (round.status !== 1) {
mines.push(round);
}
}
}
return mines;
}
(function timing() {
if (param.running) {
time.innerHTML = Math.round((+new Date() - initTime) / 1000);
} else {
time.innerHTML = 0;
}
setTimeout(function () {
timing();
}, 100);
})();
sweep.addEventListener('click', function (e) {
e.preventDefault();
var target = e.target;
var minest = param.minest;
if (!target.classList || !target.classList.contains('table-cell')) {
return;
}
var row = target.getAttribute('data-index-row') - 0,
column = target.getAttribute('data-index-column') - 0;
var mine = minest[row][column];
if (!param.running) {
initTime = +new Date();
param.running = true;
}
show(mine);
}, false);
sweep.addEventListener('dblclick', function (e) {
e.preventDefault();
var target = e.target;
var minest = param.minest;
if (!target.classList || !target.classList.contains('table-cell')) {
target = target.parentNode || target;
if (!target.classList || !target.classList.contains('table-cell')) {
return;
}
}
var row = target.getAttribute('data-index-row') - 0,
column = target.getAttribute('data-index-column') - 0;
var mine = minest[row][column];
if (mine.status === 1) {
var rounds = findRounds(mine).filter(function (item) {
return item.status !== 2;
});
if (rounds.length === 1) {
if (rounds[0].isMine && rounds[0].status === 0) {
sign(rounds[0]);
} else {
show(rounds[0]);
}
} else {
var hasMine = false;
for (var i = 0; i < rounds.length; i++) {
if (rounds[i].isMine && rounds[i].status === 0) {
hasMine = true;
break;
}
}
if (!hasMine) {
rounds.forEach(function (t) {
show(t);
});
}
}
}
}, false);
sweep.addEventListener('contextmenu', function (e) {
e.preventDefault();
var target = e.target;
var minest = param.minest;
if (!target.classList || !target.classList.contains('table-cell')) {
target = target.parentNode || target;
if (!target.classList || !target.classList.contains('table-cell')) {
target = target.parentNode || target;
if (!target.classList.contains('table-cell')) {
return;
}
}
}
var row = target.getAttribute('data-index-row') - 0,
column = target.getAttribute('data-index-column') - 0;
var mine = minest[row][column];
if (mine.status === 2) {
unsign(mine);
} else if (mine.status === 0) {
sign(mine);
}
}, false);
</script>
</html>