Script网页小游戏<<能抓到小弟我吗?>>

2012-06-20
Script网页小游戏能抓到我吗?偶尔在CSDN上看到高手用script写的一个网页小游戏：能抓到我吗？。一、效
Script网页小游戏<<能抓到我吗?>>
偶尔在CSDN上看到高手用script写的一个网页小游戏：<<能抓到我吗？>>。
一、效果
在浏览器上的效果如下：
Script网页小游戏<<能抓到小弟我吗?>>
二、实现过程1、1 框架设计
Script网页小游戏<<能抓到小弟我吗?>>
2、2 源码实现
在作者的基础上我加上了注释。
<!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>wujinjian</title>    <script type="text/javascript">        //11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapSize        var mapSize=11;         //地图的大小        var mapWH=440;          //记录对方的ID        var computerID;         //这个方向是否可走        var isPath=true;         //记录四方位上距离对方的距离        var up=0;        var left=0;        var right=0;        var down=0;        //障碍物的最多个数(可重叠)        var za=3;                window.onerror=function()        {            alert("异常！点击确定重新开始");            window.location.href=window.location.href;        };                function createMap()        {            var x=Math.round(Math.random()*(mapSize-1));  //行            var y=Math.round(Math.random()*(mapSize-1));  //列                        if(x==0)                x=x+1;            else if(x==(mapSize-1))                x=x-1;            if(y==0)                y=y+1;            else if(y==(mapSize-1))                y=y-1;                            //var x=7;            //var y=2;            // 得到对方的ID            computerID=x+"_"+y;                        var tabobj=document.createElement("table");            tabobj.style.width=mapWH+"px";            tabobj.style.height=mapWH+"px";                        tabobj.border="1";            // 创建一个tbody            var tbodyobj=document.createElement("tbody");                        for(var i=0;i<mapSize;i++)            {// 创建一个tr                var trobj=document.createElement("tr");                                for(var j=0;j<mapSize;j++)                {// 创建一个td                    var tdobj=document.createElement("td");                    tdobj.style.border="rgb(128,128,255) solid 1px";                    tdobj.id=i+"_"+j// 每个方格按下事件的回调函数                    tdobj.onclick=tdClick;                                        if(i+"_"+j==computerID)                    {                        tdobj.style.backgroundColor="red";                    }                    // 创建一个txt                    var txt=document.createTextNode(" ");                    tdobj.appendChild(txt);                    // 在tr里添加td                    trobj.appendChild(tdobj);                }                // 在tbody里添加tr                tbodyobj.appendChild(trobj);            }            // 在table里添加tbody            tabobj.appendChild(tbodyobj);            // 在map_div里添加table            document.getElementById("map_div").appendChild(tabobj);                        //默认随机障碍物            for(var i=0;i<za;i++)            {                var _id=Math.round(Math.random()*(mapSize-1)) +"_"+ Math.round(Math.random()*(mapSize-1));                if(document.getElementById(_id).style.backgroundColor=="")                    document.getElementById(_id).style.backgroundColor="gray";            }                        for(var i=0;i<mapSize;i++)            {                document.getElementById(i+"_"+(mapSize-1)).style.border="rgb(223,223,223) solid 1px";                document.getElementById((mapSize-1)+"_"+i).style.border="rgb(223,223,223) solid 1px";                document.getElementById(i+"_0").style.border="rgb(223,223,223) solid 1px";                document.getElementById("0_"+i).style.border="rgb(223,223,223) solid 1px";            }        }        // 每个方格按下事件的回调函数        function tdClick()        {            if(this.style.backgroundColor=="")            {                this.style.backgroundColor="gray";                                up=0;                left=0;                right=0;                down=0;                                computerXZ();            }          }                function computerXZ()        {            var xy=computerID.split("_");            var x=xy[0]-0;            var y=xy[1]-0;                        //中心位置            var mid=(mapSize-1)/2;                        //左上角            if(x<=mid && y<=mid)             {                 //向上                if(x<=y)                {                    //向上不通,向左走 //false 表示是判断,true 表示行走                    if(!computerUp(x,y,false))                     {                        //向左不通，向右走                        if(!computerLeft(x,y,false))                        {                            //向右不通，向下走                            if(!computerRight(x,y,false))                            {                                //向下不通，向下走(往最长的方向走)                                if(!computerDown(x,y,false))                                {                                                                        direction(up,left,right,down,x,y)                                }                            }                        }                      }                       }                else  //向左                {                   if(!computerLeft(x,y,false))                    {                        if(!computerUp(x,y,false))                        {                            if(!computerDown(x,y,false))                            {                                if(!computerRight(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                    }            }           //右上角            else if(x<=mid && y>=mid)            {                if(x<=(mapSize-1-y)) //向上                {                    if(!computerUp(x,y,false))                     {                        if(!computerRight(x,y,false))                        {                            if(!computerLeft(x,y,false))                            {                                if(!computerDown(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                       }                else  //向右                {                   if(!computerRight(x,y,false))                    {                        if(!computerUp(x,y,false))                        {                            if(!computerDown(x,y,false))                            {                                if(!computerLeft(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                    }            }            //右下角            else if(x>=mid && y>=mid)            {                if(x>=y) //向下                {                    if(!computerDown(x,y,false))                     {                        if(!computerRight(x,y,false))                        {                            if(!computerLeft(x,y,false))                            {                                if(!computerUp(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                       }                else  //向右                {                   if(!computerRight(x,y,false))                    {                        if(!computerDown(x,y,false))                        {                            if(!computerUp(x,y,false))                            {                                if(!computerLeft(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                    }            }            //左下角            else if(x>=mid && y<=mid)            {                if((mapSize-1-x)<=y) //向下                {                    if(!computerDown(x,y,false))                     {                        if(!computerLeft(x,y,false))                        {                            if(!computerRight(x,y,false))                            {                                if(!computerUp(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                }                            }                        }                      }                       }                else  //向左                {                   if(!computerLeft(x,y,false))                    {                        if(!computerDown(x,y,false))                        {                            if(!computerUp(x,y,false))                            {                                if(!computerRight(x,y,false))                                {                                    direction(up,left,right,down,x,y)                                 }                            }                        }                      }                    }            }        }function direction(up,left,right,down,_x,_y)        {            if(up==0 && left==0 && right==0 && down==0)            {                alert("恭喜你，赢了！");                window.location.href=window.location.href;            }            else            {                var arrayDirection=new Array(up,left,right,down);                            arrayDirection.sort(function(x,y){return y-x;})                                //对方 往 离自己(对方)最远的那个障碍物走                if(up==arrayDirection[0])                    computerUp(_x,_y,true);                 else if(down==arrayDirection[0])                    computerDown(_x,_y,true);                 else if(left==arrayDirection[0])                    computerLeft(_x,_y,true);                 else if(right==arrayDirection[0])                    computerRight(_x,_y,true);             }        }                //判断是否输了        function isDeath()        {            for(var i=0;i<mapSize;i++)            {                if(document.getElementById(i+"_"+(mapSize-1)).style.backgroundColor=="red" ||                document.getElementById((mapSize-1)+"_"+i).style.backgroundColor=="red" ||                document.getElementById(i+"_0").style.backgroundColor=="red" ||                document.getElementById("0_"+i).style.backgroundColor=="red" )                {                    alert("想抓我，没门！");                    window.location.href=window.location.href;                }            }        }                function computerUp(x,y,mode)//向上走        {            for(var i=x-1;i>=0;i--)            {                if(document.getElementById(i+"_"+y).style.backgroundColor=="")                {                    isPath=true;                    up++;                }                else                {                    isPath=false;                    break;                }            }                        if(isPath || mode)            {                document.getElementById(computerID).style.backgroundColor="";                document.getElementById((x-1)+"_"+y).style.backgroundColor="red";                computerID=(x-1)+"_"+y;                                isDeath();                                                       return true;            }                        return false;        }                function computerLeft(x,y,mode)//向左走        {            for(var i=y-1;i>=0;i--)            {                if(document.getElementById(x+"_"+i).style.backgroundColor=="")                {                    isPath=true;                    left++;                }                else                {                    isPath=false;                    break;                }            }                        if(isPath || mode)            {                document.getElementById(computerID).style.backgroundColor="";                document.getElementById(x+"_"+(y-1)).style.backgroundColor="red";                computerID=x+"_"+(y-1);                                isDeath();                                return true            }            return false;        }                function computerRight(x,y,mode)//向右走        {            for(var i=y+1;i<mapSize;i++)            {                if(document.getElementById(x+"_"+i).style.backgroundColor=="")                {                    isPath=true;                    right++;                }                else                {                    isPath=false;                    break;                }            }                        if(isPath || mode)            {                document.getElementById(computerID).style.backgroundColor="";                document.getElementById(x+"_"+(y+1)).style.backgroundColor="red";                computerID=x+"_"+(y+1);                                isDeath();                                return true            }            return false;        }                function computerDown(x,y,mode)//向下走        {            for(var i=x+1;i<mapSize;i++)            {                if(document.getElementById(i+"_"+y).style.backgroundColor=="")                {                    isPath=true;                    down++;                }                else                {                    isPath=false;                    break;                }            }                        if(isPath || mode)            {                document.getElementById(computerID).style.backgroundColor="";                document.getElementById((x+1)+"_"+y).style.backgroundColor="red";                computerID=(x+1)+"_"+y;                                isDeath();                                                       return true;            }                        return false;        }    </script></head><body onload="createMap()" style="font-size:10pt">    <form id="form1">        <center>            <br><br><br>            <div id="map_div"></div>            <br>            * 游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。        </center>    </form></body></html>
热点排行
编程

Script网页小游戏<<能抓到小弟我吗?>>
