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

 

 

偶尔在CSDN上看到高手用script写的一个网页小游戏:<<能抓到我吗?>>。

一、效果

在浏览器上的效果如下:

二、实现过程

1、1  框架设计

 

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.οnerrοr=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.οnclick=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 οnlοad="createMap()" style="font-size:10pt">
    <form id="form1">
        <center>
            <br><br><br>
            <div id="map_div"></div>
            <br>
            * 游戏规则:别让红色方块跑到表格的边界上您就赢了,也就是说要将红色方框圈住。
        </center>
    </form>
</body>
</html>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值