本文针对A*算法在大型地图上的效率问题，提出了使用有序链表替代数组存储开放列表的方法，以此减少每次查找最小F值节点所需的遍历次数，进而提高算法的整体运行效率。
问题
上一节，已经把a-star基本思想实践了一下，但是有个问题，就是慢
这一篇，使用list存储openlist
原因
看上次的代码
function loop(){
if(findit==true){
return ;
}
var fvalue=openlist[0].f;
var currenttile=null;
var openlistkey=0;
for(var key in openlist){
var tile=openlist[key];
if(fvalue>=tile.f){
fvalue=tile.f;
currenttile=tile;
openlistkey=key;
}
}
closetile(currenttile);
openlist.splice(openlistkey,1);
checkNeighbourTile(currenttile);
}从openlist里面找到一个F值最小的tile，上次用的是数组，插入的时候也是随便插入的，所以，里面是乱序的，先找到最小的，必须遍历整个openlist，每一次loop都遍历，如果地图很大，开销也会很大， 所以优化点可以用list代替数组，然后插入的时候按照大小插入，这样整个list是按照F值从小到大的
每次loop就可以只要第一个节点，这样可以节省很多不必要的循环开销
代码
1.优化使用链表存储openlist
2.在tile身上存储是不是open，或者是不是close
3.修复一些bug
<html>
<head>
<style>
.tile{
float:left;
width:50px;
height:50px;
display:block;
border:3px solid black;
}
.tileclose{
float:left;
width:50px;
height:50px;
display:block;
border:3px solid blue;
}
.tileopen{
float:left;
width:50px;
height:50px;
display:block;
border:3px solid green;
}
.tilepath{
float:left;
width:50px;
height:50px;
display:block;
background-color:black;
}
.f{
color:#E1E100;
font-weight:bold;
font-size:16px;
line-height:25px;
display:inline-block;
width:50px;
height:25px;
}
.g{
font-weight:bold;
font-size:10px;
line-height:25px;
text-align:left;
display:inline-block;
width:25px;
height:25px;
}
.h{
font-weight:bold;
line-height:25px;
font-size:8px;
text-align:right;
display:inline-block;
width:15px;
color:red;
height:25px;
}
</style>
<script>
function keydown() {
if((event.keyCode==65 ||event.keyCode==13)) {
loop();
}
}
function click(e){
if(e.target.className=='tile'){
var a=e.target.id;
var arr=a.split('_');
var x=arr[1];
var y=arr[2];
setblock(x,y);
}
if(e.target.nodeName=="SPAN"){
var a=e.target.parentNode.id;
var arr=a.split('_');
var x=arr[1];
var y=arr[2];
setblock(x,y);
}
}
document.onmousedown=click;
</script>
</head>
<body onkeydown="keydown();">
<div class="controll">
<input type="button" onclick="loop();" value="go" />
</div>
<div id="tile_0_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_15" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_14" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_13" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_12" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_11" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_10" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_9" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_8" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_7" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_6" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_5" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_4" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_3" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_2" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_1" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
<div id="tile_0_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_1_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_2_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_3_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_4_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_5_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_6_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_7_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_8_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_9_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_10_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_11_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_12_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_13_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_14_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_15_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_16_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_17_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_18_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div id="tile_19_0" class="tile">
<span id="fvalue" class="f">
</span>
<span id="gvalue" class="g">
</span>
<span id="hvalue" class="h">
</span>
</div>
<div style="clear:both">
</div>
</body>
<script type="text/javascript">
var Node = function(newData){
this.next = null;
this.data = newData;
}
var List = function(){
this.head = null;
this.size = 0;
this.insert = function(newData){
newData.isInOpenList = true;
this.size += 1;
var newNode = new Node(newData);
if(this.head == null){
this.head = newNode;
return;
}
var tempNode = this.head;
if(tempNode.data.f > newData.f){
newNode.next = this.head;
this.head = newNode;
}else{
while(tempNode.next != null){
if (tempNode.next.data.f > newData.f) {
//找到了可插入点
newNode.next = tempNode.next;
tempNode.next = newNode;
return;
};
tempNode = tempNode.next;
}
tempNode.next = newNode;
}
};
this.getData = function(pos){
if(pos >= this.size || pos < 0)
return null;
else{
tempNode = this.head;
for(i = 0;i < pos;i++)
tempNode = tempNode.next;
return tempNode.data;
}
};
//remove the element at pos
this.remove = function(data){
data.isInOpenList = false;
var tempNode = this.head;
if(tempNode.data.x == data.x && tempNode.data.y == data.y){
this.head = tempNode.next;
}else{
while(tempNode.next != null){
if (tempNode.next.data.x == data.x && tempNode.next.data.y == data.y) {
tempNode.next = tempNode.next.next;
};
}
}
}
};
</script>
<script>
var maxY=14;
var maxX=19;
var tilelist=new Array();
for(var i=0;i<=maxX;i++){
tilelist[i] = new Array();
for (var j=0; j<= maxY; j++){
tilelist[i][j] = new tile();
}
}
function setblock(x,y){
tilelist[x][y]=1;
var toblock=document.getElementById("tile_"+x+"_"+y);
toblock.style.backgroundColor="blue";
}
function setStart(x,y){
start = tilelist[x][y];
start.x=x;
start.y=y;
start.parent=null;
opentile(start);
var toblock=document.getElementById("tile_"+x+"_"+y);
toblock.style.backgroundColor="green";
}
function setDestination(x,y){
destination = tilelist[x][y];
destination.x=x;
destination.y=y;
var toblock=document.getElementById("tile_"+x+"_"+y);
toblock.style.backgroundColor="red";
}
function isblock(x,y){
if(tilelist[x][y]!=undefined && tilelist[x][y]!=null &&tilelist[x][y]==1){
return true;
}
return false;
}
function closetile(tile){
closelist.push(tile);
tile.isInCloseList = true;
updateValue(tile,"#9F4D95");
}
var findit=false;
function opentile(tile){
if(tile.x==destination.x && tile.y==destination.y){
tile.style="tilepath";
while(tile.parent){
var tpath=document.getElementById("tile_"+tile.parent.x+"_"+tile.parent.y);
tpath.style.backgroundColor="red";
tile=tile.parent;
}
alert('find it');
findit=true;
}
openlist.insert(tile);
updateValue(tile,"#00EC00");
}
function updateValue(tile,color){
var toblock=document.getElementById("tile_"+tile.x+"_"+tile.y);
toblock.style.borderColor=color;
var fspan=toblock.children[0];
fspan.innerText=tile.f;
var gspan=toblock.children[1];
gspan.innerText=tile.g;
var hspan=toblock.children[2];
hspan.innerText=tile.h;
}
function tile(){
this.x=0;
this.y=0;
this.g=0;
this.h=0;
this.f=0;
this.isInOpenList = false;
this.isInCloseList = false;
this.parent=null;
}
var neighbour=[[-1,1],[0,1],[1,1],[-1,0],[1,0],[-1,-1],[0,-1],[1,-1]];
function checkNeighbourTile(tilecurrent){
for(var i=0;i<8;i++){
var x=tilecurrent.x+neighbour[i][0];
var y=tilecurrent.y+neighbour[i][1];
var tilenew =tilelist[x][y];
tilenew.x=x;
tilenew.y=y;
if(x<0 || y<0 || x>maxX || y>maxY){
continue;
}
if( isblock(x,y) ){//if is block,continue;
continue;
}
if( tilenew.isInCloseList ){
continue;
}
if( tilenew.isInOpenList){
var gbefore=tilenew.g;
var gnow=0;
if(Math.abs(neighbour[i][0])==Math.abs(neighbour[i][1])){
gnow=tilecurrent.g+14;
}else{
gnow=tilecurrent.g+10;
}
if(gnow<gbefore){
tilenew.parent=tilecurrent;
tilenew.g=gnow;
tilenew.f=tilenew.g+tilenew.h;
updateValue(tilenew);
}
}else{
tilenew.parent=tilecurrent;
if(Math.abs(neighbour[i][0])==Math.abs(neighbour[i][1])){
tilenew.g=tilecurrent.g+14;
}else{
tilenew.g=tilecurrent.g+10;
}
tilenew.h=50*(Math.abs(x-destination.x)+Math.abs(y-destination.y));
tilenew.f=tilenew.g+tilenew.h;
opentile(tilenew,"#00EC00");
}
}
}
var by = function(name){
return function(o, p){
if(parseInt(o[name])==parseInt(p[name])){
return 0;
}
if(parseInt(o[name])>parseInt(p[name])){
return -1;
}else{
return 1;
}
}
}
var openlist=new List();
var closelist=[];
var start=null;
var destination=null;
setDestination(13,6);
setStart(1,6);
function loop(){
if(findit==true){
return ;
}
currenttile = openlist.head.data;
closetile(currenttile);
openlist.remove(currenttile);
checkNeighbourTile(currenttile);
}
</script>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
