“花一晚上做的游戏”，又一版本

昨晚看到首页，堵箱子的游戏，一时兴起，哈哈，今天也做了个，IE7、FF3.5测试通过～代码如下<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Smart Box by CayLeung</title>
</head>
<body>
<div id="floor" style="border:1px #666666 solid; background-color:#FFFFFF; position:relative;min-width:300px; height:400px;">
</div>
<div>
<button onclick="Game.start();">开始游戏</button>
<input type="checkbox" onchange="if(this.checked){Game.routeVisable=true;}else{Game.routeVisable=false;}"/>路径提示
<select onchange="Game.wallNum=this.value;"><option value="10">简单</option><option value="7">一般</option><option value="4">难</option><option value="0">极难</option></select>
</div>
<script language="javascript">
/**
 * SmartBox
 * @author CayLeung
 */
var Game = {
    //行数
    rowNum:13,
    //列
    colNum:13,
    route:[],
    area:[],
    //空格子颜色，SB颜色，墙颜色，深度提示颜色，路径提示颜色
    color:["#EEEEEE","#FF6633","#666666","#0000FF","#00FF00"],
    x:0,
    y:0,
    map:[],
    lock:false,
    routeVisable:false,
    wallNum:10,
    start:function(){
        var arena = document.getElementById('floor');
        arena.innerHTML = '';
        arena.style.width = this.colNum*40-10+"px";
        arena.style.height = this.rowNum*40-10+"px";
        this.map = [];
        for(var i=0;i<this.rowNum;i++){
            var arr = [];
            for(var j=0;j<this.colNum;j++){
                if(j+1==this.colNum){
                    if(i%2>0)
                        continue;
                }
                var box = document.createElement("DIV");
                box.id = "sb_"+i+"_"+j;
                box.style.width = 30+"px";
                box.style.height = 30+"px";
                box.style.color = "#FFFFFF";
                box.style.position = "absolute";
                box.style.left =i%2>0?(j*40+20)+"px": j*40+"px";
                box.style.top = i*40+"px";
                box.style.backgroundColor = this.color[0];
                box.onclick = function(eve){
                    if(Game.lock)return ;
                    Game.lock = true;
                    var element = eve==null?event.srcElement:eve.target;
                    var tempArr = element.id.split("_");
                    if(Game.addWall(parseInt(tempArr[1]),parseInt(tempArr[2]))==false){
                        Game.lock = false;
                        return;
                    }
                    Game.action();
                    Game.lock = false;
                    return;
                }
                arena.appendChild(box);
                arr.push(0);
            }
            this.map.push(arr);
        }
        this.addRandWall(this.wallNum);
        this.setBox();
    },
    action:function(){
        var x = this.x;
        var y = this.y;
        this.area = [];
        this.area.push([x,y,10]);
        this.map[x][y] = 10; 
        var pointArr = [[x,y]];
        var n = 1;
        var tempArr;
        while(pointArr.length>0){
            tempArr = pointArr.shift();
            tempArr = this.getDeep(tempArr[0],tempArr[1]);
            for(var j=0;j<tempArr.length;j++){
                pointArr.push(tempArr[j]);
            }
        }
        var tp = this.getSortExit();//获取最近的出口
        if(tp.length==0){
            //box已经被围住了，赢了
            alert('你赢了～');
            this.area = [];
            this.route = [];
            return false;
        }
        this.getRoute(x,y,tp[0],tp[1]);
        //this.showArea();//观察深度
        if(this.routeVisable)
            this.showRoute();
        for(var i=0;i<this.area.length;i++){
            if(this.area[i][2]==10){
                this.map[this.area[i][0]][this.area[i][1]] = 0;
                document.getElementById("sb_"+this.area[i][0]+"_"+this.area[i][1]).style.backgroundColor = this.color[0];
                this.x = this.route[0][0];
                this.y = this.route[0][1];
                this.map[this.x][this.y] = 2;
                document.getElementById("sb_"+this.x+"_"+this.y).style.backgroundColor = this.color[1];
            }else if(this.area[i][2]>10){
                this.map[this.area[i][0]][this.area[i][1]] = 0;
            }
        }
        if(this.route.length==0 || (this.route[0][0]==tp[0] && this.route[0][1]==tp[1])){
            alert('你输了～');
            this.area = [];
            this.route = [];
            return false;
        }
        this.area = [];
        this.route = [];
        return true;
    },
    //随机添加墙
    addRandWall:function(num){
        Math.floor(Math.random()*num+1);
        for(var i=0;i<num;i++){
            var x = Math.floor(Math.random()*this.rowNum);
            var y = Math.floor(Math.random()*(this.colNum-1));
            this.addWall(x,y);
        }
    },
    //添加墙
    addWall:function(x,y){
        if(this.map[x][y]!=0)
            return false;
        document.getElementById("sb_"+x+"_"+y).style.backgroundColor = this.color[2];
        this.map[x][y] = 1;
        return true;
    },
    //设置箱子居中
    setBox:function(){
        this.x = Math.floor(this.rowNum/2);
        this.y = Math.floor(this.colNum/2);
        this.map[this.x][this.y] = 2;
        document.getElementById("sb_"+this.x+"_"+this.y).style.backgroundColor = this.color[1];
    },
    //获取路径
    getRoute:function(ox,oy,tx,ty){
        var deep = this.map[ox][oy];
        var tempX,tempY;
        var offsetArr = ox%2>0?[[0,-1],[-1,0],[-1,1],[0,1],[1,1],[1,0]]:[[0,-1],[-1,-1],[-1,0],[0,1],[1,0],[1,-1]];
        for(var i=0;i<6;i++){
            tempX = ox+offsetArr[i][0];
            tempY = oy+offsetArr[i][1];
            for(var j=0;j<this.area.length;j++){
                if(tempX!=this.area[j][0] || tempY!=this.area[j][1] || (deep+1)!=this.area[j][2])
                    continue;
                if(this.area[j][2]>this.map[tx][ty])
                    continue;
                if(tempX==tx && tempY==ty){
                    this.route.push([tempX,tempY]);
                    return true;
                }
                //下一级深度，可到达区域
                this.route.push([tempX,tempY]);
                if(this.getRoute(tempX,tempY,tx,ty)===true){
                    return true;
                }
                this.route.pop();
            }
        }
        return false;
    },
    //获取深度
    getDeep:function(x,y){
        var deep = this.map[x][y];
        var tempX,tempY;
        var offsetArr = x%2>0?[[0,-1],[-1,0],[-1,1],[0,1],[1,1],[1,0]]:[[0,-1],[-1,-1],[-1,0],[0,1],[1,0],[1,-1]];
        var temp = [];
        for(var i=0;i<6;i++){
            tempX = x+offsetArr[i][0];
            tempY = y+offsetArr[i][1];
            if(tempX<0 || tempX>=this.rowNum||tempY<0||tempY>=(tempY%2>0?this.colNum-1:this.colNum)){
                continue;
            }
            if(this.map[tempX][tempY]==0){
                this.map[tempX][tempY] = deep+1;
                this.area.push([tempX,tempY,deep+1]);
                temp.push([tempX,tempY]);
            }else if(this.map[tempX][tempY]>9){
                if(deep+1 < this.map[tempX][tempY]){
                    this.map[tempX][tempY] = deep+1;
                    temp.push([tempX,tempY]);
                }
            }
            
        }
        return temp;
    },
    //或者最短出口
    getSortExit:function(){
        var minDeep = 200;
        var exitPoint = [];
        for(var i=0;i<this.colNum;i++){
            if(this.map[0][i]<minDeep && this.map[0][i]>9){
                minDeep = this.map[0][i];
                exitPoint = [0,i]
            }
            if(this.map[this.rowNum-1][i]<minDeep&& this.map[this.rowNum-1][i]>9){
                minDeep = this.map[this.rowNum-1][i];
                exitPoint = [this.rowNum-1,i];
            }
        }
        for(var i=0;i<this.rowNum;i++){
            if(this.map[i][0]<10)
                continue;
            if(this.map[i][0]<minDeep && this.map[i][0]>9){
                minDeep = this.map[i][0];
                exitPoint = [i,0];
            }
            if(this.map[i][this.map[i].length-1]<minDeep&& this.map[i][this.map[i].length-1]>9){
                minDeep = this.map[i][this.map[i].length-1];
                exitPoint = [i,this.map[i].length-1];
            }
        }
        return exitPoint;
    },
    //显示路径
    showRoute:function(){
        for(var i=0;i<this.route.length;i++){
            document.getElementById("sb_"+this.route[i][0]+"_"+this.route[i][1]).style.backgroundColor = this.color[4];
        }
    },
    //深度查看
    showArea:function(){
        for(var i=0;i<this.area.length;i++){
            document.getElementById("sb_"+this.area[i][0]+"_"+this.area[i][1]).style.backgroundColor = this.color[3];
            document.getElementById("sb_"+this.area[i][0]+"_"+this.area[i][1]).innerHTML = this.area[i][2];
        }
    }
}
</script>
</body>
</html>