]> git.plutz.net Git - isotilejs/blobdiff - index.html
renderer for rhombic maps
[isotilejs] / index.html
index ea0f3dfc0df9278da1c53ab475f89e5dba7803c1..6d5514bf1391de6a0c2ad0597b06155c72f200d6 100644 (file)
@@ -7,88 +7,86 @@
     Canvas not supported<br/>
     <img id="maptiles" src="tileset.png" width="64" style="overflow: hidden;"  />
     <tiles>
     Canvas not supported<br/>
     <img id="maptiles" src="tileset.png" width="64" style="overflow: hidden;"  />
     <tiles>
-      <tile position="2" animated="1"></tile>
-      <tile position="3" elevation=".125"></tile>
-      <tile position="4" blocking="yes"></tile>
+      <tile position="0" name="air" fluid="1"></tile>
+      <tile position="1" name="cursor" animated=".125"></tile>
+      <tile position="2" name="grass" animated=".0625"></tile>
+      <tile position="3" name="parquet" elevation=".125"></tile>
+      <tile position="4" name="sand"></tile>
+      <tile position="5" name="dirt" blocking="1"></tile>
+      <tile position="6" name="brick" blocking="1"></tile>
+      <tile position="7" name="water" animated="1" fluid=".5"></tile>
     </tiles>
     </tiles>
-    <img id="character" src="character.png" speed="2.75"/>
-    <div id="map" columns="18" rows="36">
-      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
-      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
-      5, 1, 1, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 2, 2, 2, 1, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 2, 1, 1, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 2, 2, 1, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 1, 4, 4, 1, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2,5, 
-      5, 2, 2, 2, 1, 4, 1, 2, 2, 2, 4, 2, 2, 4, 4, 2, 2, 5,
-      5,  2, 2, 2, 1, 1, 2, 2, 2, 2, 4, 2, 4, 3, 4, 2, 2,5, 
-      5, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 4, 4, 3, 3, 4, 2, 5,
-      5,  2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 4, 3, 3, 3, 4, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 3, 4, 3, 3, 3, 4, 5,
-      5,  2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 3, 3, 3, 4, 2,5,
-      5, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 4, 3, 4, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 3, 3, 4, 4, 2, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 3, 3, 4, 2, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 2, 3, 3, 2, 2, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 1, 3, 2, 2, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2, 5,
-      5,  2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2,5, 
-      5, 2, 2, 4, 4, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 2, 2, 5,
-      5,  2, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 2, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5, 
-      5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5,
-      5,  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,5,
-      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
-      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
-
-      0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,  0,
-      0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,  0,
-      0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 4, 4, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0, 4, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 4, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 4, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 4,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 4, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,
-      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+    <img id="character" src="character.png" speed="4"/>
+    <div id="map" columns="32" rows="32">
+      6, 6, 6, 6, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
+       6, 6, 6, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
+      5, 5, 5, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+      5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+       5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 
+
+      6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
+       6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 
+      2, 2, 2, 7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 6, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      7, 7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      7, 7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      7, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 4, 4, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 7, 2, 2, 2, 2, 2, 2, 2, 6, 3, 4, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 6, 4, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 6, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+      2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
+       2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
     </div>
   </canvas>
 </body><script>
     </div>
   </canvas>
 </body><script>
+var gravity = 9.81, fps = 30;
 view = document.getElementById("view");
 canvas = document.getElementById("view").getContext("2d");
 
 view = document.getElementById("view");
 canvas = document.getElementById("view").getContext("2d");
 
@@ -98,7 +96,7 @@ map = {
   data: document.getElementById("map").textContent.split(',') || [],
   tiles: document.getElementById("maptiles"),
 
   data: document.getElementById("map").textContent.split(',') || [],
   tiles: document.getElementById("maptiles"),
 
-  default_props: {animated: false, elevation: 0, blocking: false},
+  default_props: {animated: false, elevation: 0, blocking: false, fluid: false},
   tileprops: [],
   tw: 32, th: 16, sw: 16, sh: 8,
   offset_x: 0, offset_y: 0,
   tileprops: [],
   tw: 32, th: 16, sw: 16, sh: 8,
   offset_x: 0, offset_y: 0,
@@ -109,25 +107,27 @@ map = {
     this.sw = this.tw / 2;
     this.sh = this.th / 2;
 
     this.sw = this.tw / 2;
     this.sh = this.th / 2;
 
+    this.gravity = gravity / fps / Math.sqrt(this.sw * this.sw + this.sh * this.sh) * this.sh;
+
     var prop, i;
 
     for (i in this.data) this.data[i] = this.data[i] * 1 || 0; // make numeric
 
     for (prop of document.querySelectorAll("tiles > tile")) {
       i = prop.getAttribute("position") * 1;
     var prop, i;
 
     for (i in this.data) this.data[i] = this.data[i] * 1 || 0; // make numeric
 
     for (prop of document.querySelectorAll("tiles > tile")) {
       i = prop.getAttribute("position") * 1;
-      if (i) {
-        this.tileprops[i] = {
-          animated:  prop.getAttribute("animated")      || this.default_props.animated,
-          elevation: prop.getAttribute("elevation") * 1 || this.default_props.elevation,
-          blocking:  prop.getAttribute("blocking")      || this.default_props.blocking
-        }
+      if (i || i == 0) this.tileprops[i] = {
+        animated:  prop.getAttribute("animated")      || this.default_props.animated,
+        elevation: prop.getAttribute("elevation") * 1 || this.default_props.elevation,
+        blocking:  prop.getAttribute("blocking")      || this.default_props.blocking,
+        fluid:     prop.getAttribute("fluid")         || this.default_props.fluid
       }
       }
+      if (!this.tileprops[0]) this.tileprops[0] = { animated: false, elevation: 0, blocking: false, fluid: 1 }
     }
   },
 
     }
   },
 
-  props_of: function(n) { return this.tileprops[this.data[n]] || this.default_props; },
+  props_of: function(n) { return this.tileprops[this.data[n]] || this.tileprops[0]; },
 
 
-  tile_at: function(x, y) {
+  tile_at: function(x, y, z) {
     var my = (y / this.sh |0);
     var mx = (x / this.sw |0);
     
     var my = (y / this.sh |0);
     var mx = (x / this.sw |0);
     
@@ -139,28 +139,31 @@ map = {
     }
     mx -= x / this.tw |0;
   
     }
     mx -= x / this.tw |0;
   
-    return this.cols * my + mx;
+    return this.cols * my + mx + (z |0) * this.rows * this.cols;
   },
 
   draw: function(){ // map.draw
     var py = player.n / this.cols % this.rows |0;
     var px = player.n % this.cols;
   },
 
   draw: function(){ // map.draw
     var py = player.n / this.cols % this.rows |0;
     var px = player.n % this.cols;
-    var x, y, z, n, tile;
-  
+    var x, y, z, n, tile, props;
+
     for (y = 0; y < this.rows; ++y) {
       for (z = 0; z < this.data.length / (this.rows * this.cols); ++z)
       for (x = 0; x < this.cols; ++x) {
         n = x + y * map.cols + z * map.rows * map.cols;
     for (y = 0; y < this.rows; ++y) {
       for (z = 0; z < this.data.length / (this.rows * this.cols); ++z)
       for (x = 0; x < this.cols; ++x) {
         n = x + y * map.cols + z * map.rows * map.cols;
-        tile = ( n == ptr ) ? 5 : this.data[n];
+        tile = ( n == ptr ) ? 1 : this.data[n];
+        props = this.tileprops[tile] || this.default_props;
+
         canvas.globalAlpha = ( y > py &&
         canvas.globalAlpha = ( y > py &&
-                               (z > player.z || z == (player.z |0) && this.props_of(n).blocking) &&
+                               (z > player.z + 1 || z == (player.z |0) && props.blocking) &&
                                y < py + 6 &&
                                x > px - 2 &&
                                y < py + 6 &&
                                x > px - 2 &&
-                               x < px + 2
+                               x < px + 2 &&
+                               !props.fluid
                              ) ? .25 : 1;
   
         canvas.drawImage( this.tiles,
                              ) ? .25 : 1;
   
         canvas.drawImage( this.tiles,
-                          this.tw * tile, 2 * this.th * ((frame / 16 |0) % 8),
+                          this.tw * tile, 2 * this.th * ((props.animated * frame |0) % 8),
                           this.tw, 2 * this.th,
                           x * this.tw + y % 2 * this.sw - this.sw - this.offset_x,
                           y * this.sh - z * this.th - 3 * this.sh - this.offset_y,
                           this.tw, 2 * this.th,
                           x * this.tw + y % 2 * this.sw - this.sw - this.offset_x,
                           y * this.sh - z * this.th - 3 * this.sh - this.offset_y,
@@ -174,20 +177,20 @@ map = {
 
 player = {
   frame: 0, d: 's',
 
 player = {
   frame: 0, d: 's',
-  x: 40, y: 40, z: 0,
+  x: 40, y: 40, z: 1,
   sprite: document.getElementById("character"),
 
   init: function(){
     this.w = this.sprite.getAttribute("width")  * 1 || map.tw || 32;
     this.h = this.sprite.getAttribute("height") * 1 || map.sh * 6 || this.w * 1.5;
     this.o = this.sprite.getAttribute("offset") * 1 || map.sh || this.w / 4;
   sprite: document.getElementById("character"),
 
   init: function(){
     this.w = this.sprite.getAttribute("width")  * 1 || map.tw || 32;
     this.h = this.sprite.getAttribute("height") * 1 || map.sh * 6 || this.w * 1.5;
     this.o = this.sprite.getAttribute("offset") * 1 || map.sh || this.w / 4;
-    this.speed = this.sprite.getAttribute("speed") * 1|| this.w / 16;
-    this.n = map.tile_at(this.x, this.y) + this.z * map.rows * map.cols || 0;
+    this.ospeed = this.speed = this.sprite.getAttribute("speed") * 1|| this.w / 16;
+    this.n = map.tile_at(this.x, this.y, this.z);
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
   },
 
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
   },
 
-  move: function(){
+  move: function(){ // player.move
     var dx = 0, dy = 0;
   
     switch(this.d){
     var dx = 0, dy = 0;
   
     switch(this.d){
@@ -201,49 +204,44 @@ player = {
       case 'se': dy =  .45 * this.speed; dx =  .9 * this.speed; break;
     }
 
       case 'se': dy =  .45 * this.speed; dx =  .9 * this.speed; break;
     }
 
-    if (player.frame % 6 > 2) {
-      dx *= 1.375;
-      dy *= 1.375
-    } else {
-      dx *= .625;
-      dy *= .625;
-    }
-  
-    var n = map.tile_at(this.x + dx, this.y + dy) + this.z * map.rows * map.cols;
-    if (!map.props_of(n).blocking &&
-        !map.props_of(n + map.rows * map.cols).blocking
-       ) { this.x += dx; this.y += dy; this.n = n; }
-    else if (!map.props_of(n + map.rows * map.cols).blocking &&
-             !map.props_of(n + 2 * map.rows * map.cols).blocking
-       ) { this.x += dx; this.y += dy; this.z += 1; this.n = n + map.rows * map.cols; }
+    if (player.frame % 6 > 2) { dx *= 1.375; dy *= 1.375; }
+    else { dx *= .625; dy *= .625; }
   
   
+    var n = map.tile_at(this.x + dx, this.y + dy, this.z);
+    var prop = map.props_of(n), head = map.props_of(n + map.rows * map.cols);
+
+    if      (prop.fluid) { dx *= prop.fluid; dy *= prop.fluid; }
+    else if (head.fluid) { dx *= head.fluid; dy *= head.fluid; }
+
+    if (!prop.blocking && head.fluid) { 
+      this.x += dx; this.y += dy; this.n = n;
+    }
+
     this.frame += this.frame < 255 ? 1 : -127;
 
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
     this.frame += this.frame < 255 ? 1 : -127;
 
     map.offset_x = this.x - view.clientWidth / 2 |0;
     map.offset_y = this.y - view.clientHeight / 2 |0;
-  },
+  }, // end player.move
 
 
+  zspeed: 0,
   fall: function(){
   fall: function(){
-    if (!this.fallspeed) this.fallspeed = 0;
-    if (!this.falloff) this.falloff = 0;
-
-    if(this.falloff > 0 ||
-       !map.data[this.n] &&
-       !map.props_of(this.n - map.cols * map.rows).blocking
-      ) this.fallspeed += 1.81 * .03;
-    else this.fallspeed = 0;
-
-    this.falloff -= this.fallspeed;
-    if (this.falloff < 0 &&
-        (map.data[this.n] ||
-         map.props_of(this.n - map.cols * map.rows).blocking)) {
-      this.fallspeed = this.falloff = 0;
-    } else if (this.falloff < 0) {
-      this.falloff += 1;
-      this.z -= 1;
+    var props = map.props_of(this.n);
+    var bottom = map.props_of(this.n - map.rows * map.cols);
+    var zbase = (this.n / (map.rows * map.cols) |0) + props.elevation;
+
+    this.z += this.zspeed -= map.gravity;
+
+    if (this.z > zbase) {
+      this.speed = this.ospeed * 2;
+    } else if (props.fluid && !bottom.blocking) {
       this.n -= map.rows * map.cols;
       this.n -= map.rows * map.cols;
+    } else {
+      this.speed = this.ospeed;
+      this.zspeed = 0;
+      this.z = zbase;
     }
     }
-  },
+
+  }, // end player.fall
 
 
   draw: function(){ // player.draw
 
 
   draw: function(){ // player.draw
@@ -268,7 +266,7 @@ player = {
     canvas.drawImage( this.sprite, this.w * face, this.h * state,
                       this.w, this.h,
                       this.x - this.w / 2 - map.offset_x,
     canvas.drawImage( this.sprite, this.w * face, this.h * state,
                       this.w, this.h,
                       this.x - this.w / 2 - map.offset_x,
-                      this.y - (this.z |0) * map.th - this.h + this.o - map.offset_y - map.props_of(this.n).elevation * map.th - this.falloff * map.th,
+                      this.y - this.z * map.th - this.h + this.o - map.offset_y,
                       this.w, this.h );
    
   } // end player.draw
                       this.w, this.h );
    
   } // end player.draw
@@ -292,6 +290,9 @@ function get_input(){
     if ( player.frame > 11 ) player.frame = 0;
     player.move();
   }
     if ( player.frame > 11 ) player.frame = 0;
     player.move();
   }
+
+  // jump
+  if (keys[32] && player.zspeed == 0) {player.zspeed += .75; player.z +=.0001;}
 }
 
 function script(){
 }
 
 function script(){
@@ -303,7 +304,7 @@ function script(){
     player.fall();
     map.draw();
     frame += frame < 255 ? 1 : -255;
     player.fall();
     map.draw();
     frame += frame < 255 ? 1 : -255;
-  }, 33)
+  }, 1000 / fps);
 
   window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );
   window.addEventListener('keyup',   function(x){ keys[x.keyCode] = false;}, false );
 
   window.addEventListener('keydown', function(x){ keys[x.keyCode] = true; }, false );
   window.addEventListener('keyup',   function(x){ keys[x.keyCode] = false;}, false );
@@ -312,7 +313,7 @@ function script(){
     px = view.width  * (e.clientX - view.offsetLeft) / view.clientWidth |0;
     py = view.height * (e.clientY - view.offsetTop) / view.clientHeight |0;
 
     px = view.width  * (e.clientX - view.offsetLeft) / view.clientWidth |0;
     py = view.height * (e.clientY - view.offsetTop) / view.clientHeight |0;
 
-    ptr = map.tile_at(px + map.offset_x, py + map.offset_y);
+    ptr = map.tile_at(px + map.offset_x, py + map.offset_y, 0);
   })
 }
 </script></html>
   })
 }
 </script></html>