103 lines
4.3 KiB
JavaScript
103 lines
4.3 KiB
JavaScript
import { Grid } from './grid.js';
|
|
import { ProjectileTileFactory } from './projectile_tile_factory.js';
|
|
import * as tiles from './tiles.js';
|
|
export function main() {
|
|
document.body.style.margin = '0';
|
|
document.body.style.backgroundColor = 'black';
|
|
document.body.style.display = 'flex';
|
|
document.body.style.justifyContent = 'center';
|
|
const mask = document.createElement('div');
|
|
document.body.appendChild(mask);
|
|
mask.style.width = 'min(100vw, 125vh)';
|
|
mask.style.height = 'calc(0.8 * min(100vw, 125vh))';
|
|
mask.style.overflow = 'hidden';
|
|
const real = document.createElement('div');
|
|
mask.appendChild(real);
|
|
real.style.width = 'min(140vw, 175vh)';
|
|
real.style.height = 'calc(0.8 * min(140vw, 175vh))';
|
|
real.style.position = 'relative';
|
|
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']);
|
|
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.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.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);
|
|
function rand(min, max) {
|
|
return Math.round(Math.random() * (max - min) + min);
|
|
}
|
|
const tower = grid.add_tile(tiles.TOWER_FIREBALL1, 30, 28);
|
|
setInterval(() => {
|
|
tower.play('fire');
|
|
const target_relative_x = rand(-20, 20);
|
|
const target_relative_y = rand(-10, 20);
|
|
const factory = new ProjectileTileFactory(tiles.FIREBALL, target_relative_x, target_relative_y, 5, 1.5, 5);
|
|
grid.add_tile(factory, 31, 27);
|
|
setTimeout(() => {
|
|
grid.add_tile(tiles.FIREBALL_IMPACT, 31 + target_relative_x, 27 + target_relative_y);
|
|
}, factory.duration);
|
|
}, 3250);
|
|
const greenaxe = grid.add_tile(tiles.GREENAXE, 30, 16);
|
|
greenaxe.play('walk');
|
|
greenaxe.elem.style.transitionProperty = 'top,left';
|
|
greenaxe.elem.style.transitionDuration = '25s';
|
|
greenaxe.elem.style.transitionTimingFunction = 'linear';
|
|
greenaxe.elem.style.top = '0';
|
|
greenaxe.elem.style.left = '0';
|
|
greenaxe.elem.style.transform = 'scaleX(-1)';
|
|
setTimeout(() => greenaxe.elem.style.left = '-500%', 100);
|
|
}
|
|
;
|
|
main();
|
|
//# sourceMappingURL=tower.js.map
|