mirror of
https://github.com/sigmasternchen/88x31breakout
synced 2025-03-15 07:59:00 +00:00
begin of Game object
This commit is contained in:
parent
015769560b
commit
446c0343e1
6 changed files with 44 additions and 7 deletions
|
@ -7,6 +7,6 @@
|
|||
<link rel="stylesheet" href="static/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="game"></div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
#game {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 1px;
|
||||
}
|
|
@ -6,10 +6,14 @@ import {Position} from "./Position";
|
|||
export class Banner {
|
||||
private readonly position: Position;
|
||||
private readonly banner: string;
|
||||
public readonly element: HTMLElement;
|
||||
|
||||
constructor(position: Position, banner: string) {
|
||||
this.position = position;
|
||||
this.banner = banner;
|
||||
|
||||
this.element = document.createElement("img");
|
||||
this.element.classList.add("banner");
|
||||
}
|
||||
|
||||
public load(): Promise<void> {
|
||||
|
@ -18,6 +22,7 @@ export class Banner {
|
|||
image.onload = () => resolve();
|
||||
image.onerror = reject;
|
||||
image.src = "static/banners/" + this.banner;
|
||||
this.element.setAttribute("src", image.src);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
22
src/game/Game.ts
Normal file
22
src/game/Game.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import {Banner, makeBanners} from "./Banner";
|
||||
import {Position} from "./Position";
|
||||
|
||||
export class Game {
|
||||
private readonly root: HTMLElement;
|
||||
private banners: Banner[];
|
||||
|
||||
constructor(root: HTMLElement) {
|
||||
this.root = root;
|
||||
this.banners = makeBanners(5, i => new Position(i * 88, i));
|
||||
}
|
||||
|
||||
public load(): Promise<void> {
|
||||
return Promise.all(this.banners.map(banner => banner.load())).then(() => {});
|
||||
}
|
||||
|
||||
public draw(): void {
|
||||
this.banners.forEach(banner => {
|
||||
this.root.appendChild(banner.element);
|
||||
});
|
||||
}
|
||||
}
|
0
src/game/Pattern.ts
Normal file
0
src/game/Pattern.ts
Normal file
12
src/index.ts
12
src/index.ts
|
@ -1,7 +1,7 @@
|
|||
import {makeBanners} from "./game/Banner";
|
||||
import {Position} from "./game/Position";
|
||||
import {Game} from "./game/Game";
|
||||
|
||||
const banners = makeBanners(5, i => new Position(i, i));
|
||||
console.log(banners);
|
||||
|
||||
console.log(Promise.all(banners.map(b => b.load())));
|
||||
window.addEventListener("load", async () => {
|
||||
const game = new Game(document.getElementById("game"));
|
||||
await game.load();
|
||||
game.draw();
|
||||
});
|
Loading…
Reference in a new issue