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

Prototype tower + projectile animation

Browse Source
This commit is contained in:
Ian Gulliver
2021-05-10 03:36:12 +00:00
parent 5e9a00ef76
commit 0818a57202
13 changed files with 5261 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ts/tile.ts
View File

@@ -1,20 +1,20 @@
export class Tile {
#name: string;
#width: number;
#height: number;
name: string;
width: number;
height: number;
constructor(name: string, width: number, height: number) {
this.#name = name;
this.#width = width;
this.#height = height;
this.name = name;
this.width = width;
this.height = height;
}
get_elem(tileset: string): HTMLElement {
const elem = document.createElement('div');
elem.style.backgroundImage = `url("images/${tileset}/${this.#name}.svg")`;
elem.style.backgroundImage = `url("images/${tileset}/${this.name}.svg")`;
elem.style.backgroundSize = 'cover';
elem.style.gridColumnEnd = `span ${this.#width}`;
elem.style.gridRowEnd = `span ${this.#height}`;
elem.style.gridColumnEnd = `span ${this.width}`;
elem.style.gridRowEnd = `span ${this.height}`;
return elem;
}
}

162
ts/tiles.ts
View File

@@ -33,3 +33,165 @@ export const RIVER_TR = new Tile('river-tr', 6, 6);
export const RIVER_TL = new Tile('river-tl', 6, 6);
export const BRIDGE_LR = new Tile('bridge-lr', 6, 4);
class Tower extends Tile {
get_elem(_: string): HTMLElement {
const elem = document.createElement('div');
elem.style.gridColumnEnd = `span ${this.width}`;
elem.style.gridRowEnd = `span ${this.height}`;
elem.style.position = 'relative';
const base = document.createElement('div');
elem.appendChild(base);
base.style.width = '100%';
base.style.height = '100%';
base.style.position = 'absolute';
base.style.top = '0';
base.style.left = '0';
base.style.backgroundImage = `url("images/tower/${this.name}.svg")`;
base.style.backgroundSize = 'cover';
base.style.zIndex = '2';
const back = document.createElement('div');
elem.appendChild(back);
back.style.width = '100%';
back.style.height = '100%';
back.style.position = 'absolute';
back.style.top = '0';
back.style.left = '0';
back.style.backgroundImage = `url("images/tower/${this.name}-back.svg")`;
back.style.backgroundSize = 'cover';
back.style.zIndex = '1';
const front = document.createElement('div');
elem.appendChild(front);
front.style.width = '100%';
front.style.height = '100%';
front.style.position = 'absolute';
front.style.top = '0';
front.style.left = '0';
front.style.backgroundImage = `url("images/tower/${this.name}-front.svg")`;
front.style.backgroundSize = 'cover';
front.style.zIndex = '3';
setInterval(() => {
back.animate([
{
'offset': 0.0,
'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
'top': '0',
},
{
'offset': 0.3,
'easing': 'linear',
'top': '25%',
},
{
'offset': 1.0,
'top': '0',
},
], {
'duration': 3000,
'iterations': 1,
});
front.animate([
{
'offset': 0.0,
'easing': 'cubic-bezier(0.02, 1.07, 0.73, 0.99)',
'top': '0',
},
{
'offset': 0.3,
'easing': 'linear',
'top': '25%',
},
{
'offset': 1.0,
'top': '0',
},
], {
'duration': 3000,
'iterations': 1,
});
}, 5000);
return elem;
}
}
export const FIREBALL1 = new Tower('fireball1', 4, 4);
class Fireball extends Tile {
get_elem(_: string): HTMLElement {
const elem = document.createElement('div');
elem.style.gridColumnEnd = `span ${this.width}`;
elem.style.gridRowEnd = `span ${this.height}`;
elem.style.position = 'relative';
const base = document.createElement('div');
elem.appendChild(base);
base.style.width = '100%';
base.style.height = '100%';
base.style.position = 'absolute';
base.style.top = '0';
base.style.left = '0';
base.style.backgroundImage = `url("images/tower/${this.name}.svg")`;
base.style.backgroundSize = 'cover';
base.style.visibility = 'hidden';
setInterval(() => {
base.animate([
{
'offset': 0.0,
'easing': 'cubic-bezier(0.33333, 0.66667, 0.66667, 1)',
'top': '0',
},
{
'offset': 0.50,
'easing': 'cubic-bezier(0.33333, 0, 0.66667, 0.33333)',
'top': '-500%',
},
{
'offset': 1.0,
'top': '0',
},
], {
'duration': 1500,
'iterations': 1,
});
base.animate([
{
'offset': 0.0,
'easing': 'linear',
'visibility': 'visible',
'left': '0',
'transform': 'rotate(0)',
},
{
'offset': 1.0,
'visibility': 'hidden',
'left': '1000%',
'transform': 'rotate(720deg)',
},
], {
'duration': 1500,
'iterations': 1,
});
}, 5000);
return elem;
}
}
export const FIREBALL = new Fireball('fireball', 2, 2);

6
ts/tower.ts
View File

@@ -24,7 +24,7 @@ export function main() {
const grid = new Grid(real);
grid.set_size(70, 56);
grid.set_tileset('tropical');
grid.set_layers(['road', 'water', 'bridge']);
grid.set_layers(['road', 'water', 'bridge', 'tower']);
grid.add_tile('road', tiles.ROAD_TB, 20, 46);
grid.add_tile('road', tiles.ROAD_BL, 18, 40);
@@ -64,6 +64,7 @@ export function main() {
grid.add_tile('road', tiles.ROAD_LR, 46, 10);
grid.add_tile('road', tiles.ROAD_LR, 52, 10);
grid.add_tile('road', tiles.ROAD_LR, 58, 10);
grid.add_tile('road', tiles.EMPTY, 30, 20);
grid.add_tile('water', tiles.RIVER_TB, 47, 46);
grid.add_tile('water', tiles.RIVER_TB, 47, 40);
@@ -79,6 +80,9 @@ export function main() {
grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 26);
grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 18);
grid.add_tile('bridge', tiles.BRIDGE_LR, 46, 10);
grid.add_tile('tower', tiles.FIREBALL1, 30, 18);
grid.add_tile('tower', tiles.FIREBALL, 31, 17);
};
main();