html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui">
- <meta charset="UTF-8">
- <title > 扫雷 </title>
- <style>
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- .wrap{
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 300px;
- height: 300px;
- font-size: 0;
- user-select: none;
- }
- span{
- display: inline-block;
- vertical-align: middle;
- width: 30px;
- height: 30px;
- background: #ccc;
- border: 1px solid #fff;
- border-radius: 5px;
- font-size: 14px;
- text-align: center;
- line-height: 28px;
- }
- .clicked{
- background: #eee;
- }
- .boom{
- background: #f00;
- }
- .flag:after{
- content: '';
- display: block;
- width: 50%;
- height: 50%;
- margin: 25%;
- background: #f00;
- border-radius: 50%;
- }
- </style>
- </head>
- <body>
- <div class="wrap"></div>
- <script>
- // 雷数量
- var mine_num = 15;
- // 行
- var row = 10;
- // 列
- var col = 10;
- var span = null;
- var reg = /(\s|^)mine(\s|$)/;
- window.onload = init;
- // 初始化
- function init(){
- var str = '';
- for(i=0; i<row*col; i++){
- str += '<span></span>';
- }
- document.querySelector('.wrap').innerHTML = str;
- span = document.querySelectorAll('.wrap span');
- setmine();
- setNum();
- click();
- }
- // 埋雷
- function setmine(){
- var num = 0;
- do{
- var s = span[Math.floor(Math.random()*row*col)];
- !reg.test(s.classList.value) && (s.classList.add('mine'), num++);
- }while(num != mine_num);
- }
- // 周边雷数量
- function setNum(){
- span.forEach(function(el, i){
- var num = 0;
- // 左上
- span[i-col-1] && i%col!=0 && reg.test(span[i-col-1].classList.value) && num++;
- // 上
- span[i-col] && reg.test(span[i-col].classList.value) && num++;
- // 上右
- span[i-col+1] && (i-col+1)%col!=0 && reg.test(span[i-col+1].classList.value) && num++;
- // 右
- span[i+1] && (i+1)%col!=0 && reg.test(span[i+1].classList.value) && num++;
- // 右下
- span[i+col+1] && (i+col+1)%col!=0 && reg.test(span[i+col+1].classList.value) && num++;
- // 下
- span[i+col] && reg.test(span[i+col].classList.value) && num++;
- // 下左
- span[i+col-1] && i%col!=0 && reg.test(span[i+col-1].classList.value) && num++;
- // 左
- span[i-1] && i%col!=0 && reg.test(span[i-1].classList.value) && num++;
- num>0 && el.setAttribute('data-num', num);
- });
- }
- // 点击
- function click(){
- function el_reg(el, i){
- var num = el.getAttribute('data-num');
- num && (el.click());
- var bool = !num && !reg.test(el.classList.value) && !/(\s|^)(clicked|flag)(\s|$)/.test(el.classList.value);
- bool && (el.classList.add('clicked'), blank(el, i))
- return bool;
- }
- function blank(el, i){
- el.classList.add('clicked');
- // 左上
- span[i-col-1] && i%col!=0 && el_reg(span[i-col-1], i-col-1);
- // 上
- span[i-col] && el_reg(span[i-col], i-col);
- // 上右
- span[i-col+1] && (i-col+1)%col!=0 && el_reg(span[i-col+1], i-col+1);
- // 右
- span[i+1] && (i+1)%col!=0 && el_reg(span[i+1], i+1);
- // 右下
- span[i+col+1] && (i+col+1)%col!=0 && el_reg(span[i+col+1], i+col+1);
- // 下
- span[i+col] && el_reg(span[i+col], i+col);
- // 下左
- span[i+col-1] && i%col!=0 && el_reg(span[i+col-1], i+col-1);
- // 左
- span[i-1] && i%col!=0 && el_reg(span[i-1], i-1);
- }
- span.forEach(function(el, i){
- // 点击
- el.onclick = function(){
- // 点击过或者标记的不可再点
- var flaged = /(\s|^)(clicked|flag)(\s|$)/.test(this.classList.value);
- if(flaged){
- return;
- }
- // 点击雷
- var mine = reg.test(el.classList.value);
- if(mine){
- document.querySelectorAll('.mine').forEach(function(el, i){
- el.classList.add('boom');
- });
- setTimeout(function(){
- alert('YOU DIE');
- init();
- }, 500);
- return;
- }
- // 点击雷周边
- var num = this.getAttribute('data-num');
- num && (this.classList.add('clicked'), this.innerHTML = num);
- // 空
- num === null && blank(el, i);
- // 只剩雷时胜利
- if(document.querySelectorAll('.clicked').length == col*row-mine_num){
- setTimeout(function(){
- alert('YOU WIN');
- init();
- }, 500);
- }
- }
- // 右键标记
- el.oncontextmenu = function(e){
- e.preventDefault();
- if(/(\s|^)clicked(\s|$)/.test(this.classList.value)){
- return;
- }
- var has = /(\s|^)flag(\s|$)/.test(this.classList.value);
- has? this.classList.remove('flag') : this.classList.add('flag');
- }
- })
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/32244/c0d9c42773c356f92fa92af934efb8f1.html