JS + PHP 扫雷

最近2天闲来无事写了个JS + PHP 扫雷

本来预计是要用PHP写的,结果写着写着就 变JS的了....

源码放出大家多多指教

mine.js

 var row;                                            //雷区的行数
 var col;                                            //雷区的列数
 var minenum;                                        //雷区的总雷数
 var href = "mine.html";                            //提交页面 (开始按钮)
 var Mine =new Array(new Array(),new Array());        //是否为雷(X为雷)
 var numEmpty =new Array(new Array(),new Array());    //判断格子是否已经处理过 2为(没处理过的) 1为雷,0为已经处理过的
 var ids;                                            //按钮id
 var v;                                                //按钮id数组 v[0]是row    v[1]是col
 var biaoji = new Array();                            //用来标记还没循环过的空格
 var winnum;                                        //记录非雷的格子(行*列-雷数)总剩余格子

 function setRowColMine()    //重新开始
 {
    row = document.getElementById('RowSize').value;
    col = document.getElementById('ColSize').value;
    minenum = document.getElementById('NumMine').value;
    var src =href+"?minenum="+minenum+"&row="+row+"&col="+col;
    window.location.href = src;
 }
var state = 0;                //计时器的开始标记
var ms = 0;                   //已经用时几秒
var then;                        //开始时间的对象
function setId(obj)    //点击按钮
{
    var id = obj.id;
    startGame(id);
    start();
    times();
}

function start()    //启动计时器
{
    if (state == 0)
    {
        state = 1;
        then = new Date();
        then.setTime(then.getTime() - ms);
    }
}
function times()  //计时器
{
    setTimeout("times();", 1000);
    if (state == 1)
    {
        now = new Date();
        ms = now.getTime() - then.getTime();
        ms =ms / 1000;
        document.getElementById('time').value = parseInt(ms)
    }
}


 function startGame(id)    //游戏过程
 {
    var mine_id = 'mine_'+id ;       
    var mine_value = document.getElementById(mine_id).value;        //是否为雷(X为雷)
    var hid_id = 'hid_'+id;            //附近有多少雷的层  ID
    var hid_btn = 'hid_btn_'+id;    //附近有多少雷的按钮ID
    var minnum = document.getElementById(hid_btn).value;        //附近有多少雷的值
    v = id.split("_");
    v[0] = parseInt(v[0]);
    v[1] = parseInt(v[1]);
    if(mine_value=="O")
    {
       
        if(minnum == '0')
        {
            document.getElementById(id).style.display='none';
            numEmpty[v[0]][v[1]] = '0';    //标记格子为已经处理过的 2为(没处理过的) 1为雷,0为已经处理过的
            showEmpty(id);
        }
        else
        {
            document.getElementById(id).style.display='none';
            document.getElementById(hid_id).style.display='block';        //附近有多少雷的层显示
            numEmpty[v[0]][v[1]] = '0'; //标记格子为已经处理过的 2为(没处理过的) 1为雷,0为已经处理过的

        }
        //↓  计算已经处理过的格子数, 如果跟总剩余格子相等即为胜利
        var win=0; //计算已经处理过的格子数
        for(var m=0;m<=row;m++)
        {
            for(var n=0;n<=col;n++)
            {
                if(numEmpty[m][n] == '0')
                {
                    win++;
                }
            }
        }
        //alert('**'+win+'**'+numEmpty);
        if(winnum == win)
        {
            alert("你赢了");
            setRowColMine();        //重新开始
        }
    }
    else
    {
        alert('你输了');
        setRowColMine();             //重新开始
    }
 }
 
function showEmpty(id)        //显示空白格子
{

    v = id.split("_");
    v[0] = parseInt(v[0]);
    v[1] = parseInt(v[1]);

    var mine_id = 'mine_'+id ;
    var hid_btn = 'hid_btn_'+id;
    var hid_id = 'hid_'+id;                                        //附近有多少雷的层  ID
    var minnum = document.getElementById(hid_btn).value;        //附近有多少雷的值
    for(var i=-1;i<=1;i++)
    {
        for(var j=-1;j<=1;j++)
        {   
            var rownum = v[0] + i;
            var colnum = v[1] + j;
            //周围格子的行,列要大于1,小于总数
            if(rownum >=1 && rownum <= row && colnum >=1 && colnum <= row )
            {
                idd=rownum+'_'+colnum;
                //*
                var hbtn = 'hid_btn_'+idd;
                var hid = 'hid_'+idd;   
                var mins = document.getElementById(hbtn).value;        //附近有多少雷的值
                if(i == 0 && j == 0 )  //不能循环判断自己(否则死循环)
                {
                    continue;
                }
                if(numEmpty[rownum][colnum] == '0') //如果判断过的格子就跳过
                {
                    continue;
                }
                //(if条件)没有处理过的,空白格子
                if(numEmpty[rownum][colnum] == '2'&& mins == '0')
                {
                    document.getElementById(idd).style.display='none'; //隐藏按钮
                    numEmpty[rownum][colnum] = '0';
                    biaoji.push(idd);    //没有处理过的,空白格子放进标记数组中 等待下次递归执行
                    continue;
                }
                if(Mine[rownum][colnum] != 'X' && mins != '0') //自己不为雷 但是附近有雷
                {
                    document.getElementById(idd).style.display='none';        //隐藏按钮
                    document.getElementById(hid).style.display='block';        //附近有多少雷的层显示
                    numEmpty[rownum][colnum] = '0';
                    continue;
                   
                }
               
            }
        }
    }
    //循环标记数组,确保每个空白格子都进行过递归
    for(var b=0;b<biaoji.length;b++)
    {
        var sid = biaoji[b];
        biaoji.shift();        //删除已经执行递归的空白格子
        showEmpty(sid);        //递归调用 显示空白格子
    }
 }

 function loading(r,w,mines)        //初始化
 {
    row = r;
    col = w;
    minenum = mines;
   
    //var Mine[] =new Array();
    //初始化地雷类
    for(var Rows=1;Rows<row+1;Rows++)
    {
        Mine[Rows]= new Array();
        numEmpty[Rows] = new Array();
        for(var Cols=1;Cols<col+1;Cols++)
        {
            Mine[Rows][Cols]="O";            //O为非雷  X为雷
            numEmpty[Rows][Cols]= '2';        //初始化标记数组为2(没处理过的) 1为雷,0为已经处理过的
            //Decouv[Rows][Cols]="a";
        }
        //alert(Rows);
    }
    //alert(minenum);
    index=0;    //布雷索引
   
    while(index<minenum)    //随机设置雷
    {
        Rows=parseInt(Math.random()*10 % row)+1;
        Cols=parseInt(Math.random()*10 % col)+1;
        //alert(Rows+'-'+Cols);
        if(Mine[Rows][Cols]=="O")            //O为非雷  X为雷
        {
            Mine[Rows][Cols]="X";            //O为非雷  X为雷
            numEmpty[Rows][Cols]='1';        //初始化标记数组为2(没处理过的) 1为雷,0为已经处理过的
            index++;
        }
    }
    winnum = row*col - minenum;            //初始化非雷的格子
    //document.getElementById('win').value = winnum;
    //根据随机雷 设置隐藏按钮显示的数字
    for(Rows=1;Rows<=row;Rows++)
    {
        for(Cols=1;Cols<=col;Cols++ )
        {
            mnum=0;                        //计算附近格子有多少个雷
            for(i=-1; i<=1; i++ )
            {
                for(j=-1; j<=1; j++ )
                {
                    var rownum = Rows + i;
                    var colnum = Cols + j;
                    //行,列数都要大于1 小于总数
                    if(rownum >=1 && rownum <= row && colnum >=1 && colnum <= row && Mine[rownum][colnum]== "X")
                    {
                        mnum++;
                    }
                }
            }
            var grid = Rows+'_'+Cols;
            var mine_grid = 'mine_'+grid;
            var hid_grid = 'hid_'+grid;
            var hid_btn = 'hid_btn_'+grid;
            //设置隐藏按钮的雷数
            document.getElementById(mine_grid).value = Mine[Rows][Cols];
            document.getElementById(hid_btn).value = mnum;
        }
    }

    //alert(row+'-'+col+'-'+mine);
 }

mine.php

<?php
    header('Content-type: text/html;charset=UTF-8');
    $generer=1;
    if ( empty($_GET['row']) || empty($_GET['col']) || empty($_GET['minenum']) || $_GET['minenum'] < 1 || $_GET['minenum'] >= $_GET['col'] * $_GET['row'])
    {//初始化
        if($_GET['row'] >30 || $_GET['col']>24 || $_GET['minenum']>667)
        {
            $NumMine=10;    //地雷数
            $RowSize=9;    //行数
            $ColSize=9;    //列数
        }
    }else
    {
       
        $RowSize = $_GET['row'];
        $ColSize = $_GET['col'];
        $NumMine = $_GET['minenum'];
    }
    $strs= $RowSize.','.$ColSize.','.$NumMine;

?>
<html>
<head>
<title>test_php</title>
</head>

<script language="JavaScript" type="text/javascript" src="mine.js"></script>




<body bgcolor=#FFFFCC οnlοad=loading(<?php echo $strs?>)><center>

<font size=3 face=Verdana><b>挖雷</b>
<hr>
<form method=post name="begin" id='begin' action='mine.php'>
行数 : &nbsp;
<input type = 'text' id='RowSize' value="<?php echo $RowSize?>" size=2 maxlength=2 onKeyUp="value=value.replace(//D/g,'')">(5-30)
<br>
列数 : &nbsp;
<input type = 'text' id='ColSize' value="<?php echo $ColSize?>" size=2 maxlength=2 onKeyUp="value=value.replace(//D/g,'')">(5-24)
<br>
雷数 : &nbsp;
<input type='text' id='NumMine' value="<?php echo $NumMine?>" size=2 maxlength=3 onKeyUp="value=value.replace(//D/g,'')">(1-667)
<br>
用时:<INPUT TYPE="text" id="time" value="000" disabled='disabled' size=2>

<p>
<input  type='button' name='stars' value="开始" οnclick="setRowColMine()">
<input type='hidden' name='generer' value=1>
</form>
<?php

    echo '<div id = tdiv>';
    echo '<form method=get id="play" >';
    echo '<p><table border=1 cellpadding=1 id = "playtable">';
    for($Row=1; $Row<=$RowSize; $Row++)
    {
        echo "<tr>";
        for($Col=1; $Col<=$ColSize; $Col++)
        {
            $grid = $Row.'_'.$Col;
            $hid_grid = 'hid_'.$grid;
            $hid_btn = 'hid_btn_'.$grid;
            $mine_grid = 'mine_'.$grid;
            echo "<td style='width:25px;height:27px;'><input type=button style='width:23px;height:23px;' id=$grid name=$grid οnclick=setId(this) value=''>";
              echo "<input type=hidden id=$mine_grid name=$mine_grid >";
              echo "<div id=$hid_grid  style='display:none;'><input class='class1' style='width:23px;height:23px;' disabled='disabled' id=$hid_btn type=button name=$hid_grid value='0'></td></div>";

        }
        echo '</tr>';
    }
    echo '</table>';
    echo '</form>';
    echo '</div>';

?>

</body>
</html>