.box{
width: 300px;
height: 300px;
position: absolute;
}
.box div{
width:30px;
height:30px;
background-color: #ccc;
border:2px solid #666;
border-top-color: #fff;
border-left-color: #fff;
float:left;
text-align: center;
box-sizing: border-box;
}
.suceen{
width: 300px;
height: 300px;
position: absolute;
font-weight: 700;
font-size: 30px;
color: chocolate;
line-height: 300px;
text-align: center;
background-color: navy;
z-index: 2;
opacity: 0.8;
display: none;
}
.s{
width: 300px;
height: 300px;
position: absolute;
font-weight: 700;
font-size: 30px;
color: darkblue;
line-height: 300px;
text-align: center;
background-color: forestgreen;
z-index: 2;
opacity: 0.8;
display: none;
}
#span{
width: 50px;
position: absolute;
top: 320px;
}
10
var box = document.getElementsByClassName('box')[0];
var span = document.getElementById('span');
var k = document.getElementsByClassName('suceen')[0];
var s = document.getElementsByClassName('s')[0];
var arr = [];
var d = 10;
var c = 10;
start();
lei();
click();
function start(){
for(var i=0; i<10; i++){
for(var j=0; j<10; j++){
var div = document.createElement('div');
div.setAttribute('id', i + '-' + j);
div.classList.add('div');
box.appendChild(div);
}
}
}
function lei(){
var a = 0;
for(var i=0; i<10; i++){
var n = Math.floor(Math.random()*100);
for(var j=0; j if(n == arr[j]){ i--; a = 1; break; } } if(a == 0){ arr.push(n); } a = 0; } for(var i=0; i<10; i++){ console.log(arr[i]); } var div = document.querySelectorAll('.box div'); for(var i=0; i<10; i++){ div[arr[i]].classList.add('lei'); } } function click() { s.onclick = function () { s.style.display = 'none'; while(box.hasChildNodes()){ box.removeChild(box.firstChild); } arr = []; d = 10; c = 10; span.innerHTML = d; start(); lei(); click(); } s.oncontextmenu = function () { return false; } k.onclick = function () { k.style.display = 'none'; while(box.hasChildNodes()){ box.removeChild(box.firstChild); } arr = []; d = 10; c = 10; span.innerHTML = d; start(); lei(); click(); } k.oncontextmenu = function () { return false; } box.oncontextmenu = function () { return false; } box.onmousedown = function (e) { var event = e.target; if (e.which == 1 && event.num != 1) { leftClick(event); } else if (e.which == 3) { rightClick(event); } } } function leftClick(e){ var dives = document.querySelectorAll('.box div'); var lei = document.getElementsByClassName('lei'); if(e.classList.contains('lei')){ console.log('game over'); for(var i=0; i<10; i++){ lei[i].style.backgroundColor = 'red'; lei[i].innerHTML = '雷'; s.style.display = 'block'; } }else { var n = 0; var posArr = e && e.getAttribute('id').split('-'); var X = posArr && +posArr[0]; var Y = posArr && +posArr[1]; for(var i = X-1; i <= X + 1; i++){ for(var j = Y-1; j <= Y + 1; j++){ var aroundBox = document.getElementById(i + '-' + j); if(aroundBox && aroundBox.classList.contains('lei')){ n++; } } } e && (e.innerHTML = n); e && (e.style.backgroundColor = '#fff'); e.num = 1; console.log(e.num); if(n == 0){ for(var i = X-1; i <= X + 1; i++){ for(var j = Y-1; j <= Y + 1; j++){ var nearBox = document.getElementById(i + '-' + j); if(nearBox && nearBox.length != 0){ if(!nearBox.classList.contains('one')){ nearBox.classList.add('one');//这是关键避免死循环; leftClick(nearBox); } } } } } } } function rightClick(e){ var lei = document.getElementsByClassName('lei'); if(c>0 && e.num != 1){ c--; e.style.backgroundColor = 'blue'; e.num = 1; if(e.classList.contains('lei')){ d--; span.innerHTML = d; } if(d == 0){ console.log('suceeen'); k.style.display = 'block'; for(var i=0; i<10; i++){ lei[i].style.backgroundColor = 'red'; lei[i].innerHTML = '雷'; } } } }