a-star搜索算法可以针对map-tiled类游戏中的任务的寻路提供一个比较快，搜索结果比较短的计算发法
原理
从起点开始，向周围的tile扩展，并且周围tile身上存储为parent，那有8个，到底下一步移到哪个里面，有三个值，F,G,H，G是当前的tile到起点的距离，H是当前tile到终点的距离（这个是估算距离），F=G+H，然后通过每次都选取F最小的tile，这样，这个tile距起点和终点距离最近，通过不断选取，可以得到一条路径
路径在哪里
通过tile->parent->parent->parent.......这样不断的获得parent，可以得到一条完整的路径
步骤分解
1,设置格子，并且选好起点终点
2，设置一些墙/障碍物
3,不断点击go按钮，就可以不断扩展了
如图，可见绿色为openlist，紫色边框为closelist，每个tile左上角是F,左下角是G,右下角是H，G的计算才用水平竖直取10，斜着的取14，H是预测值才用霍夫曼算法并且*50
算法描述
1，把起始格添加到开启列表。
2，重复如下的工作：
a) 寻找开启列表中F值最低的格子。我们称它为当前格。
b) 把它切换到关闭列表。
c) 对相邻的8格中的每一个？
* 如果它不可通过或者已经在关闭列表中，略过它。反之如下。
* 如果它不在开启列表中，把它添加进去。把当前格作为这一格的父节点。记录这一格的F,G,和H值。
* 如果它已经在开启列表中，用G值为参考检查新的路径是否更好。更低的G值意味着更好的路径。如果是这样，就把这一格的父节点改成当前格，并且重新计算这一格的G和F值。如果你保持你的开启列表按F值排序，改变之后你可能需要重新对开启列表排序。
d) 停止，当你
* 把目标格添加进了关闭列表(注解)，这时候路径被找到，或者
* 没有找到目标格，开启列表已经空了。这时候，路径不存在。
3.保存路径。从目标格开始，沿着每一格的父节点移动直到回到起始格。这就是你的路径。
代码
<?php
for($i=15;$i>=0;$i--){
for($j=0;$j<20;$j++){
echo "<div id="."tile_".$j.'_'.$i." class=".'tile'.">".'<br />';
echo '<span id="fvalue" class="f"></span>'.'<br />';
echo '<span id="gvalue" class="g"></span>'.'<br />';
echo '<span id="hvalue" class="h"></span>'.'<br />';
echo ' </div>'.'<br />';
}
echo '<div style="clear:both"></div>';
}
?><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.οnmοusedοwn=click;
</script>
</head>
<body οnkeydοwn="keydown();">
<div class="controll">
<input type="button" οnclick="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>
var maxY=14;
var maxX=19;
var tilelist=new Array();
for(var i=0;i<=maxX;i++){
tilelist[i]=new Array();
}
function setblock(x,y){
tilelist[x][y]=1;
var toblock=document.getElementById("tile_"+x+"_"+y);
toblock.style.backgroundColor="blue";
}
function setStart(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.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);
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.push(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 isin(tile,tiles){
for(var k in tiles){
if(tiles[k].x==tile.x && tiles[k].y==tile.y){
tile.g=tiles[k].g;
tile.h=tiles[k].h;
tile.f=tiles[k].f;
tile.parent=tiles[k].parent;
return true;
}
}
return false;
}
function tile(){
this.x=0;
this.y=0;
this.g=0;
this.h=0;
this.f=0;
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 =new tile();
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( isin(tilenew,closelist) ){
continue;
}
if( isin(tilenew,openlist) ){
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");
}
openlist.sort(by("h"));
}
}
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=[];
var closelist=[];
var start=new tile();
var destination=new tile();
//setblock(8,4);
//setblock(8,5);
//setblock(8,6);
//setblock(8,7);
//setblock(8,8);
setStart(1,6);
setDestination(13,6);
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);
}
</script>
</html>
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
