【散分】花了一晚上写了个JavaScript小游戏

在 ie7，火狐，谷歌 都测试通过。 
源码：
<!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;
            
            computerID=x+"_"+y;
            
            var tabobj=document.createElement("table");
            tabobj.style.width=mapWH+"px";
            tabobj.style.height=mapWH+"px";
            
            tabobj.border="1";
            
            var tbodyobj=document.createElement("tbody");
            
            for(var i=0;i<mapSize;i++)
            {
                var trobj=document.createElement("tr");
                
                for(var j=0;j<mapSize;j++)
                {
                    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";
                    }
                    
                    var txt=document.createTextNode(" ");
                    tdobj.appendChild(txt);
                    
                    trobj.appendChild(tdobj);
                }
                
                tbodyobj.appendChild(trobj);
            }
            
            tabobj.appendChild(tbodyobj);
            
            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) 
                                }
                            }
                        }  
                    }    
                }
            }        }

解决方案 »

  1.   


    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>
                *&nbsp;游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。
            </center>
        </form>
    </body>
    </html>
      

  2.   

    4楼的兄弟不错！你去排行榜能看到好多5星的！我更喜欢net_lover的ruby
      

  3.   

    看了! 游戏有可玩性.但楼主应该说明如果才不让红色的碰到边.
    也就是规则是什么
    如果才能赢?
    再一个能提供一个在线的Demo会更好些
      

  4.   

     有做了个高难度版的
    http://topic.csdn.net/u/20091203/23/208f4d03-cf8f-435d-88e5-d7854e125a97.html?seed=43052755&r=61637355#r_61637355
      

  5.   

    刚刚在google 召开的OpenSocial  
    CSDN还拿你这个例子！
    楼主继续加油！ 
      

  6.   

    好难抓住那个红块。
    LZ很牛X