add paddle

This commit is contained in:
sigmasternchen 2024-10-29 21:56:28 +01:00
parent 4525296e60
commit efc8119c94
3 changed files with 31 additions and 1 deletions

View file

@ -2,11 +2,21 @@
#game { #game {
width: calc((88px + 1px) * 11 + 1px); width: calc((88px + 1px) * 11 + 1px);
height: 500px; height: 500px;
background-color: red; background-color: grey;
position: relative; position: relative;
} }
.banner { .banner {
margin: 1px; margin: 1px;
position: absolute; position: absolute;
}
.paddle {
position: absolute;
bottom: 20px;
height: 10px;
transform: translate(-50%, 0);
background-color: #333;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
} }

View file

@ -1,13 +1,16 @@
import {Banner, makeBanners} from "./Banner"; import {Banner, makeBanners} from "./Banner";
import {Position} from "./Position"; import {Position} from "./Position";
import {Paddle} from "./Paddle";
export class Game { export class Game {
private readonly root: HTMLElement; private readonly root: HTMLElement;
private banners: Banner[]; private banners: Banner[];
private paddle: Paddle;
constructor(root: HTMLElement) { constructor(root: HTMLElement) {
this.root = root; this.root = root;
this.banners = makeBanners(11 * 6, i => new Position((i % 11) * (88 + 1), (0 | (i / 11)) * (31 + 1))); this.banners = makeBanners(11 * 6, i => new Position((i % 11) * (88 + 1), (0 | (i / 11)) * (31 + 1)));
this.paddle = new Paddle();
} }
public load(): Promise<void> { public load(): Promise<void> {
@ -18,5 +21,6 @@ export class Game {
this.banners.forEach(banner => { this.banners.forEach(banner => {
this.root.appendChild(banner.element); this.root.appendChild(banner.element);
}); });
this.root.appendChild(this.paddle.element);
} }
} }

16
src/game/Paddle.ts Normal file
View file

@ -0,0 +1,16 @@
export class Paddle {
private position: number;
private size: number;
public readonly element: HTMLElement;
constructor() {
this.position = ((88 + 1) * 11 + 1) / 2;
this.size = 60;
this.element = document.createElement("div");
this.element.classList.add("paddle");
this.element.style.left = this.position + "px";
this.element.style.width = this.size + "px";
}
}