/*一共2個文件 js 文件和 html 文件 ，ie下瀏覽正常
*採用最短路徑法編寫
*附效果圖
*/
/*
* 把js文件保存爲 migong.js
*/
/*
* migong.js
*/
/**
* @author Administrator
*/
var locx=0; //當前行座標
var locy=0; //當前列座標
var zuobiaoarr = new Array(1); //座標數組
var tobearr = new Array(); //等待數組
var migongrow = 1; //迷宮行數
var migongcol = 1; //迷宮列數
var roadwidth = 10; //道路寬度
var wallwidth = 2; //牆厚度
var personwidth = 5; //行走方塊厚度
/*
* 座標類
*/
function zuobiao(x,y,f){
this.x=x;
this.y=y;
this.visited=f; /* 0 not visit 1 tobevisit 2 visit*/
this.wall = new Array(0,0,0,0); //wall left->top->right->bottom 0:closed 1:open
}
/*
* 功能： 創建迷宮對象
* @param r: 迷宮行數
* c: 迷宮列數
* s: 入口行數
* e: 出口行數
* road: 道路寬度
* wall: 牆體寬度
* psn: 行者寬度
*/
function MiGong(r,c,s,e,road,wall,psn){
migongrow = r;
migongcol = c;
roadwidth = road;
wallwidth = wall;
personwidth = psn;
zuobiaoarr = new Array(1);
var migong = document.createElement("table");
migong.setAttribute("border",0);
migong.setAttribute("cellPadding",0);
migong.setAttribute("cellSpacing",0);
migong.setAttribute("id","migong");
document.getElementsByTagName("center")[0].appendChild(migong);
for(var i=0;i<migongrow*2+1;i++){
var r = migong.insertRow(-1);
for(var j=0;j<migongcol*2+1;j++){
var cell = r.insertCell(-1);
if(i%2){
if(j%2)
cell.style.cssText="height:" + roadwidth + "px;width:" + wallwidth + "px;background-color:#eeeeee";
else
cell.style.cssText="height:" + roadwidth + "px;width:" + wallwidth + "px;background-color:#333333";
}else{
if(j%2)
cell.style.cssText="height:" + wallwidth + "px;width:" + roadwidth + "px;background-color:#333333";
else
cell.style.cssText="height:" + wallwidth + "px;width:" + wallwidth + "px;background-color:#333333";
}
}
}
//初始化座標
for(var i=1;i<=migongrow;i++)
for(var j=1;j<=migongcol;j++){
var len = zuobiaoarr.length;
zuobiaoarr[len] = new zuobiao(i,j,0);
zuobiaoarr[len].index=(i-1) * migongcol + j;
//zuobiaoarr[len].index = (i-1) * migongrow + j;
//頂層設置不可開
if(i==1)
zuobiaoarr[len].wall[1]=1;
//底層設置不可開
if(i==migongrow)
zuobiaoarr[len].wall[3]=1;
//左邊設置不可開
if(j==1)
zuobiaoarr[len].wall[0]=1;
//右邊設置不可開
if(j==migongcol)
zuobiaoarr[len].wall[2]=1;
}
CreateMG(s,1,e,migongcol);
}
/*
* 功能: 把節點加入等待隊列
* @param zuo: 要加入的節點
*/
function AddTobe(zuo){
if(!zuo) return;
zuo.visited=1;
tobearr[tobearr.length] = zuo;
}
/*
* 功能: 取出等待隊列最後一個節點
*/
var RemoveTobe=function(){
var zuo = tobearr[tobearr.length-1];
if(tobearr.length>0)
tobearr.length -= 1;
return zuo;
}
/*
* 功能： 打牆
* @param : zuo 當前位置節點
*/
function hole(zuo){
var tobehole = new Array();
var x = zuo.x;
var y = zuo.y;
zuo.flag=2;
var aflag = new Array();
var len = 0;
if(zuo.visited==2)
return;
zuo.visited=2;
//選擇可打牆
var ztmp=null;
for(var i=0;i<4;i++){
switch(i){
case 0:
ztmp = zuobiaoarr[zuo.index-1];
if(ztmp && !ztmp.visited)
ztmp.wall[2]=1;
break;
case 1:
ztmp = zuobiaoarr[zuo.index-migongcol];
if(ztmp && !ztmp.visited )
ztmp.wall[3]=1;
break;
case 2:
ztmp = zuobiaoarr[zuo.index+1];
if(ztmp && !ztmp.visited)
ztmp.wall[0]=1;
break;
case 3:
ztmp = zuobiaoarr[zuo.index+migongcol];
if(ztmp && !ztmp.visited)
ztmp.wall[1]=1;
break;
}
if(ztmp && !zuo.wall[i] && !ztmp.visited){
len = aflag.length;
zuo.wall[i] = 1;
aflag[len] = ztmp;
MakeHole(i,zuo);
}
}
len = aflag.length;
var xx=0;
if(len>0){
xx = Math.floor(Math.random()*10);
for(var i=0;i<len;i++){
AddTobe(aflag[xx%len]);
xx++;
}
xx = Math.floor(Math.random()*len);
}
}
/*
* 功能： 開牆
* @param : xx 哪一面 0 left 1 top 2 right 3 bottom
* zuo 需要打牆的座標
*/
function MakeHole(xx,zuo){
var tbl = document.getElementById("migong");
switch (xx) {
case 0: //left
tbl.rows[zuo.x * 2 - 1].cells[(zuo.y - 1) * 2].style.backgroundColor = "#eeeeee";
break;
case 1: //top
tbl.rows[(zuo.x - 1) * 2].cells[zuo.y * 2 - 1].style.backgroundColor = "#eeeeee";
break;
case 2: //right
tbl.rows[zuo.x * 2 - 1].cells[zuo.y * 2].style.backgroundColor = "#eeeeee";
break;
case 3: //bottom
tbl.rows[zuo.x * 2].cells[zuo.y * 2 - 1].style.backgroundColor = "#eeeeee";
break;
}
}
/*
* 功能：創建迷宮
* @param startx: 開始位置x座標
* starty: 開始位置y座標
* endx : 結束位置x座標
* endy : 結束位置y座標
*/
function CreateMG(startx,starty,endx,endy){
var xx = startx;
var yy = starty;
locx = endx;
locy = endy;
var zuo = zuobiaoarr[(startx-1) * migongcol + starty];
zuo.visited = 2;
MakeHole(0,zuo);
MakeHole(2,zuobiaoarr[(endx-1) * migongcol + endy]);
AddTobe(zuo);
while(1){
var node = RemoveTobe();
if(!node) break;
hole(node);
}
var tbl = document.getElementById("migong");
var obj = tbl.rows[endx*2-1].cells[endy*2-1];
var xx = getAbsLoc(obj);
var left = xx[0]+(roadwidth-personwidth)/2;
var top = xx[1]+(roadwidth-personwidth)/2;
//創建行走方塊
var oper = document.createElement("div");
oper.style.cssText="lineheight:" + personwidth + "px;width:" + personwidth + "px;height:" + personwidth + "px;background:#ff2222;position:absolute;left:"+ left + "px;top:" + top + "px";
oper.setAttribute("id","migperson");
document.body.appendChild(oper);
tbl.rows[startx*2-1].cells[starty*2-1].style.backgroundColor="#ffcc22";
}
/*
* 功能: 按鍵事件
*/
document.onkeydown = function(){
var oper = document.getElementById("migperson");
switch(event.keyCode){
case 37:
if (locy > 1 && zuobiaoarr[(locx-1) * migongcol + locy].wall[0]) {
oper.style.left = parseInt(oper.style.left) - (roadwidth+wallwidth);
locy -= 1;
}
break;
case 39:
if (locy < migongcol && zuobiaoarr[(locx - 1) * migongcol + locy].wall[2]) {
oper.style.left = parseInt(oper.style.left) + (roadwidth+wallwidth);
locy += 1;
}
break;
case 38:
if (locx > 1 && zuobiaoarr[(locx - 1) * migongcol + locy].wall[1]) {
oper.style.top = parseInt(oper.style.top) - (roadwidth+wallwidth);
locx -= 1;
}
break;
case 40:
if (locx < migongrow && zuobiaoarr[(locx - 1) * migongcol + locy].wall[3]) {
oper.style.top = parseInt(oper.style.top) + (roadwidth+wallwidth);
locx += 1;
}
break;
}
}
/*
* 功能: 獲取絕對位置
* @param obj: 待獲取地址的對象
*/
function getAbsLoc(obj){
var xx = new Array(2);
xx[0] = 0;
xx[1] = 0;
while(obj){
xx[0] += obj.offsetLeft;
xx[1] += obj.offsetTop;
obj = obj.offsetParent;
}
return xx;
}
/*
* 此文件保存爲 migong.html
*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>迷宮示例</title>
</head>
<body>
<center>
迷宮行數：<select id="rowselect" onChange="changerow(this)"></select>
迷宮列數: <select id="colselect"></select>
入口行：<select id="startrow"></select>
出口行：<select id="endrow"></select>
道路寬: <select id="roadwidth"></select>
牆寬: <select id="wallwidth"></select>
行者寬: <select id="personwidth"></select>
<input type="button" value="生成迷宮" onClick="createMg()">
<p></p>
</center>
</body>
<script src="migong.js"></script>
<script>
var rowsel = document.getElementById("rowselect");
var colsel = document.getElementById("colselect");
for(var i=5;i<=50;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
o1 = document.createElement("option");
o1.value = i;
o1.text = i;
rowsel.options.add(o);
colsel.options.add(o1);
}
changerow(rowsel);
function changerow(obj){
var strow = document.getElementById("startrow");
var enrow = document.getElementById("endrow");
for (var i=strow.options.length-1; i>=0 ; i--) {
strow.options.remove(i);
enrow.options.remove(i);
}
for(var i=1;i<=obj.value;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
o1 = document.createElement("option");
o1.value = i;
o1.text = i;
strow.options.add(o);
enrow.options.add(o1);
}
enrow.selectedIndex = obj.value-1;
}
//初始化道路寬度
var sroad = document.getElementById("roadwidth");
for(var i=10;i<=20;){
var o = document.createElement("option");
o.value = i;
o.text = i;
i += 2;
sroad.options.add(o);
}
//初始化牆壁寬度
var swall = document.getElementById("wallwidth");
for(var i=1;i<=5;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
swall.options.add(o);
}
//初始化行者寬度
var sperson = document.getElementById("personwidth");
for(var i=5;i<=10;i++){
var o = document.createElement("option");
o.value = i;
o.text = i;
sperson.options.add(o);
}
function createMg(){
var o = document.getElementById("migong");
var oc = document.getElementsByTagName("center")[0];
if(o) oc.removeChild(o);
var o = document.getElementById("migperson");
if (o) document.body.removeChild(o);
var strow = document.getElementById("startrow");
var enrow = document.getElementById("endrow");
var rowsel = document.getElementById("rowselect");
var colsel = document.getElementById("colselect");
var migong = new MiGong(parseInt(rowsel.value),parseInt(colsel.value),
parseInt(strow.value),parseInt(enrow.value),parseInt(document.getElementById("roadwidth").value),
parseInt(document.getElementById("wallwidth").value),parseInt(document.getElementById("personwidth").value));
}
</script>
</html>