原生Js實現掃雷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="suceen">過關啦,在來一次</div>
<div class="box"></div>
<div class="s">失敗了，在來一次</div>
<span id='span'>10</span>
<script>
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<arr.length; 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 = '雷';
}
}
}
}
</script>
</body>
</html>