扫雷js版

Posted by 甘家城 on 2018-02-27 Viewed times

是老早之前写的,今天整理系统文件发现了这个扫雷,也是小惊喜,小看了下还挺有趣哈!

直接上代码,具体在代码中注释。

主要看点有两块,一个是从n个整数随机产生不重复的m个随机整数,m<n

另一个就是自动搜寻周边不是雷的区域,也就是点了一个不是雷有时会显现一大片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
    <title>扫雷</title>
    <style type="text/css">
        *{
            color: black;
            margin:0px;
            padding:0px;
        }
        html,body{
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            text-decoration: none;
            height: 100%;
        }
        .con div{
            height: 40px;
            margin-left: 0.2%;
            width: 11%;
            display: inline-block;
            border: solid 1px #000;
            position: absolute;
            line-height: 50px;
            text-align: center;
            color:red;
        }
        .ti{
            position: absolute;
            bottom: 12%;
        }
    </style>
</head>
<body>
    <div id="contain" class="con"></div>
    <div class="ti">已花时间:<span id="time">0</span>秒</div>
    <script type="text/javascript">
        var leiRes=new Array(),nums=new Array();
        var Lei=1,i,jk,G=81,res=1,clickNum=0,num=0;
        //随机产生区间内的随机数
        function setRandomNum(min,max){
            return Math.floor(Math.random()*(max-min+1)+min);
        }
        //搜寻周边8个点
        function NotLeiNum(n){
            var z=Math.floor(n/9),x=n%9,leiNum=0;
            var arr=new Array();
            if(z-1>=0){
                arr.push((z-1)*9+x);
            }
            if(z+1<9){
                arr.push((z+1)*9+x);
            }
            if(x-1>=0){
                arr.push(z*9+x-1);
            }
            if(x+1<9){
                arr.push(z*9+x+1);
            }
            if(x-1>=0&&z-1>=0){
                arr.push((z-1)*9+x-1);
            }
            if(x-1>=0&&z+1<9){
                arr.push((z+1)*9+x-1);
            }
            if(x+1<9&&z-1>=0){
                arr.push((z-1)*9+x+1);
            }
            if(x+1<9&&z+1<9){
                arr.push((z+1)*9+x+1);
            }
            for(i=0;i<arr.length;i++){
                if(leiRes[arr[i]]==1){
                    leiNum++;
                }
            }
            return leiNum;
        }
        //搜寻周边四个点
        function NotLei(n){
            var z=Math.floor(n/9),x=n%9,leiNum=0;
            var arr=new Array();
            if(z-1>=0){
                arr.push((z-1)*9+x);
            }
            if(z+1<9){
                arr.push((z+1)*9+x);
            }
            if(x-1>=0){
                arr.push(z*9+x-1);
            }
            if(x+1<9){
                arr.push(z*9+x+1);
            }
            for(i=0;i<arr.length;i++){
                if(leiRes[arr[i]]==1){
                    leiNum++;
                }
            }
            if(leiNum<1){
                if(NotLeiNum(n)==0){
                    document.getElementById(n).innerHTML=0;
                    document.getElementById(n).style.backgroundColor="#84EFFF";
                    document.getElementById(n).style.color="#000";
                    return 1;
                }
            }
            return 0;
        }
        //递归判断周边四个点
        function judgeLei(n,dir){
            var z=Math.floor(n/9),x=n%9,leiNum=0;
            var arr=new Array();
            switch(dir){
                case 1:
                if(z-1>=0&&leiRes[(z-1)*9+x]==0){
                    if(NotLei((z-1)*9+x)){
                        judgeLei((z-1)*9+x,1);
                    }
                }
                
                case 2:
                if(z+1<9&&leiRes[(z+1)*9+x]==0){
                    if(NotLei((z+1)*9+x)){
                        judgeLei((z+1)*9+x,2);
                    }
                }
                
                case 3:
                if(x-1>=0&&leiRes[z*9+x-1]==0){
                    if(NotLei(z*9+x-1)){
                        judgeLei(z*9+x-1,3);
                    }
                }
                
                case 4:
                if(x+1<9&&leiRes[z*9+x+1]==0){
                    if(NotLei(z*9+x+1)){
                        judgeLei(z*9+x+1,4);
                    }
                }
            }
        }
        //初始化
        for(i=0;i<G;i++){
            nums[i]=i;
            j=Math.floor(i/9),k=i%9;
            leiRes[i]=0;
            var ele=document.createElement("div");
            ele.setAttribute("id",i);
            document.getElementById("contain").appendChild(ele);
            document.getElementById(i).setAttribute("style","top:"+j*40+"px;"+"left:"+k*11+"%");
        }
        //n个整数获取m个不相等整数
        //思路为例存有0-100的数组,首先随机获取一个整数,然后这个整数作为下标与数组下标0的数交换位置,进行下一步从数组下标1-100中在获取数
        for(i=0;i<Lei;i++){
            r=setRandomNum(i,G-1);
            var temp=nums[i];
            nums[i]=nums[r];
            nums[r]=temp;
            leiRes[nums[i]]=1;
        }
        //主游戏环节,为所有节点绑定事件
        var sl=document.getElementById("contain").childNodes;
        for(i=0;i<sl.length;i++){
            sl[i].onclick=function(){
                for(j=0;j<Lei;j++){
                    if(this.id==nums[j]){
                        res=0;
                        document.getElementById(this.id).innerHTML="雷";
                        alert('游戏失败');
                        if(confirm("确认重新开始游戏?")){
                            window.location.reload();
                        }
                    }
                }
                if(res==1){
                    var n = NotLeiNum(this.id);
                    document.getElementById(this.id).innerHTML=n;
                    document.getElementById(this.id).style.backgroundColor="#84EFFF";
                    document.getElementById(this.id).style.color="#000";
                    if(n==0){
                        judgeLei(this.id,1);
                        /*judgeLei(this.id,2);
                        judgeLei(this.id,3);
                        judgeLei(this.id,4);*/
                    }
                }
                seledNum=document.getElementById("contain").childNodes;
                for(i=0;i<seledNum.length;i++){
                    if(seledNum[i].innerHTML==""){
                        num++;
                    }
                }
                if(num==Lei){
                    alert("你成功啦");
                }else{
                    num=0;
                }
            }
        }
        //计时器
        var n=0;
        function addtime(){
            n++;
            document.getElementById("time").innerHTML=n;
        }
        setInterval("addtime()",1000);
        </script>
</body>
</html>

版权声明:本文为原创文章,转载请注明出处和作者,不得用于商业用途,请遵守 CC BY-NC-SA 4.0协议。

支付宝打赏 微信打赏

赞赏一下