mirror of
https://github.com/sigmasternchen/88x31breakout
synced 2025-03-15 07:59:00 +00:00
add paddle
This commit is contained in:
parent
4525296e60
commit
efc8119c94
3 changed files with 31 additions and 1 deletions
|
@ -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%;
|
||||||
}
|
}
|
|
@ -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
16
src/game/Paddle.ts
Normal 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";
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue