新建一个空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 #;box-shadow: 0 0 6px #CCCCCC inset; width: 32px;height: 32px;background: #6090FF;text-align: center; vertical-align: middle;font-size: 16px;color: #;font-weight: 700;} .color-1 {
color: #00AA00;} .color-2 {
color: #3060FF;} .color-3 {
color: #CC0000;} .color-4 {
color: #0000AA;} .color-5 {
color: #;} .color-6 {
color: #007f7b;} .color-7 {
color: #000000;} .color-8 {
color: #;} .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>
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/212820.html原文链接:https://javaforall.net
