当成Web作业来对待了...
一个搞算法的我 也有今天....
不想把这个看成算法任务可就是算法任务唉~
放一波效果截图：
<figcaption> 进入后的选择界面 </figcaption>
<figcaption> 进入后的初始界面 </figcaption>
<figcaption> 以动画的形式生成一条路线 </figcaption>
<figcaption> 自己走迷宫闯关成功 </figcaption> 部分JS代码：
<script>
function Setmaze()//建立迷宫
{
var top=0;
for(i=0;i<wd;i++)
{
var left=0;
for(k=0;k<wd;k++)
{
if(i==1&&k==1)
{
odiv=document.createElement("start");
odiv.className="start";
odiv.style.left=left+"px";
odiv.style.top=top+"px";
box.appendChild(odiv);
}
else if(i==wd-2&&k==wd-2)
{
odiv=document.createElement("end");
odiv.className="end";
odiv.style.left=left+"px";
odiv.style.top=top+"px";
box.appendChild(odiv);
}
if(mp[i][k]==1)
{
odiv=document.createElement("img");
odiv.className="img";
odiv.style.left=left+"px";
odiv.style.top=top+"px";
box.appendChild(odiv);
}
left+=numb;
}
top+=numb;
}
}
function BFS()
{
var qx=[],qy=[];
var cotsx=1,cotsy=1;
var cotex=0,cotey=0;
var vis=[];
for(i=0;i<wd;i++)
{
vis[i]=[];
for(k=0;k<wd;k++)
vis[i][k]=-1;
}
qx[++cotex]=1;qy[++cotey]=1;
vis[parseInt(1)][parseInt(1)]=0;
var mx,my;
for(;cotsx<=cotex;)
{
var nx=qx[cotsx++],ny=qy[cotsy++];
if(nx==wd-2&&ny==wd-2) break;
for(i=0;i<4;i++)
{
mx=nx+dx[i],my=ny+dy[i];
if(vis[parseInt(mx)][parseInt(my)]==-1&&mx>=0&&mx<wd&&my<wd&&my>=0&&mp[parseInt(mx)][parseInt(my)]==0)
{
vis[parseInt(mx)][parseInt(my)]=vis[parseInt(nx)][parseInt(ny)]+1;
qx[++cotex]=mx;
qy[++cotey]=my;
}
}
}
cotsx=0,cotsy=0;
var sx=wd-2,sy=wd-2;
qx[++cotsx]=sx;
qy[++cotsy]=sy;
for(;sx!=1||sy!=1;)
{
for(i=0;i<4;i++)
{
mx=sx+dx[i],my=sy+dy[i];
if(mx>=0&&mx<wd&&my>=0&&my<wd&&vis[parseInt(mx)][parseInt(my)]!=-1&&vis[parseInt(mx)][parseInt(my)]+1==vis[parseInt(sx)][parseInt(sy)])
{
sx=mx;
sy=my;
qx[++cotsx]=mx;
qy[++cotsy]=my;
break;
}
}
}
var id=setInterval(Carry,100);
var pos=cotsx;
function Carry()
{
if(pos==0)
clearInterval(id);
else
{
FF(pos,cotsx-pos+1);
pos--;
}
}
function FF(id,num)
{
mx=qx[id],my=qy[id];
odiv=document.createElement("img1");
odiv.className="img1";
odiv.style.left=my*20+"px";
odiv.style.top=mx*20+"px";
box.appendChild(odiv);
var u=document.getElementById("2").value=num;
}
}
//自己走迷宫
function GGo()
{
var x=1,y=1;
var bb=document.getElementById("ss");
bb.style.left=20+"px";
bb.style.top=20+"px";
document.onkeydown = function (event)
{
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e&&e.keyCode==87)//up
{
var b=document.getElementById("ss");
if(x-1>=1&&mp[x-1][y]==0)
{
x--;
b.style.top=x*20+"px";
}
}
else if(e&&e.keyCode==68)// right
{
var b=document.getElementById("ss");
if(y+1<=wd-2&&mp[x][y+1]==0)
{
y++;
b.style.left=y*20+"px";
}
}
else if(e&&e.keyCode==65)// left
{
var b=document.getElementById("ss");
if(y-1>=1&&mp[x][y-1]==0)
{
y--;
b.style.left=y*20+"px";
}
}
else if(e&&e.keyCode==83)// down
{
var b=document.getElementById("ss");
if(x+1<=wd-2&&mp[x+1][y]==0)
{
x++;
b.style.top=x*20+"px";
}
}
else
{
alert("不可以！");
}
if(x==wd-2&&y==wd-2)
{
alert("奈斯，恭喜过关！");
bb.style.left=20+"px";
bb.style.top=20+"px";
window.location.reload();
}
}
}
</script>
部分Html代码：
<body >
<h1><center>♈©Composed By CoolGuang!♍</center></h1>
<button type="button" onClick="AStar()">DFS一键生成随机路线</button><br>
<button type="button" onClick="BFS()">BFS一键生成最短路线</button><br>
<button type="button" onClick="wocao()">自己走迷宫！</button><br>
DFS随机路数步数统计:<input type="text" value="0" readonly id="1">
<br>
BFS最短路径步数统计:<input type="text" value="0"readonly id="2"><br>
<script>
display();
choose();
</script>
<div id="box">
<script>
Setmaze();
</script>
<div id="ss" style="z-index:999"></div>
</div>
</body> 简要分析：
进入页面之后，有一个选择难度的提示框，他会根据你选择的难度，进行地图的初始化，由于初始化函数涉及到迷宫的填充代码太过于冗长因此不进行展示。选择难度之后迷宫与迷宫的长宽就被确定，通过DFS和BFS搜索得到路径，将路径还原出来之后，通过JS中 GetElement函数获取到当前迷宫的盒模型，然后通过CreatElement 创立一个新元素，这个新元素的top与left距离即为这个元素在路径还原中(x,y)坐标。创立元素之后地图中将显示在一个地方填充了一个新的元素。但是该动作不具有动画效果，所以使用SetInterval函数设立一个时间，每隔300ms生成一个新元素，肉眼看不出的情况下便成了动画。人机交互模式采用JS的监听键盘技术，获取keycode值判断分别处于wasd四个方向，改变新元素的属性即可，同理新元素的top与left均为坐标(x,y)
总结：
害，怎么说呢一个喜欢算法的去搞了前端，设计出来的也是关于算法的...害
还是想让自己的ACM更上一层楼叭！加油acmer！
京公网安备 11010502036488号