Walkable mask painting

This commit is contained in:
Ian Gulliver
2021-05-17 04:26:18 +00:00
parent 0030b63e3a
commit 9d681291cc
43 changed files with 577 additions and 362 deletions

View File

@@ -22,83 +22,106 @@ export function main() {
real.style.top = 'calc((-8 / 70) * min(140vw, 175vh))';
real.style.left = 'calc((-10 / 70) * min(140vw, 175vh))';
const grid = new Grid(real);
grid.set_size(70, 56);
grid.set_tileset('wasteland');
grid.set_layers(['road', 'water', 'bridge', 'surface', 'projectile']);
const grid = new Grid(
real,
140, 112,
'wasteland',
['road', 'water', 'bridge', 'surface', 'projectile'],
['walkable', 'not-flyable'],
);
grid.add_tile(tiles.ROAD_TB, 20, 46);
grid.add_tile(tiles.ROAD_BL, 18, 40);
grid.add_tile(tiles.ROAD_TR, 12, 38);
grid.add_tile(tiles.ROAD_BR, 12, 32);
grid.add_tile(tiles.ROAD_TL, 18, 30);
grid.add_tile(tiles.ROAD_BL, 18, 24);
grid.add_tile(tiles.ROAD_TR, 12, 22);
grid.add_tile(tiles.ROAD_BR, 12, 16);
grid.add_tile(tiles.ROAD_LR, 18, 16);
grid.add_tile(tiles.ROAD_TBLR, 24, 14);
grid.add_tile(tiles.ROAD_TB, 26, 2);
grid.add_tile(tiles.ROAD_TB, 26, 8);
grid.add_tile(tiles.ROAD_TB, 26, 22);
grid.add_tile(tiles.ROAD_TB, 26, 28);
grid.add_tile(tiles.ROAD_TB, 26, 34);
grid.add_tile(tiles.ROAD_TB, 26, 40);
grid.add_tile(tiles.ROAD_TB, 26, 46);
grid.add_tile(tiles.ROAD_BL, 32, 16);
grid.add_tile(tiles.ROAD_TB, 34, 22);
grid.add_tile(tiles.ROAD_TB, 34, 28);
grid.add_tile(tiles.ROAD_TB, 34, 34);
grid.add_tile(tiles.ROAD_TR, 34, 40);
grid.add_tile(tiles.ROAD_LR, 40, 42);
grid.add_tile(tiles.ROAD_LR, 46, 42);
grid.add_tile(tiles.ROAD_TL, 52, 40);
grid.add_tile(tiles.ROAD_BL, 52, 34);
grid.add_tile(tiles.ROAD_LR, 46, 34);
grid.add_tile(tiles.ROAD_TR, 40, 32);
grid.add_tile(tiles.ROAD_BR, 40, 26);
grid.add_tile(tiles.ROAD_LR, 46, 26);
grid.add_tile(tiles.ROAD_TL, 52, 24);
grid.add_tile(tiles.ROAD_BL, 52, 18);
grid.add_tile(tiles.ROAD_LR, 46, 18);
grid.add_tile(tiles.ROAD_TR, 40, 16);
grid.add_tile(tiles.ROAD_BR, 40, 10);
grid.add_tile(tiles.ROAD_LR, 46, 10);
grid.add_tile(tiles.ROAD_LR, 52, 10);
grid.add_tile(tiles.ROAD_LR, 58, 10);
grid.add_tile(tiles.EMPTY, 30, 20);
grid.add_tile(tiles.ROAD_TB, 40, 92);
grid.add_tile(tiles.ROAD_BL, 36, 80);
grid.add_tile(tiles.ROAD_TR, 24, 76);
grid.add_tile(tiles.ROAD_BR, 24, 64);
grid.add_tile(tiles.ROAD_TL, 36, 60);
grid.add_tile(tiles.ROAD_BL, 36, 48);
grid.add_tile(tiles.ROAD_TR, 24, 44);
grid.add_tile(tiles.ROAD_BR, 24, 32);
grid.add_tile(tiles.ROAD_LR, 36, 32);
grid.add_tile(tiles.ROAD_TBLR, 48, 28);
grid.add_tile(tiles.ROAD_TB, 52, 4);
grid.add_tile(tiles.ROAD_TB, 52, 16);
grid.add_tile(tiles.ROAD_TB, 52, 44);
grid.add_tile(tiles.ROAD_TB, 52, 56);
grid.add_tile(tiles.ROAD_TB, 52, 68);
grid.add_tile(tiles.ROAD_TB, 52, 80);
grid.add_tile(tiles.ROAD_TB, 52, 92);
grid.add_tile(tiles.ROAD_BL, 64, 32);
grid.add_tile(tiles.ROAD_TB, 68, 44);
grid.add_tile(tiles.ROAD_TB, 68, 56);
grid.add_tile(tiles.ROAD_TB, 68, 68);
grid.add_tile(tiles.ROAD_TR, 68, 80);
grid.add_tile(tiles.ROAD_LR, 80, 84);
grid.add_tile(tiles.ROAD_LR, 92, 84);
grid.add_tile(tiles.ROAD_TL, 104, 80);
grid.add_tile(tiles.ROAD_BL, 104, 68);
grid.add_tile(tiles.ROAD_LR, 92, 68);
grid.add_tile(tiles.ROAD_TR, 80, 64);
grid.add_tile(tiles.ROAD_BR, 80, 52);
grid.add_tile(tiles.ROAD_LR, 92, 52);
grid.add_tile(tiles.ROAD_TL, 104, 48);
grid.add_tile(tiles.ROAD_BL, 104, 36);
grid.add_tile(tiles.ROAD_LR, 92, 36);
grid.add_tile(tiles.ROAD_TR, 80, 32);
grid.add_tile(tiles.ROAD_BR, 80, 20);
grid.add_tile(tiles.ROAD_LR, 92, 20);
grid.add_tile(tiles.ROAD_LR, 104, 20);
grid.add_tile(tiles.ROAD_LR, 116, 20);
grid.add_tile(tiles.EMPTY, 60, 40);
grid.add_tile(tiles.RIVER_TB, 47, 46);
grid.add_tile(tiles.RIVER_TB, 47, 40);
grid.add_tile(tiles.RIVER_TB, 47, 34);
grid.add_tile(tiles.RIVER_TB, 47, 28);
grid.add_tile(tiles.RIVER_TB, 47, 22);
grid.add_tile(tiles.RIVER_TB, 47, 16);
grid.add_tile(tiles.RIVER_TB, 47, 10);
grid.add_tile(tiles.RIVER_TB, 47, 4);
grid.add_tile(tiles.RIVER_TB, 94, 92);
grid.add_tile(tiles.RIVER_TB, 94, 80);
grid.add_tile(tiles.RIVER_TB, 94, 68);
grid.add_tile(tiles.RIVER_TB, 94, 56);
grid.add_tile(tiles.RIVER_TB, 94, 44);
grid.add_tile(tiles.RIVER_TB, 94, 32);
grid.add_tile(tiles.RIVER_TB, 94, 20);
grid.add_tile(tiles.RIVER_TB, 94, 8);
grid.add_tile(tiles.BRIDGE_LR, 46, 42);
grid.add_tile(tiles.BRIDGE_LR, 46, 34);
grid.add_tile(tiles.BRIDGE_LR, 46, 26);
grid.add_tile(tiles.BRIDGE_LR, 46, 18);
grid.add_tile(tiles.BRIDGE_LR, 46, 10);
grid.add_tile(tiles.BRIDGE_LR, 92, 84);
grid.add_tile(tiles.BRIDGE_LR, 92, 68);
grid.add_tile(tiles.BRIDGE_LR, 92, 52);
grid.add_tile(tiles.BRIDGE_LR, 92, 36);
grid.add_tile(tiles.BRIDGE_LR, 92, 20);
{
const m = grid.masks.get('walkable')!.mask;
for (let x = 0; x < m.length; x++) {
for (let y = 0; y < m[x].length; y++) {
if (!m[x][y]) {
continue;
}
const div = document.createElement('div');
real.appendChild(div);
div.style.gridColumnStart = `${x + 1}`;
div.style.gridRowStart = `${y + 1}`;
div.style.gridColumnEnd = 'span 1';
div.style.gridRowEnd = 'span 1';
div.style.backgroundColor = 'orange';
div.style.opacity = '0.3';
div.style.zIndex = '1000000';
}
}
}
function rand(min: number, max: number): number {
return Math.round(Math.random() * (max - min) + min);
}
const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 28);
const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 60, 56);
setInterval(() => {
tower.play('fire');
const target_relative_x = rand(-20, 20);
const target_relative_y = rand(-10, 20);
const target_relative_x = rand(-40, 40);
const target_relative_y = rand(-20, 40);
const factory = new ProjectileTileFactory(tiles.FIREBALL, target_relative_x, target_relative_y, 5, 1.5, 5);
grid.add_tile(factory, 31, 27);
grid.add_tile(factory, 62, 54);
setTimeout(() => {
grid.add_tile(tiles.FIREBALL_IMPACT, 31 + target_relative_x, 27 + target_relative_y);
grid.add_tile(tiles.FIREBALL_IMPACT, 62 + target_relative_x, 54 + target_relative_y);
}, factory.duration);
}, 3250);
const greenaxe = grid.add_tile(tiles.GREENAXE, 30, 16);
const greenaxe = grid.add_tile(tiles.GREENAXE, 60, 32);
greenaxe.play('walk');
greenaxe.elem.style.transitionProperty = 'top,left';
greenaxe.elem.style.transitionDuration = '25s';