diff --git a/assets/index.html b/assets/index.html
index 74016b6..25d2d2f 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -75,26 +75,27 @@
return ((a.x + a.y) - (b.x + b.y));
});
+ var heightMap = {};
+ for (var i = 0; i < tiles.length; i++) {
+ var t = tiles[i];
+ heightMap[t.x + ',' + t.y] = t.h;
+ }
+
for (var i = 0; i < tiles.length; i++) {
var t = tiles[i];
var wx = t.x, wy = t.y, h = t.h;
var water = isWater(h);
+
+ var hLeft = heightMap[(wx - TILE) + ',' + wy] || 0;
+ var hRight = heightMap[(wx + TILE) + ',' + wy] || 0;
+ var hFront = heightMap[wx + ',' + (wy - TILE)] || 0;
+ var hBack = heightMap[wx + ',' + (wy + TILE)] || 0;
+
var topColor = water ? '#2299dd' : '#33aa33';
var leftColor = water ? '#1166aa' : '#226622';
var rightColor = water ? '#0d4477' : '#114411';
- if (h > 0) {
- var lighting = 0.5 + Math.max(0, sinA * 0.3 + 0.2);
- topColor = applyLighting(topColor, lighting);
- leftColor = applyLighting(leftColor, lighting * 0.7);
- rightColor = applyLighting(rightColor, lighting * 0.5);
- } else if (water) {
- topColor = '#2299dd';
- leftColor = '#1166aa';
- rightColor = '#0d4477';
- }
-
var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
@@ -109,35 +110,26 @@
ctx.closePath();
ctx.fill();
- if (h !== 0 || water) {
- var bot1 = project(wx, wy + TILE, 0);
- var bot2 = project(wx + TILE, wy + TILE, 0);
- var bot3 = project(wx + TILE, wy, 0);
- var bot4 = project(wx, wy, 0);
-
+ if (hLeft < h) {
ctx.fillStyle = leftColor;
ctx.beginPath();
- ctx.moveTo(bot4[0], bot4[1]);
- ctx.lineTo(top4[0], top4[1]);
+ ctx.moveTo(top4[0], top4[1]);
ctx.lineTo(top1[0], top1[1]);
- ctx.lineTo(bot1[0], bot1[1]);
- ctx.closePath();
- ctx.fill();
-
- ctx.fillStyle = rightColor;
- ctx.beginPath();
- ctx.moveTo(bot3[0], bot3[1]);
- ctx.lineTo(top3[0], top3[1]);
- ctx.lineTo(top4[0], top4[1]);
- ctx.lineTo(bot4[0], bot4[1]);
+ ctx.lineTo(top1[0], top1[1] + (h - hLeft) * HEIGHT_UNIT);
+ ctx.lineTo(top4[0], top4[1] + (h - hLeft) * HEIGHT_UNIT);
ctx.closePath();
ctx.fill();
}
- if (h > 0) {
- ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
- ctx.lineWidth = 1;
- ctx.strokeRect(top1[0], top1[1], top3[0] - top1[0], top3[1] - top1[1]);
+ if (hBack < h) {
+ ctx.fillStyle = rightColor;
+ ctx.beginPath();
+ ctx.moveTo(top3[0], top3[1]);
+ ctx.lineTo(top4[0], top4[1]);
+ ctx.lineTo(top4[0], top4[1] + (h - hBack) * HEIGHT_UNIT);
+ ctx.lineTo(top3[0], top3[1] + (h - hBack) * HEIGHT_UNIT);
+ ctx.closePath();
+ ctx.fill();
}
}
}