<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫雷</title>
<link rel="stylesheet" href="./css/demo.css">
</head>
<body>
<div class="wrapper">
<div class="btn" id="btn"></div>
<div class="gameBox" id="gameBox"></div>
<p class="flaxBox" id="flaxBox">
剩余雷数:<span id="lei">10</span>
</p>
<div class="alertBox" id="alertBox">
<div class="alertImg" id="alertImg">
<div class="close" id="close"></div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 100%;
height: 100%;
background-image: url(../img/bg.jpg) ;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
}
.btn{
width:170px;
height: 140px;
left: 50px;
position: absolute;
background-image: url(../img/startGame.png);
background-size: 100% 100%;
cursor: pointer;
}
.gameBox{
display:none;
width:500px;
height:490px;
margin: 20px auto;
border:1px solid #B25F27;
box-shadow:5px 5px 5px rgb(0,0,0,0.5);
transform: perspective(800px) rotateX(45deg);
}
.flaxBox{
display: none;
width: 200px;
height: 50px;
position: absolute;
top: 25px;
left: 50%;
margin-left: -100px;
font-size: 24px;
color:rgb(0, 0, 0);
font-weight:bold;
}
.alertBox{
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color:rgb(0,0,0,0.2) ;
}
.alertImg{
width: 600px;
height: 400px;
position:absolute;
background-size: 100% 100%;
top: 0;
left: 0;
right: 0;
bottom:0;
margin:auto;
border-radius: 20px;
}
.close{
width:40px;
height: 40px;
position:absolute;
background-image: url(../img/closeBtn.png);
background-size: 100% 100%;
cursor: pointer;
top: 0;
right: 0;
}
.block{
width:49px;
height:49px;
border-right:1px solid #B25F27;
border-bottom: #B25F27;
box-shadow: 0 0 4px #333 inset;
background-image: url(../img/cao.jpg);
float: left;
}
.show{
background-image: url(../img/dilei.jpg);
background-size: 100% 100%;
}
.num {
background:rgb(184, 158, 104);
font-size: 18px;
font-weight: bold;
line-height: 49px;
text-align: center;
color: blueviolet;
}
.qizi{
background-image: url(../img/hongqi.jpg);
background-color: bisque;
background-size: 100% 100%;
}
var starBtn = document.getElementById('btn');
var gameBox = document.getElementById('gameBox');
var flaxBox = document.getElementById('flaxBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var lei = document.getElementById('lei');
var minesNum;
var mineover;
var block;
var minegrop=[];
var reChear = true;
clickThing();
function clickThing(){
starBtn.onclick = function(){
if(reChear){
gameBox.style.display = 'block';
flaxBox.style.display = 'block';
init();
reChear = false;
}
}
gameBox.oncontextmenu = function(){
return false;
}
gameBox.onmousedown = function(e){
var event = e.target;
if(e.which==1){
leftClick(event);
}else if(e.which==3){
rightClick(event);
}
closeBtn.onclick = function(){
alertBox.style.display = 'none';
alertImg.style.display = 'none';
gameBox.style.display = 'none';
gameBox.innerHTML = '';
}
}
}
function init(){
minesNum = 10;
mineover = 10;
lei.innerHTML = mineover;
for (var i =0;i<10;i++){
for(var j = 0;j<10;j++){
var gez = document.createElement('div');
gez.classList.add('block');
gez.setAttribute('id',i+'-'+j);
gameBox.appendChild(gez);
minegrop.push({mine:0});
}
}
block = document.getElementsByClassName('block');
while(minesNum){
var minedz = Math.floor( Math.random()*100);
if(minegrop[minedz].mine===0){
minegrop[minedz].mine = 1;
block[minedz].classList.add('islei');
minesNum--;
}
block[minedz].classList.add('islei');
}
}
function leftClick(lt){
if(lt.classList.contains('qizi')){
return;
}
var islei = document.getElementsByClassName('islei');
if(lt&& lt.classList.contains('islei')){
console.log('shibai');
for(var i = 0;i<islei.length;i++){
islei[i].classList.add('show');
}
setTimeout(function(){
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url(./img/over.jpg)';
},500)
}else{
var n=0;
var pSz = lt && lt.getAttribute('id').split('-');
var pX = pSz && + pSz[0];
var pY = pSz && + pSz[1];
lt && lt.classList.add('num');
for(var i = pX-1;i<=pX+1;i++){
for(var j = pY-1;j<= pY+1;j++){
var nine= document.getElementById(i+'-'+j);
if(nine && nine.classList.contains('islei')){
n++;
}
}
}
lt && (lt.innerHTML = n);
if(n == 0){
for(var i = pX-1;i<=pX+1;i++){
for(var j = pY-1;j<=pY+1;j++){
var nbhd = document.getElementById(i+'-'+j);
if(nbhd && nbhd.length !=0){
if(!nbhd.classList.contains('check')){
nbhd.classList.add('check');
leftClick(nbhd);
}
}
}
}
}
}
}
function rightClick(rt){
if(rt.classList.contains('num')){
return ;
}
rt.classList.toggle('qizi');
if(rt.classList.contains('islei')&&rt.classList.contains('qizi')){
mineover--;
}
if(rt.classList.contains('islei')&& !rt.classList.contains('qizi')){
mineover++;
}
lei.innerHTML = mineover;
if(mineover == 0){
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url(./img/success.png)';
}
}
可以自己扣或者找百度要要!!!!