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

昨晚看到首页，堵箱子的游戏，一时兴起，哈哈，今天也做了个，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>