sigmasternchen/88x31breakout
1
0
Fork 0
mirror of https://github.com/sigmasternchen/88x31breakout synced 2025-03-15 07:59:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

begin of Game object

Browse source
This commit is contained in:
sigmasternchen 2024-10-24 21:55:04 +02:00
parent 015769560b
commit 446c0343e1
6 changed files with 44 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
html/index.html
View file

@ -7,6 +7,6 @@
<link rel="stylesheet" href="static/styles.css">
</head>
<body>
<div id="game"></div>
</body>
</html>

10
html/static/styles.css
View file

@ -0,0 +1,10 @@
#game {
width: 500px;
height: 500px;
background-color: red;
}
.banner {
margin: 1px;
}

5
src/game/Banner.ts
View file

@ -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
View 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
View file

12
src/index.ts
View file

@ -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();
});