a-star算法+二叉堆优化
2014-09-10 18:45
218 查看
能不能更快
上一篇的顺序的openlist的时间复杂度已经是O(n)了，因为只有插入的消耗，查找的消耗没有，那能不能更快呢，答案是可以，为什么能更快，因为这个算法的特殊性，我们用的是一个顺序的openlist，但是这个openlist其实并不一定顺序，只需要保证最小的在第一个就行了，为此，我们找到了更好的数据结构，二叉堆二叉堆
二叉堆是一种特殊的堆，二叉堆是完全二叉树或者是近似完全二叉树。二叉堆满足堆特性：父节点的键值总是保持固定的序关系于任何一个子节点的键值，且每个节点的左子树和右子树都是一个二叉堆。当父节点的键值总是大于或等于任何一个子节点的键值时为最大堆。 当父节点的键值总是小于或等于任何一个子节点的键值时为最小堆。
二叉堆一般用数组来表示。如果根节点在数组中的位置是1，第n个位置的子节点分别在2n和 2n+1。因此，第1个位置的子节点在2和3，第2个位置的子节点在4和5。以此类推。这种基于1的数组存储方式便于寻找父节点和子节点。
如果存储数组的下标基于0，那么下标为i的节点的子节点是2i + 1与2i + 2；其父节点的下标是⌊(i − 1) ∕ 2⌋。
如下图的两个堆：
1 11
/ \ / \
2 3 9 10
/ \ / \ / \ / \
4 5 6 7 5 6 7 8
/ \ / \ / \ / \
8 9 10 11 1 2 3 4
将这两个堆保存在以1开始的数组中：
位置: 1 2 3 4 5 6 7 8 9 10 11
左图: 1 2 3 4 5 6 7 8 9 10 11
右图: 11 9 10 5 6 7 8 1 2 3 4
对于一个很大的堆，这种存储是低效的。因为节点的子节点很可能在另外一个内存页中。B-heap是一种效率更高的存储方式，把每个子树放到同一内存页。
如果用指针链表存储堆，那么需要能访问叶节点的方法。可以对二叉树“穿线”(threading)方式，来依序遍历这些节点。
插入节点
在数组的最末尾插入新节点。然后自下而上调整子节点与父节点（称作up-heap或bubble-up, percolate-up, sift-up, trickle up, heapify-up, cascade-up操作）：比较当前节点与父节点，不满足堆性质则交换。从而使得当前子树满足二叉堆的性质。时间复杂度为O(log n)。删除根节点
删除根节点用于堆排序。对于最大堆，删除根节点就是删除最大值；对于最小堆，是删除最小值。然后，把堆存储的最后那个节点移到填在根节点处。再从上而下调整父节点与它的子节点：对于最大堆，父节点如果小于具有最大值的子节点，则交换二者。这一操作称作down-heap或bubble-down, percolate-down, sift-down, trickle down, heapify-down, cascade-down,extract-min/max等。直至当前节点与它的子节点满足堆性质为止。
下属对最大堆的自上而下调整堆的伪代码中，数组A的下标索引值是从1开始： Max-Heapify[1] (A, i):
left ← 2i
right ← 2i + 1
largest ← i
if left ≤ heap_length[A] and A[left] > A[largest] then:
largest ← left
if right ≤ heap_length[A] and A[right] > A[largest] then:
largest ← right
if largest ≠ i then:
swap A[i] ↔ A[largest]
Max-Heapify(A, largest)
构造二叉堆
一个直观办法是从单节点的二叉堆开始，每次插入一个节点。其时间复杂度为O(n \log n)。最优算法是从一个节点元素任意放置的二叉树开始，自底向上对每一个子树执行删除根节点时的Max-Heapify算法（这是对最大堆而言）使得当前子树成为一个二叉堆。具体而言，假设高度为h的子树均已完成二叉堆化，那么对于高度为h+1的子树，把其根节点沿着最大子节点的分枝做调整，最多需要h步完成二叉堆化。可以证明，这个算法的时间复杂度为O(n)。
建造最大堆的伪代码： Build-Max-Heap[1] (A):
heap_length[A] ← length[A]
for i ← floor(length[A]/2) downto 1 do
Max-Heapify(A, i)
合并两个二叉堆
最优方法是把两个二叉堆首尾相连放在一个数组中，然后构造新的二叉堆。时间复杂度为O(log n log k)，其中n、k为两个堆的元素数目。如果经常需要合并两个堆的操作，那么使用二项式堆更好，其时间复杂度为O(log n)。
代码
<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.data = newData;
}
var BinaryHeap = function(){
this.size = 1;
this.heapTree = new Array(1000);
this.insert = function(newData){
//新数据放到数组的最后
var newNode = new Node(newData);
this.heapTree[this.size] = newNode;
//判断这个新节点，是不是比父亲小，如果小的话交换
for (var i = this.size; i >= 2; i=parseInt(i/2)) {
var halfi = parseInt(i/2);
if (this.heapTree[halfi].data.f > newData.f) {
var tempNode = this.heapTree[halfi];
this.heapTree[halfi] = this.heapTree[i];
this.heapTree[i] = tempNode;
};
}
this.size = this.size + 1;
};
this.removeHeapRoot = function(data){
if(data.x != this.heapTree[1].data.x || data.y != this.heapTree[1].data.y){
//不是根节点，错误
alert("now heap root");
}
data.isInOpenList = false;
if (this.size == 2) {
this.size = 1;
}else{
this.heapTree[1] = this.heapTree[this.size - 1];
var index = 1;
while(index*2 <= this.size - 1){
if(index * 2 +1 <= this.size -1 && this.heapTree[index * 2 +1].data.f < this.heapTree[index * 2].data.f && this.heapTree[index * 2 +1].data.f < this.heapTree[index].data.f){
//存在右子节点，并且右字节点更小，跟右边换
var tempNode = this.heapTree[index*2+1];
this.heapTree[index*2+1] = this.heapTree[index];
this.heapTree[index] = tempNode;
index = index*2+1;
}else if(this.heapTree[index * 2].data.f < this.heapTree[index].data.f){
//1.有右子节点，但是要比要插入的大
//2.没有右子节点
var tempNode = this.heapTree[index*2];
this.heapTree[index*2] = this.heapTree[index];
this.heapTree[index] = tempNode;
index = index*2;
}else{
//比子节点都小
break;
}
}
this.size = this.size - 1;
}
}
};
</script>
<script type="text/javascript">
var strArr = new Array();
function printa(heapTree){
var min =heapTree.heapTree[1].data.f;
var str = "";
var count = 0;
for (var i = 1; i < heapTree.size; i++){
if (heapTree.heapTree[i].data.f < min) {
alert("error" + min + heapTree.heapTree[i].data.f);
};
str = str + heapTree.heapTree[i].data.f + "*" + heapTree.heapTree[i].data.x + "*" + heapTree.heapTree[i].data.y+ "___";
}
console.log(str);
}
</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);
tile.isInOpenList = true;
console.log("insert" + tile.f + "*" + tile.x + "*" + tile.y+ "___");
printa(openlist);
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 BinaryHeap();
var closelist=[];
var start=null;
var destination=null;
setDestination(13,6);
setStart(1,6);
function loop(){
if(findit==true){
return ;
}
currenttile = openlist.heapTree[1].data;
closetile(currenttile);
openlist.removeHeapRoot(currenttile);
console.log("remove"+ currenttile.f + "*" + currenttile.x + "*" + currenttile.y+ "___");
printa(openlist);
checkNeighbourTile(currenttile);
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- PHP通过session id 实现session共享和登录验证的代码
- How to Auto Include a Javascript File
- Locate a File Using a File Open Dialog Box
- Save a File Using a File Save Dialog Box
- php xml分析函数代码第1/2页
- Sample script that deletes a SQL Server database
- List all the Databases on a SQL Server
- Memcache 在PHP中的使用技巧
- How to create a simple rubics cube
- 搞点啥
- 教你把UIView切成任意形状
- A Best-Practices Approach to Data Center Monitoring
- linux awk 内置函数详细介绍（实例）
- Overview of Siebel Application Integration
- 利用A、G、DL、P策略来管理网络资源访问权限
- C语言（转自UNIX环境高级编程等）
- Essential Grid for ASP.NET
- 函数的递归