实战来喽---扫雷！！！

最新推荐文章于 2024-09-11 17:09:49 发布

霓朦

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量107

点赞数

分类专栏：实战文章标签： javascript

本文链接：https://blog.csdn.net/qq_48846376/article/details/107640475

版权

实战专栏收录该内容

1 篇文章 0 订阅

订阅专栏

///首页
<!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>

//CSS
*{
    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{
    /* display: none; */
    width: 600px;
    height: 400px;
    position:absolute;
    /* background-image: url(../img/success.png); */
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin:auto;
    border-radius: 20px;
}
.close{
    /* display: none; */
    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);
    /* display: inline-block; */
    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(){//生成100小格子,并且生产10个雷
        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});//初始都是0，生成一个div时，就加1
            }
        }
        block = document.getElementsByClassName('block');
      while(minesNum){//当雷数有的时候，就随机生产一个位置，然后在100个格子随机生产雷
        var  minedz = Math.floor( Math.random()*100);//一个随机得雷
        if(minegrop[minedz].mine===0){
            minegrop[minedz].mine = 1;//雷的状态，就进不来了
            block[minedz].classList.add('islei');//当前格子是雷
            minesNum--;//每生成一个雷就-1，一共10个，--
        }
        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');
            }///是雷就是alert---overimg
            setTimeout(function(){
                alertBox.style.display = 'block';
                alertImg.style.backgroundImage = 'url(./img/over.jpg)';
            },500)
        }else{                  遍历，遍历周围八个格子的雷数，但是也分为0和不为0的情况
            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++;//是雷就加1
                }
            }
         }
         lt && (lt.innerHTML = n);
         if(n == 0){/为0就扩散
             for(var i = pX-1;i<=pX+1;i++){/扩散
                 for(var j = pY-1;j<=pY+1;j++){/这个递归不等于0就停止
                     var nbhd = document.getElementById(i+'-'+j);
                     if(nbhd && nbhd.length !=0){//存在又不为0
                        if(!nbhd.classList.contains('check')){
                            nbhd.classList.add('check');
                            leftClick(nbhd);等于0继续调用自己
                        }
                     }
                 }
             }
         }
        }
     }
     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)';
        }
    }

///图
可以自己扣或者找百度要要！！！！

霓朦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实战来喽---扫雷！！！

///首页<!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/d.
复制链接

扫一扫

专栏目录