原生javascript扫雷游戏

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生javascript扫雷游戏相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>扫雷游戏</title>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="Notepad++" />
<meta name="Robots" content="all" />
<meta name="Author" content="622" />
<meta name="Keywords" content="模版" />
<meta name="Description" content="模版" />
<meta name="Copyright" content="Copyright (c) 2014 rick All Rights Reserved." />
<script language="javascript"></script>
<style>
.all{margin:0 auto; width:960px;}

ul,li{margin:0; padding:0; list-style:none;}
#block>ul{height:32px; cursor:pointer;}
#block>ul>li{float:left; width:30px; height:30px; border:1px solid black; background:gray; color:white; text-align:center; position:relative;}
#block>ul>li>span{position:absolute; top:0; left:0; height:30px; width:30px; background:#eee;}

#ctrl{margin:20px auto;}
</style>
</head>
<body>
<div class="all">
    <h1>小乐扫雷大作战</h1>
    <form id="ctrl">
        <label>行（1~30）<input type="text" id="row_n" value="10" /></label><br />
        <label>列（1~30）<input type="text" id="col_n" value="10" /></label><br />
        <label>雷的比例（1~0.01）<input type="text" id="thunder_n" value="0.3" /></label><br />
        <input type="button" id="submit" value="提交" />
        <input type="reset" id="reset" value="重置" /><br />
        <label>提示消息<input type="text" id="msg" readonly="ture" /></label>
    </form>
    <div id="block"></div>
</div>
</body>
</html>

document.oncontextmenu=function ()
{
    return false;    //阻止默认事件
};
window.onload=function(){
        var oSubmit = document.getElementById("submit");
        //var oReset = document.getElementById("reset");
        //var oRow_n = document.getElementById("row_n");
        //var oCol_n = document.getElementById("col_n");
        //var oThunder_n = document.getElementById("thunder_n");
        var oMsg = document.getElementById("msg");
        oMsg.value = "请输入要挑战的雷阵!";
        oSubmit.onclick = init;
    
    function init(){
        var oSubmit = document.getElementById("submit");
        var oReset = document.getElementById("reset");
        var oRow_n = document.getElementById("row_n");
        var oCol_n = document.getElementById("col_n");
        var oThunder_n = document.getElementById("thunder_n");
        var oMsg = document.getElementById("msg");
        

        //参数设置
        var m = oRow_n.value;  //行
        var n = oCol_n.value;  //列
        var p = oThunder_n.value;
        var x = Math.floor(m*n*p);  //雷的数目
        //console.log(m,n,x);
        
        if(!(m<30&&m>=0&&n<30&&n>=0&&p>=0&&p<=1)){
            oMsg.value = "参数不合法";
        }else{
            oMsg.value = "参数设置成功";
            var oDiv = document.getElementById("block");
            oDiv.innerHTML = "";
            var array = new Array(m);

            //布局
            for(var j=0; j<m; j++){
                var oUl = document.createElement("ul");
                array[j] = new Array(n);
                for(var i=0; i<n; i++){
                    var oLi = document.createElement("li");
                    oUl.appendChild(oLi);
                    array[j][i] = [0,0,0]; //[是否是雷,标记状态,周围雷数]
                }
                oDiv.appendChild(oUl);
            }
            
            //初始化雷区
            for(var i=0; i<x; i++){
                var a = Math.floor(Math.random() * m);
                var b = Math.floor(Math.random() * n);
                if(array[a][b][0] == 0){
                    array[a][b][0] = 1;
                    valid(a-1,b-1);
                    valid(a-1,b);
                    valid(a-1,b+1);
                    valid(a,b-1);
                    valid(a,b+1);
                    valid(a+1,b-1);
                    valid(a+1,b);
                    valid(a+1,b+1);
                }else{
                    x++;
                }
            }
            
            //布雷
            for(var i=0; i<m; i++){
                for(var j=0; j<n; j++){
                    oLi = getBlock(i,j);
                    if(array[i][j][0] == 0){
                        oLi.innerHTML = array[i][j][2];
                    }else{
                        oLi.innerHTML = "#";
                        oLi.style.background = "red";
                    }
                    var oSpan = document.createElement("span");
                    oLi.appendChild(oSpan);
                }
            }
            
            //监听事件
            for(var i=0; i<m; i++){
                for(var j=0; j<n; j++){
                    var oSpan = getBlock(i,j).getElementsByTagName("span")[0];
                    oSpan._i = i;
                    oSpan._j = j;
                    function listen_1(){
                        if(array[this._i][this._j][1]==2) return false;
                        this.style.display = "none";
                        array[this._i][this._j][1] = 1;
                        check();
                        if(array[this._i][this._j][0]==1){
                            alert("game over");
                            oMsg.value = "抱歉，挑战失败";
                            var aSpan = oDiv.getElementsByTagName("span");
                            for(var m=0; m < aSpan.length; m++){
                                aSpan[m].style.display = "none";
                            }
                        }
                    }
                    function listen_2(){
                        if(array[this._i][this._j][1] == 0){
                            array[this._i][this._j][1] = 2;
                            this.style.backgroundColor = "red";
                            check();
                        }else{
                            array[this._i][this._j][1] = 0;
                            this.style.backgroundColor = "#eee";
                            check();
                        }
                    }
                    function check(){
                        console.log(array);
                        var f=1;
                        for(var i=0; i<m; i++){
                            for(var j=0; j<n; j++){    
                                console.log(array[i][j]);
                                if(array[i][j][0]==0){
                                    if(array[i][j][1]!=1){
                                        f=0;
                                        break;
                                        break;
                                    }
                                }
                                if(array[i][j][0]==1){
                                    if(array[i][j][1]!=2){
                                        f=0;
                                        break;
                                        break;
                                    }
                                }
                            }
                        }
                        if(f==1){
                            alert("恭喜挑战成功");
                            oMsg.value = "恭喜挑战成功";
                        }
                    }                    
                    on(oSpan,"click",listen_1);
                    on(oSpan,"contextmenu",listen_2);
                    
                }
            }
        }
    

        function valid(x,y){
            if(x>=0&&x<m&&y>=0&&y<n){
            array[x][y][2] ++;
            }
        }
        
    }
    function getBlock(m,n){
        var oDiv = document.getElementById("block");
        var aUl = oDiv.getElementsByTagName("ul");
        var ali = aUl[m].getElementsByTagName("li");
        var oLi = ali[n];
        return oLi;
    }

    function on(node,eventType,handler){
        node = typeof node == "string" ? document.getElementById(node) : node;
        if(document.all){
            node.attachEvent("on" + eventType, handler);
        }else{
            node.addEventListener(eventType, handler, false);
        }
    }
    

}

以上是关于原生javascript扫雷游戏的主要内容，如果未能解决你的问题，请参考以下文章

运用HTML+CSS+JavaScript实现扫雷游戏

纯原生JS用面向对象class方法实现简易扫雷小游戏

原生js扫雷游戏

JavaScript扫雷游戏mineClearance