1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import { canvas, ctx } from "../consts";
import Drawable from "../Drawable";
import { IMGS } from "../Images";
export class TopBar extends Drawable {
sprite = IMGS.topbar;
width = canvas.width
height = 24
score = 0;
lives = 0;
rolls = 0;
highscore = 0;
shootedDown = 0;
bgd = 0;
constructor() {
super(0, 0)
}
setData(score: number, lives: number, rolls: number, bgd: number, shootedDown: number, highscore?: number | string) {
this.score = score
this.lives = lives
this.rolls = rolls
this.bgd = bgd
this.shootedDown = shootedDown
if (highscore) {
if (typeof highscore === "string") highscore = parseInt(highscore)
this.highscore = highscore
}
}
draw() {
if (this.sprite.src == null) this.sprite = IMGS.topbar;
ctx.drawImage(this.sprite, 0, 0);
[...this.score.toString().padStart(7, '0')].forEach((char, i) => {
ctx.drawImage(IMGS.font.small.white[char], 24 + i * 8, 8)
});
for (let i = 0; i < this.lives; i++) {
ctx.drawImage(IMGS.planeIcon, 112 + i * 8, 9)
}
for (let i = 0; i < this.rolls; i++) {
ctx.drawImage(IMGS.rollIcon, 177 + i * 8, 9)
}
[...this.highscore.toString().padStart(7, '0')].forEach((char, i) => {
ctx.drawImage(IMGS.font.small.white[char], 240 + i * 8, 8)
});
if (this.bgd >= 2580) {
// 9 41
[..."shooting down ".split(''), ...(this.shootedDown * 100 / 32).toFixed(0).toString().padStart(3, '0').split(''), '%'].forEach((char, i) => {
ctx.drawImage(IMGS.font.white[char], 9 + i * 17, 41, 15, 8)
});
[..."bonus".split('')].forEach((char, i) => {
ctx.drawImage(IMGS.font.white[char], 110 + i * 17, 94, 15, 8)
});
[...(this.lives * 500).toString().padStart(5, '0'), ..." pts".split('')].forEach((char, i) => {
ctx.drawImage(IMGS.font.white[char], 77 + i * 17, 108, 15, 8)
});
[...'rx1000=', ...(this.rolls * 1000).toString().padStart(4, '0'), ..." pts"].forEach((char, i) => {
ctx.drawImage(IMGS.font.yellow[char], 43 + i * 17, 147, 15, 8)
});
}
}
}
|
