misc/tower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prototype walking monster

Browse Source
This commit is contained in:
Ian Gulliver
2021-05-13 04:09:46 +00:00
parent 6cc4e620ee
commit d1bdcf5485
28 changed files with 127 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ts/sequence_tile.ts
View File

@@ -1,8 +1,9 @@
import { AnimatableTile } from './animatable_tile.js';
import { Tile } from './tile.js';
export class SequenceTile extends Tile {
constructor(width: number, height: number, tiles: Tile[], delay: number, repeat: boolean) {
super(width, height);
export class SequenceTile extends AnimatableTile {
constructor(width: number, height: number, animations: Map<string, [Keyframe[], object]>, tiles: Tile[], delay: number, repeat: boolean) {
super(width, height, animations);
this.elem.style.position = 'relative';

5
ts/sequence_tile_factory.ts
View File

@@ -1,7 +1,8 @@
import { AnimatableTileFactory } from './animatable_tile_factory.js';
import { SequenceTile } from './sequence_tile.js';
import { TileFactory } from './tile_factory.js';
export class SequenceTileFactory extends TileFactory {
export class SequenceTileFactory extends AnimatableTileFactory {
tile_factories: TileFactory[];
delay: number;
repeat: boolean;
@@ -24,7 +25,7 @@ export class SequenceTileFactory extends TileFactory {
tiles.push(tile_factory.build(tileset));
}
return new SequenceTile(this.width, this.height, tiles, this.delay, this.repeat);
return new SequenceTile(this.width, this.height, this.animations, tiles, this.delay, this.repeat);
}
copy(): SequenceTileFactory {

2
ts/simple_tile_factory.ts
View File

@@ -13,7 +13,7 @@ export class SimpleTileFactory extends AnimatableTileFactory {
return new SimpleTile(
this.width,
this.height,
`images/${this.name.replace('{tileset}', tileset)}.svg`,
`images/${this.name.replace('{tileset}', tileset)}`,
this.animations,
);
}

75
ts/tiles.ts
View File

@@ -3,42 +3,42 @@ import { SequenceTileFactory } from './sequence_tile_factory.js';
import { SimpleTileFactory } from './simple_tile_factory.js';
// Straig
export const ROAD_LR = new SimpleTileFactory('road', 6, 4, '{tileset}/road-lr');
export const ROAD_TB = new SimpleTileFactory('road', 4, 6, '{tileset}/road-tb');
export const ROAD_LR = new SimpleTileFactory('road', 6, 4, '{tileset}/road-lr.svg');
export const ROAD_TB = new SimpleTileFactory('road', 4, 6, '{tileset}/road-tb.svg');
// Elbow
export const ROAD_BL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-bl');
export const ROAD_BR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-br');
export const ROAD_TL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tl');
export const ROAD_TR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tr');
export const ROAD_BL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-bl.svg');
export const ROAD_BR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-br.svg');
export const ROAD_TL = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tl.svg');
export const ROAD_TR = new SimpleTileFactory('road', 6, 6, '{tileset}/road-tr.svg');
// T
export const ROAD_BLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-blr');
export const ROAD_TLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-tlr');
export const ROAD_LTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-ltb');
export const ROAD_RTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-rtb');
export const ROAD_BLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-blr.svg');
export const ROAD_TLR = new SimpleTileFactory('road', 8, 6, '{tileset}/road-tlr.svg');
export const ROAD_LTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-ltb.svg');
export const ROAD_RTB = new SimpleTileFactory('road', 6, 8, '{tileset}/road-rtb.svg');
// +
export const ROAD_TBLR = new SimpleTileFactory('road', 8, 8, '{tileset}/road-tblr');
export const ROAD_TBLR = new SimpleTileFactory('road', 8, 8, '{tileset}/road-tblr.svg');
// Tower base
export const EMPTY = new SimpleTileFactory('road', 4, 2, '{tileset}/empty');
export const EMPTY = new SimpleTileFactory('road', 4, 2, '{tileset}/empty.svg');
// Straight
export const RIVER_LR = new SimpleTileFactory('water', 6, 4, '{tileset}/river-lr');
export const RIVER_TB = new SimpleTileFactory('water', 4, 6, '{tileset}/river-tb');
export const RIVER_LR = new SimpleTileFactory('water', 6, 4, '{tileset}/river-lr.svg');
export const RIVER_TB = new SimpleTileFactory('water', 4, 6, '{tileset}/river-tb.svg');
// Elbow
export const RIVER_BR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-br');
export const RIVER_BL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-bl');
export const RIVER_TR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tr');
export const RIVER_TL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tl');
export const RIVER_BR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-br.svg');
export const RIVER_BL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-bl.svg');
export const RIVER_TR = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tr.svg');
export const RIVER_TL = new SimpleTileFactory('water', 6, 6, '{tileset}/river-tl.svg');
export const BRIDGE_LR = new SimpleTileFactory('bridge', 6, 4, '{tileset}/bridge-lr');
export const BRIDGE_LR = new SimpleTileFactory('bridge', 6, 4, '{tileset}/bridge-lr.svg');
const tower_fireball1_back = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-back');
const tower_fireball1 = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1');
const tower_fireball1_front = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-front');
const tower_fireball1_back = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-back.svg');
const tower_fireball1 = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1.svg');
const tower_fireball1_front = new SimpleTileFactory('surface', 4, 4, 'tower/fireball1-front.svg');
for (const tile_factory of [tower_fireball1_back, tower_fireball1_front]) {
tile_factory.add_animation(
@@ -75,15 +75,28 @@ export const TOWER_FIREBALL1 = new LayeredTileFactory([
tower_fireball1_front,
]);
export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'tower/fireball');
export const FIREBALL = new SimpleTileFactory('projectile', 2, 2, 'tower/fireball.svg');
export const FIREBALL_IMPACT = new SequenceTileFactory([
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact1'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact2'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact3'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact4'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact5'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact6'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact7'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact8'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact1.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact2.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact3.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact4.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact5.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact6.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact7.svg'),
new SimpleTileFactory('surface', 2, 2, 'tower/fireball-impact8.svg'),
], 50, false);
export const GREENAXE_WALK1 = new SequenceTileFactory([
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk1.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk2.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk3.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk4.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk5.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk6.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk7.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk8.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk9.png'),
new SimpleTileFactory('surface', 3, 3, 'monster/greenaxe-walk10.png'),
], 100, true);

9
ts/tower.ts
View File

@@ -97,6 +97,15 @@ export function main() {
grid.add_tile(tiles.FIREBALL_IMPACT, 31 + target_relative_x, 27 + target_relative_y);
}, factory.duration);
}, 3250);
const greenaxe = grid.add_tile(tiles.GREENAXE_WALK1, 30, 16);
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();