新建一个空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 ? ('<svg t="1606566388346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4955" width="28" height="28"><path d="M348.16 958.46399999c-165.888-1.024-299.52-135.168-298.496-300.032C50.176 495.10399999 184.32 362.49599999 348.16 363.00799999c165.376 0.512 298.496 136.704 297.472 305.152-0.512 159.232-136.192 291.328-297.472 290.304z m215.04-315.904c-17.408 72.192-55.808 128-116.224 167.424-60.928 39.424-127.488 49.664-200.704 37.376 53.248 47.104 151.04 57.856 229.376 6.656 69.12-45.568 110.08-132.608 87.552-211.456zM833.024 306.68799999c10.752 7.168 20.48 13.312 29.696 19.456-38.4 60.416-122.88 60.928-163.328 2.56-7.168-10.24-12.8-20.992-20.48-30.72-29.696-36.864-80.384-31.744-103.424 11.264 12.8 7.68 26.112 15.36 38.912 23.552 21.504 13.312 26.624 30.72 13.824 52.736-9.728 17.408-20.48 34.816-32.256 53.76-46.08-51.2-101.888-83.968-169.472-101.376 13.312-22.016 24.576-42.496 37.888-61.952 9.728-13.824 26.112-16.384 43.008-8.192 10.752 5.12 20.992 11.776 32.768 18.432 4.096-5.632 8.192-11.264 12.288-16.384 39.936-50.176 114.688-50.688 154.624-0.512 6.656 8.192 12.288 16.896 17.92 25.6 29.696 43.52 69.12 48.128 108.032 11.776zM948.224 369.66399999c-23.04-0.512-32.256-6.656-31.744-20.992 0.512-12.8 8.192-18.432 20.48-17.92 23.04 0.512 34.816 7.68 33.792 21.504-1.024 13.824-9.216 18.432-22.528 17.408zM871.424 213.50399999c-1.024 28.16-10.24 40.96-24.064 39.424-12.288-1.536-17.92-9.728-17.408-21.504 0.512-20.48 10.752-35.328 24.064-31.744 7.68 2.048 13.824 10.752 17.408 13.824zM896 279.55199999c2.56-16.896 19.968-33.28 33.792-32.768 11.264 0.512 18.432 6.144 17.92 18.432 0 11.264-17.92 28.16-30.208 26.624-7.68-1.536-14.336-8.192-21.504-12.288z" p-id="4956" fill="#707070"></path></svg>') : ('<span class="color-' + mine.num + '">' + (mine.num || '') + '</span>');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 = '<svg t="1606549387460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15295" width="28" height="28"><path d="M437.7 833.3c-13.8 0-25.2-11.3-25.2-25.2V225.6l50.3 29.2v553.4c0 13.8-11.3 25.1-25.1 25.1z" fill="#FF3e26" p-id="15296"></path><path d="M714.1 399.9L412.3 225.6v348.5z" fill="#FF3333" p-id="15297"></path></svg>';}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>
