From 2f8b8c87fb2062313afea7b625ccb20d1bea95b9 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Tue, 24 May 2022 18:25:43 +0200 Subject: Initial commit --- src/Animation.ts | 23 +++++ src/Drawable.ts | 93 ++++++++++++++++++++ src/Events.ts | 33 ++++++++ src/Highscore.ts | 119 ++++++++++++++++++++++++++ src/Images.ts | 61 ++++++++++++++ src/Player.ts | 72 ++++++++++++++++ src/consts.ts | 12 +++ src/drawables/Background.ts | 26 ++++++ src/drawables/Bullet.ts | 27 ++++++ src/drawables/Selector.ts | 15 ++++ src/drawables/TopBar.ts | 17 ++++ src/enemies/BigCircle.ts | 149 +++++++++++++++++++++++++++++++++ src/enemies/Enemy.ts | 12 +++ src/enemies/Straight.ts | 17 ++++ src/game.ts | 108 ++++++++++++++++++++++++ src/helpers.ts | 8 ++ src/imgs/bg.png | Bin 0 -> 21391 bytes src/imgs/bg.xcf | Bin 0 -> 994164 bytes src/imgs/bg1.png | Bin 0 -> 106259 bytes src/imgs/bg2.png | Bin 0 -> 21391 bytes src/imgs/big-circle-down-to-right1.png | Bin 0 -> 12752 bytes src/imgs/big-circle-down-to-right2.png | Bin 0 -> 15696 bytes src/imgs/big-circle-down-to-right3.png | Bin 0 -> 14129 bytes src/imgs/big-circle-down.png | Bin 0 -> 9655 bytes src/imgs/big-circle-left-to-down1.png | Bin 0 -> 13863 bytes src/imgs/big-circle-left-to-down2.png | Bin 0 -> 15653 bytes src/imgs/big-circle-left-to-down3.png | Bin 0 -> 12600 bytes src/imgs/big-circle-left.png | Bin 0 -> 11286 bytes src/imgs/big-circle-right-to-up1.png | Bin 0 -> 16214 bytes src/imgs/big-circle-right-to-up2.png | Bin 0 -> 16278 bytes src/imgs/big-circle-right-to-up3.png | Bin 0 -> 12757 bytes src/imgs/big-circle-right.png | Bin 0 -> 11596 bytes src/imgs/big-circle-up-to-left1.png | Bin 0 -> 12583 bytes src/imgs/big-circle-up-to-left2.png | Bin 0 -> 16007 bytes src/imgs/big-circle-up-to-left3.png | Bin 0 -> 10767 bytes src/imgs/big-circle-up.png | Bin 0 -> 10590 bytes src/imgs/enemy-bullet.png | Bin 0 -> 4667 bytes src/imgs/font/ .png | Bin 0 -> 4859 bytes src/imgs/font/white/!.png | Bin 0 -> 592 bytes src/imgs/font/white/&.png | Bin 0 -> 613 bytes src/imgs/font/white/-.png | Bin 0 -> 582 bytes src/imgs/font/white/..png | Bin 0 -> 592 bytes src/imgs/font/white/?.png | Bin 0 -> 614 bytes src/imgs/font/white/_.png | Bin 0 -> 879 bytes src/imgs/font/white/a.png | Bin 0 -> 617 bytes src/imgs/font/white/b.png | Bin 0 -> 604 bytes src/imgs/font/white/c.png | Bin 0 -> 615 bytes src/imgs/font/white/d.png | Bin 0 -> 614 bytes src/imgs/font/white/e.png | Bin 0 -> 618 bytes src/imgs/font/white/ed.png | Bin 0 -> 627 bytes src/imgs/font/white/f.png | Bin 0 -> 610 bytes src/imgs/font/white/g.png | Bin 0 -> 623 bytes src/imgs/font/white/h.png | Bin 0 -> 599 bytes src/imgs/font/white/heart.png | Bin 0 -> 616 bytes src/imgs/font/white/i.png | Bin 0 -> 604 bytes src/imgs/font/white/j.png | Bin 0 -> 616 bytes src/imgs/font/white/k.png | Bin 0 -> 622 bytes src/imgs/font/white/l.png | Bin 0 -> 599 bytes src/imgs/font/white/m.png | Bin 0 -> 615 bytes src/imgs/font/white/man.png | Bin 0 -> 614 bytes src/imgs/font/white/n.png | Bin 0 -> 620 bytes src/imgs/font/white/o.png | Bin 0 -> 618 bytes src/imgs/font/white/p.png | Bin 0 -> 609 bytes src/imgs/font/white/q.png | Bin 0 -> 611 bytes src/imgs/font/white/r.png | Bin 0 -> 614 bytes src/imgs/font/white/rv.png | Bin 0 -> 628 bytes src/imgs/font/white/s.png | Bin 0 -> 621 bytes src/imgs/font/white/t.png | Bin 0 -> 601 bytes src/imgs/font/white/u.png | Bin 0 -> 600 bytes src/imgs/font/white/v.png | Bin 0 -> 606 bytes src/imgs/font/white/w.png | Bin 0 -> 606 bytes src/imgs/font/white/woman.png | Bin 0 -> 611 bytes src/imgs/font/white/x.png | Bin 0 -> 617 bytes src/imgs/font/white/y.png | Bin 0 -> 606 bytes src/imgs/font/white/z.png | Bin 0 -> 614 bytes src/imgs/font/yellow/!.png | Bin 0 -> 1339 bytes src/imgs/font/yellow/&.png | Bin 0 -> 1356 bytes src/imgs/font/yellow/-.png | Bin 0 -> 1339 bytes src/imgs/font/yellow/..png | Bin 0 -> 1337 bytes src/imgs/font/yellow/?.png | Bin 0 -> 1352 bytes src/imgs/font/yellow/_.png | Bin 0 -> 1337 bytes src/imgs/font/yellow/a.png | Bin 0 -> 1353 bytes src/imgs/font/yellow/b.png | Bin 0 -> 1344 bytes src/imgs/font/yellow/c.png | Bin 0 -> 1351 bytes src/imgs/font/yellow/d.png | Bin 0 -> 1350 bytes src/imgs/font/yellow/e.png | Bin 0 -> 1353 bytes src/imgs/font/yellow/ed.png | Bin 0 -> 1357 bytes src/imgs/font/yellow/f.png | Bin 0 -> 1349 bytes src/imgs/font/yellow/g.png | Bin 0 -> 1355 bytes src/imgs/font/yellow/h.png | Bin 0 -> 1343 bytes src/imgs/font/yellow/heart.png | Bin 0 -> 1355 bytes src/imgs/font/yellow/i.png | Bin 0 -> 1343 bytes src/imgs/font/yellow/j.png | Bin 0 -> 1351 bytes src/imgs/font/yellow/k.png | Bin 0 -> 1353 bytes src/imgs/font/yellow/l.png | Bin 0 -> 1342 bytes src/imgs/font/yellow/m.png | Bin 0 -> 1345 bytes src/imgs/font/yellow/man.png | Bin 0 -> 1354 bytes src/imgs/font/yellow/n.png | Bin 0 -> 1351 bytes src/imgs/font/yellow/o.png | Bin 0 -> 1349 bytes src/imgs/font/yellow/p.png | Bin 0 -> 1345 bytes src/imgs/font/yellow/q.png | Bin 0 -> 1348 bytes src/imgs/font/yellow/r.png | Bin 0 -> 1351 bytes src/imgs/font/yellow/rv.png | Bin 0 -> 1356 bytes src/imgs/font/yellow/s.png | Bin 0 -> 1355 bytes src/imgs/font/yellow/t.png | Bin 0 -> 1341 bytes src/imgs/font/yellow/u.png | Bin 0 -> 1341 bytes src/imgs/font/yellow/v.png | Bin 0 -> 1346 bytes src/imgs/font/yellow/w.png | Bin 0 -> 1347 bytes src/imgs/font/yellow/woman.png | Bin 0 -> 1353 bytes src/imgs/font/yellow/x.png | Bin 0 -> 1356 bytes src/imgs/font/yellow/y.png | Bin 0 -> 1345 bytes src/imgs/font/yellow/z.png | Bin 0 -> 1352 bytes src/imgs/friendly-bullet.png | Bin 0 -> 4653 bytes src/imgs/green-down-to-left.png | Bin 0 -> 11352 bytes src/imgs/green-down.png | Bin 0 -> 11218 bytes src/imgs/green-left-to-up.png | Bin 0 -> 11460 bytes src/imgs/green-left.png | Bin 0 -> 9309 bytes src/imgs/green-right-to-down.png | Bin 0 -> 11326 bytes src/imgs/green-right.png | Bin 0 -> 7850 bytes src/imgs/green-up-to-right.png | Bin 0 -> 11294 bytes src/imgs/green-up.png | Bin 0 -> 10905 bytes src/imgs/player-left.png | Bin 0 -> 10193 bytes src/imgs/player-right.png | Bin 0 -> 10220 bytes src/imgs/player-up.png | Bin 0 -> 724 bytes src/imgs/red-down-to-left.png | Bin 0 -> 11123 bytes src/imgs/red-down.png | Bin 0 -> 11098 bytes src/imgs/red-left-to-up.png | Bin 0 -> 11118 bytes src/imgs/red-left.png | Bin 0 -> 7804 bytes src/imgs/red-right-to-down.png | Bin 0 -> 11086 bytes src/imgs/red-right.png | Bin 0 -> 7802 bytes src/imgs/red-up-to-right.png | Bin 0 -> 11287 bytes src/imgs/red-up.png | Bin 0 -> 11080 bytes src/imgs/selector.png | Bin 0 -> 6917 bytes src/imgs/simple-down.png | Bin 0 -> 10283 bytes src/imgs/simple-rot1.png | Bin 0 -> 9961 bytes src/imgs/simple-rot2.png | Bin 0 -> 7759 bytes src/imgs/simple-rot3.png | Bin 0 -> 8180 bytes src/imgs/simple-rot4.png | Bin 0 -> 9961 bytes src/imgs/simple-up.png | Bin 0 -> 9049 bytes src/imgs/topbar.png | Bin 0 -> 1273 bytes src/imgs/white-down.png | Bin 0 -> 10280 bytes src/imgs/white-strange-left.png | Bin 0 -> 6670 bytes src/imgs/white-strange-right.png | Bin 0 -> 6694 bytes src/imgs/white-turn.png | Bin 0 -> 9772 bytes src/main.ts | 10 +++ src/style.css | 13 +++ 146 files changed, 815 insertions(+) create mode 100644 src/Animation.ts create mode 100644 src/Drawable.ts create mode 100644 src/Events.ts create mode 100644 src/Highscore.ts create mode 100644 src/Images.ts create mode 100644 src/Player.ts create mode 100644 src/consts.ts create mode 100644 src/drawables/Background.ts create mode 100644 src/drawables/Bullet.ts create mode 100644 src/drawables/Selector.ts create mode 100644 src/drawables/TopBar.ts create mode 100644 src/enemies/BigCircle.ts create mode 100644 src/enemies/Enemy.ts create mode 100644 src/enemies/Straight.ts create mode 100644 src/game.ts create mode 100644 src/helpers.ts create mode 100644 src/imgs/bg.png create mode 100644 src/imgs/bg.xcf create mode 100644 src/imgs/bg1.png create mode 100644 src/imgs/bg2.png create mode 100644 src/imgs/big-circle-down-to-right1.png create mode 100644 src/imgs/big-circle-down-to-right2.png create mode 100644 src/imgs/big-circle-down-to-right3.png create mode 100644 src/imgs/big-circle-down.png create mode 100644 src/imgs/big-circle-left-to-down1.png create mode 100644 src/imgs/big-circle-left-to-down2.png create mode 100644 src/imgs/big-circle-left-to-down3.png create mode 100644 src/imgs/big-circle-left.png create mode 100644 src/imgs/big-circle-right-to-up1.png create mode 100644 src/imgs/big-circle-right-to-up2.png create mode 100644 src/imgs/big-circle-right-to-up3.png create mode 100644 src/imgs/big-circle-right.png create mode 100644 src/imgs/big-circle-up-to-left1.png create mode 100644 src/imgs/big-circle-up-to-left2.png create mode 100644 src/imgs/big-circle-up-to-left3.png create mode 100644 src/imgs/big-circle-up.png create mode 100644 src/imgs/enemy-bullet.png create mode 100644 src/imgs/font/ .png create mode 100644 src/imgs/font/white/!.png create mode 100644 src/imgs/font/white/&.png create mode 100644 src/imgs/font/white/-.png create mode 100644 src/imgs/font/white/..png create mode 100644 src/imgs/font/white/?.png create mode 100644 src/imgs/font/white/_.png create mode 100644 src/imgs/font/white/a.png create mode 100644 src/imgs/font/white/b.png create mode 100644 src/imgs/font/white/c.png create mode 100644 src/imgs/font/white/d.png create mode 100644 src/imgs/font/white/e.png create mode 100644 src/imgs/font/white/ed.png create mode 100644 src/imgs/font/white/f.png create mode 100644 src/imgs/font/white/g.png create mode 100644 src/imgs/font/white/h.png create mode 100644 src/imgs/font/white/heart.png create mode 100644 src/imgs/font/white/i.png create mode 100644 src/imgs/font/white/j.png create mode 100644 src/imgs/font/white/k.png create mode 100644 src/imgs/font/white/l.png create mode 100644 src/imgs/font/white/m.png create mode 100644 src/imgs/font/white/man.png create mode 100644 src/imgs/font/white/n.png create mode 100644 src/imgs/font/white/o.png create mode 100644 src/imgs/font/white/p.png create mode 100644 src/imgs/font/white/q.png create mode 100644 src/imgs/font/white/r.png create mode 100644 src/imgs/font/white/rv.png create mode 100644 src/imgs/font/white/s.png create mode 100644 src/imgs/font/white/t.png create mode 100644 src/imgs/font/white/u.png create mode 100644 src/imgs/font/white/v.png create mode 100644 src/imgs/font/white/w.png create mode 100644 src/imgs/font/white/woman.png create mode 100644 src/imgs/font/white/x.png create mode 100644 src/imgs/font/white/y.png create mode 100644 src/imgs/font/white/z.png create mode 100644 src/imgs/font/yellow/!.png create mode 100644 src/imgs/font/yellow/&.png create mode 100644 src/imgs/font/yellow/-.png create mode 100644 src/imgs/font/yellow/..png create mode 100644 src/imgs/font/yellow/?.png create mode 100644 src/imgs/font/yellow/_.png create mode 100644 src/imgs/font/yellow/a.png create mode 100644 src/imgs/font/yellow/b.png create mode 100644 src/imgs/font/yellow/c.png create mode 100644 src/imgs/font/yellow/d.png create mode 100644 src/imgs/font/yellow/e.png create mode 100644 src/imgs/font/yellow/ed.png create mode 100644 src/imgs/font/yellow/f.png create mode 100644 src/imgs/font/yellow/g.png create mode 100644 src/imgs/font/yellow/h.png create mode 100644 src/imgs/font/yellow/heart.png create mode 100644 src/imgs/font/yellow/i.png create mode 100644 src/imgs/font/yellow/j.png create mode 100644 src/imgs/font/yellow/k.png create mode 100644 src/imgs/font/yellow/l.png create mode 100644 src/imgs/font/yellow/m.png create mode 100644 src/imgs/font/yellow/man.png create mode 100644 src/imgs/font/yellow/n.png create mode 100644 src/imgs/font/yellow/o.png create mode 100644 src/imgs/font/yellow/p.png create mode 100644 src/imgs/font/yellow/q.png create mode 100644 src/imgs/font/yellow/r.png create mode 100644 src/imgs/font/yellow/rv.png create mode 100644 src/imgs/font/yellow/s.png create mode 100644 src/imgs/font/yellow/t.png create mode 100644 src/imgs/font/yellow/u.png create mode 100644 src/imgs/font/yellow/v.png create mode 100644 src/imgs/font/yellow/w.png create mode 100644 src/imgs/font/yellow/woman.png create mode 100644 src/imgs/font/yellow/x.png create mode 100644 src/imgs/font/yellow/y.png create mode 100644 src/imgs/font/yellow/z.png create mode 100644 src/imgs/friendly-bullet.png create mode 100644 src/imgs/green-down-to-left.png create mode 100644 src/imgs/green-down.png create mode 100644 src/imgs/green-left-to-up.png create mode 100644 src/imgs/green-left.png create mode 100644 src/imgs/green-right-to-down.png create mode 100644 src/imgs/green-right.png create mode 100644 src/imgs/green-up-to-right.png create mode 100644 src/imgs/green-up.png create mode 100644 src/imgs/player-left.png create mode 100644 src/imgs/player-right.png create mode 100644 src/imgs/player-up.png create mode 100644 src/imgs/red-down-to-left.png create mode 100644 src/imgs/red-down.png create mode 100644 src/imgs/red-left-to-up.png create mode 100644 src/imgs/red-left.png create mode 100644 src/imgs/red-right-to-down.png create mode 100644 src/imgs/red-right.png create mode 100644 src/imgs/red-up-to-right.png create mode 100644 src/imgs/red-up.png create mode 100644 src/imgs/selector.png create mode 100644 src/imgs/simple-down.png create mode 100644 src/imgs/simple-rot1.png create mode 100644 src/imgs/simple-rot2.png create mode 100644 src/imgs/simple-rot3.png create mode 100644 src/imgs/simple-rot4.png create mode 100644 src/imgs/simple-up.png create mode 100644 src/imgs/topbar.png create mode 100644 src/imgs/white-down.png create mode 100644 src/imgs/white-strange-left.png create mode 100644 src/imgs/white-strange-right.png create mode 100644 src/imgs/white-turn.png create mode 100644 src/main.ts create mode 100644 src/style.css (limited to 'src') diff --git a/src/Animation.ts b/src/Animation.ts new file mode 100644 index 0000000..13adb6c --- /dev/null +++ b/src/Animation.ts @@ -0,0 +1,23 @@ +import { ctx } from "./consts"; +import Drawable from "./Drawable"; + +export default class Anime extends Drawable { + i = 0; + j = 0; + + constructor(drawable: Drawable, public frames: string[]) { + super(drawable._x, drawable._y) + this.width = drawable.width + this.height = drawable.height + } + + draw(): boolean { + // console.log("drawing", this) + ctx.fillStyle = this.frames[this.i]; + ctx.fillRect(this.x, this.y, this.width, this.height); + this.j++; + if (this.j === 50) { this.i++; this.j = 0; } + return this.i !== this.frames.length; + } +} + diff --git a/src/Drawable.ts b/src/Drawable.ts new file mode 100644 index 0000000..eccb5c3 --- /dev/null +++ b/src/Drawable.ts @@ -0,0 +1,93 @@ +import { canvas, ctx } from "./consts"; +import { IMGS } from "./Images"; + +export default abstract class Drawable { + public stopAtBorder = false + public width!: number; + public height!: number; + public sprite!: string | HTMLImageElement; + public squares!: Array; + public sprites!: Array; + + constructor(public _x: number, public _y: number,) { } + + collides(w: Drawable): boolean { + for (const square of this.squares) { + for (const s of w.squares) { + if (square.x < s.x2 && square.x2 > s.x && + square.y < s.y2 && square.y2 > s.y) return true + } + } + return false; + } + + draw() { + if (typeof this.sprite === "string") { + ctx.fillStyle = this.sprite; + ctx.fillRect(this.x, this.y, this.width, this.height); + // } else if (this.sprite instanceof HTMLImageElement) { + } else { + ctx.drawImage(this.sprite, this.x, this.y) + } + } + + get x() { return this._x } + set x(val) { + if (!this.stopAtBorder) { + this._x = val; + return + } + // Used only for Player + if (val <= 35) { this._x = 35; this.sprite = IMGS.playerUp } + else if (val + this.width >= canvas.width - 35) { this._x = canvas.width - 35 - this.width; this.sprite = IMGS.playerUp } + else this._x = val + } + get y() { return this._y } + set y(val) { + if (!this.stopAtBorder) { + this._y = val; + return + } + // Used only for Player + if (val <= 15 + 24) this._y = 15 + 24; + else if (val + this.height >= canvas.height - 15) this._y = canvas.height - 15 - this.height; + else this._y = val + } + + get x2() { return this.x + this.width } + get y2() { return this.y + this.height } + + /// Should be abstract but this is extended by Animation which doesnt move + // abstract move(): boolean; + move() { return true; }; + +} + +export class Rectangle extends Drawable { + constructor(public begetter: Drawable, x?: number, y?: number, width?: number, height?: number) { + x = x ?? begetter.x + y = y ?? begetter.y + super(x, y); + this.change(x, y, width ?? begetter.width, height ?? begetter.height) + } + change(x: number, y: number, width: number, height: number) { + this._x = x + this._y = y + this.width = width + this.height = height + + } + get x(): number { return this.begetter.x + this._x; } + get y(): number { return this.begetter.y + this._y; } + set x(val) { this._x = val } + set y(val) { this._y = val } + get x2() { return this.x + this.width } + get y2() { return this.y + this.width } + sprite = "rgba(128,0,128, 0.5)" +} +// export abstract class Square { +// constructor(public x: number, public y: number, public width: number, public height: number) { } + +// get x2() { return this.x + this.width } +// get y2() { return this.y + this.height } +// } diff --git a/src/Events.ts b/src/Events.ts new file mode 100644 index 0000000..7975fe3 --- /dev/null +++ b/src/Events.ts @@ -0,0 +1,33 @@ +// export interface Keys { +// right: boolean; +// left: boolean; +// up: boolean; +// down: boolean; +// fire: boolean; +// } +export const keys = { + right: false, + left: false, + up: false, + down: false, + fire: false, + repeat: false, + fps: 50, +} + +// window.onkeydown = window.onkeydown ?? ((e: KeyboardEvent) => e.repeat ? keys.fire = false : setKey(e.key, true)) +window.onkeydown = window.onkeydown ?? ((e: KeyboardEvent) => setKey(e.key, true, e.repeat)) +window.onkeyup = window.onkeyup ?? ((e: KeyboardEvent) => setKey(e.key, false, e.repeat)) + +function setKey(key: string, val: boolean, repeat: boolean) { + if (["w", "k"].includes(key)) keys.up = val; + else if (["a", "h"].includes(key)) keys.left = val; + else if (["s", "j"].includes(key)) keys.down = val; + else if (["d", "l"].includes(key)) keys.right = val; + else if (["m", ";", "/"].includes(key)) { keys.fire = val; keys.repeat = repeat } + else if (["r"].includes(key)) location.reload(); + else if (["f"].includes(key)) keys.fps = 50; + else if (["g"].includes(key)) keys.fps = 1; + // console.log(key, val ? "keydown" : "keyup") +} + diff --git a/src/Highscore.ts b/src/Highscore.ts new file mode 100644 index 0000000..f823393 --- /dev/null +++ b/src/Highscore.ts @@ -0,0 +1,119 @@ +// import { canvas } from "./consts"; +import { canvas, ctx, alphabet } from "./consts"; +import Drawable from "./Drawable"; +import { Background } from "./drawables/Background"; +import { Selector } from "./drawables/Selector"; +import { keys } from "./Events"; +import { IMGS } from "./Images"; + +export default class Highscore extends Drawable { + width = canvas.width + height = canvas.height + show = false; + imgPixels: ImageData | null = null; + selector = new Selector(12, 37); + _bx = 12 + _by = 27 + moving = false; + dx = 32; + dy = 26; + name = [' ', ' ', ' ']; + lastTimestamp = 0; + constructor() { + super(0, 0) + } + drawHg(bg: Background) { + if (this.imgPixels == null) { + const imgPixels = bg.getImageData(); + for (let y = 0; y < imgPixels.height; y++) { + for (let x = 0; x < imgPixels.width; x++) { + const i = (y * 4) * imgPixels.width + x * 4; + const avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; + imgPixels.data[i] = avg; + imgPixels.data[i + 1] = avg; + imgPixels.data[i + 2] = avg; + } + } + this.imgPixels = imgPixels; + } + ctx.putImageData(this.imgPixels, 0, 24, 0, 0, this.imgPixels.width, this.imgPixels.height); + this.selector.draw() + let x = 17, y = 40; + for (const char of alphabet) { + ctx.drawImage(IMGS.font.white[char], x, y) + x += this.dx; + if (x > 275) { + x = 17; + y += this.dy; + } + } + while (x < 275) { ctx.drawImage(IMGS.font.yellow['-'], x, y); x += this.dx / 2; } + x = 17; + y += this.dy; + const botTxt = ['a', 't', 'h', ' ', 'a', 'b', 'c', 'd', 'e', 'f', 'g', ' ', ...this.name, ' ', 'z', 'y']; + for (let char of botTxt) { + ctx.drawImage(IMGS.font.yellow[char], x, y); + x += this.dx / 2; + } + } + move(): boolean { + if (!this.moving) { + if (+keys.right ^ +keys.left) { + keys.right ? this.bx = this.selector.x + this.dx : this.bx = this.selector.x - this.dx + } else { + this.bx = this.selector.x + } + + if (+keys.up ^ +keys.down) { + keys.down ? this.by = this.selector.y + this.dy : this.by = this.selector.y - this.dy + } else { + this.by = this.selector.y + } + + if (keys.fire && Date.now() - this.lastTimestamp > 300) { + let [x, y] = [this.selector.x, this.selector.y] + x = Math.floor(x / this.dx) + y = Math.floor(y / this.dy) - 1 + const char = alphabet[x + y * 9]; + if (char === "rv") { + for (let i = this.name.length - 1; i >= 0; i--) { + if (this.name[i] !== " ") this.name[i] = ' ' + } + } + else if (char === "ed") { + console.log("%csaving", "color: darkblue; font-size: 1.3em; background-color: darkgreen;"); + } + else if (this.name.filter(a => a !== ' ').length === 3) this.name[2] = char; + else { + for (let i = 0; i < this.name.length; i++) { + if (this.name[i] === " ") { this.name[i] = char; break; } + } + } + + this.lastTimestamp = Date.now() + } + } + + if (this.selector.x !== this.bx || this.selector.y !== this.by) { + this.moving = true; + if (this.selector.x < this.bx) this.selector.x += 2; + if (this.selector.x > this.bx) this.selector.x -= 2; + if (this.selector.y < this.by) this.selector.y += 2; + if (this.selector.y > this.by) this.selector.y -= 2; + return true; + } + this.moving = false + return true; + } + + get bx() { return this._bx } + get by() { return this._by } + set bx(val) { + if (val > 10 && val < 17 + this.dx * 8) + this._bx = val + } + set by(val) { + if (val > 30 && val < 40 + this.dy * 3) + this._by = val + } +} diff --git a/src/Images.ts b/src/Images.ts new file mode 100644 index 0000000..f0e1ba0 --- /dev/null +++ b/src/Images.ts @@ -0,0 +1,61 @@ +// const URLS = [ +// "/src/imgs/bg2.png", +// "/src/imgs/topbar.png", +// ]; +import { alphabet } from "./consts"; +import { toKebabCase } from "./helpers"; + +export const IMGS = { + bg: {} as HTMLImageElement, + topbar: {} as HTMLImageElement, + playerUp: {} as HTMLImageElement, + playerLeft: {} as HTMLImageElement, + playerRight: {} as HTMLImageElement, + bigCircleDown: {} as HTMLImageElement, + bigCircleDownToRight1: {} as HTMLImageElement, + bigCircleDownToRight2: {} as HTMLImageElement, + bigCircleDownToRight3: {} as HTMLImageElement, + bigCircleRight: {} as HTMLImageElement, + bigCircleRightToUp1: {} as HTMLImageElement, + bigCircleRightToUp2: {} as HTMLImageElement, + bigCircleRightToUp3: {} as HTMLImageElement, + bigCircleUp: {} as HTMLImageElement, + bigCircleUpToLeft1: {} as HTMLImageElement, + bigCircleUpToLeft2: {} as HTMLImageElement, + bigCircleUpToLeft3: {} as HTMLImageElement, + bigCircleLeft: {} as HTMLImageElement, + bigCircleLeftToDown1: {} as HTMLImageElement, + bigCircleLeftToDown2: {} as HTMLImageElement, + bigCircleLeftToDown3: {} as HTMLImageElement, + font: { + white: {} as any, + yellow: {} as any, + ' ': {} as HTMLImageElement, + }, + selector: {} as HTMLImageElement, + empty: {} as HTMLImageElement, +}; +// window.IMGS = IMGS; +export default async function loadAllImages() { + for (const key in IMGS) { + if (["empty", "font"].includes(key)) continue; + IMGS[key as keyof typeof IMGS] = await asyncImageLoader("/src/imgs/" + toKebabCase(key) + ".png") as any + } + for (const color of ['yellow', 'white']) { + for (const char of [...alphabet]) { + (((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader("/src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any + } + } + IMGS.font[' '] = await asyncImageLoader("/src/imgs/font/ .png") + IMGS.font.yellow[' '] = await asyncImageLoader("/src/imgs/font/ .png") + IMGS.font.white[' '] = await asyncImageLoader("/src/imgs/font/ .png") +} +async function asyncImageLoader(url: string): Promise { + return new Promise((resolve, reject) => { + const image = new Image() + image.src = url + image.onload = () => resolve(image) + image.onerror = () => { console.log("img did not load", url); reject() } + }) +} + diff --git a/src/Player.ts b/src/Player.ts new file mode 100644 index 0000000..8890466 --- /dev/null +++ b/src/Player.ts @@ -0,0 +1,72 @@ +import Anime from "./Animation"; +import Bullet from "./drawables/Bullet"; +import { BULLET_VEL, ctx, FIRE_DELAY, PLAYER_SIZE, PLAYER_VEL } from "./consts"; +import Drawable, { Rectangle } from "./Drawable"; +import { keys } from "./Events"; +import { IMGS } from "./Images"; + +export default class Player extends Drawable { + static startx = 250; + static starty = 100; + + width = PLAYER_SIZE; + height = PLAYER_SIZE; + sprite = IMGS.empty; + xvel = 0; + yvel = 0; + lastShoot = 0; + stopAtBorder = true; + squares: Rectangle[] = [new Rectangle(this)] + + lifes = 3; + + constructor() { + super(Player.startx, Player.starty) + } + + shoot(bullet: Bullet[]) { + if (!keys.fire || keys.repeat) return; + if (Date.now() - this.lastShoot < FIRE_DELAY) return; + this.lastShoot = Date.now() + bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y - Bullet.height, 0, -BULLET_VEL, true)) + } + + move() { + if (+keys.right ^ +keys.left) { + keys.right ? this.xvel = PLAYER_VEL : this.xvel = -PLAYER_VEL; + } else { + this.xvel = 0 + } + + if (+keys.up ^ +keys.down) { + keys.down ? this.yvel = PLAYER_VEL : this.yvel = -PLAYER_VEL; + } else { + this.yvel = 0 + } + + if (keys.left && keys.right) this.sprite = IMGS.playerUp + else if (keys.right) this.sprite = IMGS.playerRight + else if (keys.left) this.sprite = IMGS.playerLeft + else this.sprite = IMGS.playerUp + + this.x += this.xvel; + this.y += this.yvel; + + // this.squares[0].x = this.x + // this.squares[0].y = this.y + // this.squares[0].width = this.sprite.width + // this.squares[0].height = this.sprite.height + + return true; + } + draw() { + this.sprite = this.sprite ?? IMGS.playerUp; + try { + ctx.drawImage(this.sprite, this.x, this.y) + } catch (error) { + console.log(error); + } + } + + get deathAnimation() { return new Anime(this, ["red", "green", "blue"]) } +} diff --git a/src/consts.ts b/src/consts.ts new file mode 100644 index 0000000..5893b85 --- /dev/null +++ b/src/consts.ts @@ -0,0 +1,12 @@ +export const canvas = document.querySelector('canvas')! +export const ctx = canvas.getContext("2d")! +ctx.imageSmoothingEnabled = false; + +export const PLAYER_SIZE = 20; // canvas-dot +export const PLAYER_VEL = 3.5; // canvas-dot / frame +export const BULLET_VEL = 4.5; // canvas-dot / frame +export const FIRE_DELAY = 300; // ms +export const TOPBAR_HEIGHT = 24; // ms + +export const FPS = 1; +export const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '.', '-', '&', '?', '!', 'man', 'woman', 'heart', 'rv', 'ed'] diff --git a/src/drawables/Background.ts b/src/drawables/Background.ts new file mode 100644 index 0000000..1eef6c4 --- /dev/null +++ b/src/drawables/Background.ts @@ -0,0 +1,26 @@ +import { canvas, ctx } from "../consts"; +import Drawable from "../Drawable"; +import { IMGS } from "../Images"; + +export class Background extends Drawable { + sprite = IMGS.bg; + width = canvas.width + height = canvas.height - 24 + constructor() { + super(0, 0) + } + // delta = -1751 + 24 + 2693; + delta = 0 + move(): boolean { + this.delta += 1; + return true; + } + draw() { + if (this.sprite.src == null) this.sprite = IMGS.bg; + ctx.drawImage(this.sprite, 0, 2693 - this.delta + 24, 320, 200 - 24, 0, 24, this.width, this.height) + } + getImageData() { + ctx.drawImage(this.sprite, 0, 2693 - this.delta + 24, 320, 200 - 24, 0, 24, this.width, this.height) + return ctx.getImageData(0, 24, this.width, this.height); + } +} diff --git a/src/drawables/Bullet.ts b/src/drawables/Bullet.ts new file mode 100644 index 0000000..68f55e8 --- /dev/null +++ b/src/drawables/Bullet.ts @@ -0,0 +1,27 @@ +import { canvas } from "../consts"; +import Drawable from "../Drawable"; + +export default class Bullet extends Drawable { + static width = 2; + static height = 5; + static color = "black"; + color = "black"; + sprite = "black"; + + squares = [this] + + constructor(x: number, y: number, public xvel: number, public yvel: number, public players: boolean) { + super(x, y); + this.width = Bullet.width; + this.height = Bullet.height; + } + + move(): boolean { + this.x += this.xvel; + this.y += this.yvel; + + return ( + this.x + this.width < 0 || this.y + this.height < 0 || this.x > canvas.width || this.y > canvas.height + ); + } +} diff --git a/src/drawables/Selector.ts b/src/drawables/Selector.ts new file mode 100644 index 0000000..b72d839 --- /dev/null +++ b/src/drawables/Selector.ts @@ -0,0 +1,15 @@ +import { canvas, ctx } from "../consts"; +import Drawable from "../Drawable"; +import { IMGS } from "../Images"; + +export class Selector extends Drawable { + sprite = IMGS.selector + width = canvas.width + height = 24 + draw() { + if (this.sprite.src == null) this.sprite = IMGS.selector; + ctx.drawImage(this.sprite, this.x, this.y) + } +} + + diff --git a/src/drawables/TopBar.ts b/src/drawables/TopBar.ts new file mode 100644 index 0000000..f021f77 --- /dev/null +++ b/src/drawables/TopBar.ts @@ -0,0 +1,17 @@ +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 + constructor() { + super(0, 0) + } + draw() { + if (this.sprite.src == null) this.sprite = IMGS.topbar; + ctx.drawImage(this.sprite, 0, 0) + } +} + diff --git a/src/enemies/BigCircle.ts b/src/enemies/BigCircle.ts new file mode 100644 index 0000000..3a5506c --- /dev/null +++ b/src/enemies/BigCircle.ts @@ -0,0 +1,149 @@ +import { canvas } from "../consts"; +// import { keys } from "../Events"; +import { Rectangle } from "../Drawable"; +import { IMGS } from "../Images"; +import Enemy from "./Enemy"; + +export default class BigCircle extends Enemy { + width = 48 + height = 40 + sprite: HTMLImageElement | string = IMGS.bigCircleDown; + sprites = ["pink", "red", "blue", "green", "black", "white"] + vel = 1.8 + + phase = 0; + + squares: Rectangle[] = [ + // new Rectangle(this.x, this.y, this.width, this.height), + new Rectangle(this, 14, 0, 20, 8), + new Rectangle(this, 20, 7, 8, 12), + new Rectangle(this, 0, 20, 48, 20), + ] + + counter = 0; + move() { + if (this.sprite instanceof HTMLImageElement && this.sprite.src == null) this.sprite = IMGS.bigCircleDown + if (this.sprite instanceof HTMLImageElement) this.width = this.sprite.width + if (this.sprite instanceof HTMLImageElement) this.height = this.sprite.height + + let yShift = 0, xShift = 0 + + switch (this.phase) { + case 0: + yShift = this.vel; + // if (this.y2 > 124) { this.phase++; keys.fps = 1 } + if (this.y2 > 124) this.phase++ + break; + case 1: + this.sprite = IMGS.bigCircleDownToRight1; + // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)] + this.phase++; + break; + case 2: + yShift = this.vel; + xShift = this.vel; + this.phase++; + break; + case 3: + this.sprite = IMGS.bigCircleDownToRight2; + // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)] + this.counter = 0; + this.phase++; + break; + case 4: + xShift = this.vel; + yShift = this.vel; + if (this.counter++ === 1) this.phase++; + break; + case 5: + this.sprite = IMGS.bigCircleDownToRight3; + // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)] + this.phase++; + break; + case 6: + xShift = this.vel; + yShift = this.vel; + this.phase++; + break; + case 7: + this.sprite = IMGS.bigCircleRight; + // width = 48 + // height = 40 + this.squares[0].change(0, 14, 8, 16); + this.squares[1].change(0, 18, 44, 8); + this.squares[2].change(22, 0, 14, 43); + // new Rectangle(this.x + 20, this.y + 7, 8, 12), + // new Rectangle(this.x, this.y + 20, 48, 20), + this.phase++; + break; + case 8: + xShift = this.vel; + break; + // case 4: + // // this.sprite = this.sprites[3]; + // xShift = this.vel; + // yShift = this.vel; + // if (this.y2 > 160) this.phase++; + // break; + // case 5: + // // this.sprite = this.sprites[0]; + // xShift = this.vel; + // if (this.x2 > 150) this.phase++; + // break; + // case 6: + // // this.sprite = this.sprites[1]; + // yShift = -this.vel; + // xShift = this.vel; + // if (this.x2 > 220) this.phase++; + // break; + // case 7: + // // this.sprite = this.sprites[2]; + // yShift = -this.vel; + // xShift = this.vel; + // if (this.x2 > 240) this.phase++; + // break; + // case 8: + // // this.sprite = this.sprites[3]; + // yShift = -this.vel; + // xShift = this.vel; + // if (this.x2 > 260) this.phase++; + // break; + // case 9: + // // this.sprite = this.sprites[0]; + // yShift = -this.vel; + // if (this.y < 50) this.phase++; + // break; + // case 10: + // yShift = -this.vel + + default: + break; + } + + // if (this.y > 80 && this.phase === 0) this.phase++; + // else if (this.x > 40) this.phase++; + + // if (this.x === 25 && this.y < 100) { + // yShift = this.vel + // } else if (this.y.toFixed(0) === '101' && this.x < 200) { + // xShift = this.vel + // } else if (this.y > 20) { + // yShift = -this.vel; + // } else if (this.x > 25) { + // xShift = -this.vel; + // } else { + // yShift = this.vel; + // } + + this.x += xShift; + this.y += yShift; + // for (const s of this.squares) { + // s.x += xShift; + // s.y += yShift; + // } + + return this.x2 < 0 || this.y2 < 0 || this.x > canvas.width || this.y > canvas.height + } + +} + diff --git a/src/enemies/Enemy.ts b/src/enemies/Enemy.ts new file mode 100644 index 0000000..607a612 --- /dev/null +++ b/src/enemies/Enemy.ts @@ -0,0 +1,12 @@ +import Bullet from "../drawables/Bullet"; +import { BULLET_VEL } from "../consts"; +import Drawable, { Rectangle } from "../Drawable"; + +export default abstract class Enemy extends Drawable { + squares: Array = [new Rectangle(this)] + points = 5; + + shoot(bullet: Bullet[]) { + bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y2, 0, BULLET_VEL, true)) + } +} diff --git a/src/enemies/Straight.ts b/src/enemies/Straight.ts new file mode 100644 index 0000000..c397332 --- /dev/null +++ b/src/enemies/Straight.ts @@ -0,0 +1,17 @@ +import { canvas, PLAYER_VEL } from "../consts"; +import Enemy from "./Enemy"; + +export default class Straight extends Enemy { + width = 20; + height = 20; + sprite = "blue"; + vel = PLAYER_VEL * 0.8 + + move() { + if (this.y + this.height > canvas.height) { this.y = canvas.height - this.height; } + else if (this.y === canvas.height - this.height) { this.vel *= -1; this.y += this.vel; } + else { this.y += this.vel; } + + return this.y + this.height < 0 + } +} diff --git a/src/game.ts b/src/game.ts new file mode 100644 index 0000000..fafa0ee --- /dev/null +++ b/src/game.ts @@ -0,0 +1,108 @@ +import Anime from "./Animation"; +import { Background } from "./drawables/Background"; +import Bullet from "./drawables/Bullet"; +import { canvas, ctx } from "./consts"; +import BigCircle from "./enemies/BigCircle"; +import Enemy from "./enemies/Enemy"; +import { clearCtx, sleep } from "./helpers"; +import Player from "./Player"; +import { TopBar } from "./drawables/TopBar"; +import { keys } from "./Events"; +import Highscore from "./Highscore"; + +let p = new Player() +let pLifes = 3; +let bullets = [] as Bullet[] +let enemies = [] as Enemy[] +// let bg = new Background(); +let animations = [] as Anime[] +let intervalId = 0; +let rafId = 0; +intervalId; rafId; +const bg = new Background() +const tb = new TopBar() +const hg = new Highscore() + +export function start() { + p = new Player() + bullets = [] as Bullet[] + enemies = [] as Enemy[] + animations = [] as Anime[] + enemies.push(new BigCircle(25, -20)) + // enemies.push(new Straight(20, 0)) + intervalId = setTimeout(cpuLoop, 1000 / keys.fps) + rafId = requestAnimationFrame(gpuLoop) +} +export function cpuLoop() { + if (hg.show) { + hg.move(); + setTimeout(cpuLoop, 1000 / keys.fps) + return; + } + p.move() + p.shoot(bullets) + bg.move() + if (enemies.length === 0) { + enemies.push(new BigCircle(25, -20)) + setTimeout(() => enemies.push(new BigCircle(25, -20)), 1000) + } + + // enemies = enemies.filter(e => !bullets.some(b => b.collides(e))) + enemies.forEach(e => Math.random() < 0.05 && e.shoot(bullets)) + enemies = enemies.filter(e => !e.move()) + + bullets = bullets.filter(b => !b.move()) + + // const collidingEnemy = enemies.filter(e => p.collides(e)); + // const collidingBullets = bullets.filter(b => p.collides(b)); + // if (collidingBullets.length || collidingEnemy.length) playerDied(collidingEnemy[0]) + setTimeout(cpuLoop, 1000 / keys.fps) +} + +export function gpuLoop() { + rafId = requestAnimationFrame(gpuLoop) + + clearCtx() + + if (hg.show) { + hg.drawHg(bg) + tb.draw() + return; + } + + bg.draw() + bullets.forEach(b => b.draw()) + p.squares.forEach(s => s.draw()) + p.draw() + enemies.forEach(e => { + e.draw() + if (e instanceof BigCircle) { + e.squares.forEach(s => s.draw()) + } + }) + animations = animations.filter(a => a.draw()) + tb.draw() +} + +export async function playerDied(_enemy?: Enemy) { + animations.push(p.deathAnimation) + p.width = 0; + p.height = 0; + // clearTimeout(intervalId) + // cancelAnimationFrame(rafId) + if (--pLifes) { + await drawRestartScreen(); + start() + } else { + hg.show = true + } +} + +export async function drawRestartScreen() { + clearCtx() + + ctx.fillStyle = "yellow" + ctx.fillRect(0, 0, canvas.width, canvas.height) + await sleep(2000) +} + diff --git a/src/helpers.ts b/src/helpers.ts new file mode 100644 index 0000000..8a17555 --- /dev/null +++ b/src/helpers.ts @@ -0,0 +1,8 @@ +import { canvas, ctx } from "./consts"; + +export const sleep = (ms: number) => new Promise(res => setTimeout(res, ms)); +export const clearCtx = () => ctx.clearRect(0, 0, canvas.width, canvas.height) +export const toKebabCase = (str: string) => str + .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) + ?.map(x => x.toLowerCase()) + .join('-'); diff --git a/src/imgs/bg.png b/src/imgs/bg.png new file mode 100644 index 0000000..c89e65c Binary files /dev/null and b/src/imgs/bg.png differ diff --git a/src/imgs/bg.xcf b/src/imgs/bg.xcf new file mode 100644 index 0000000..e72dd7b Binary files /dev/null and b/src/imgs/bg.xcf differ diff --git a/src/imgs/bg1.png b/src/imgs/bg1.png new file mode 100644 index 0000000..f7d3aa8 Binary files /dev/null and b/src/imgs/bg1.png differ diff --git a/src/imgs/bg2.png b/src/imgs/bg2.png new file mode 100644 index 0000000..c89e65c Binary files /dev/null and b/src/imgs/bg2.png differ diff --git a/src/imgs/big-circle-down-to-right1.png b/src/imgs/big-circle-down-to-right1.png new file mode 100644 index 0000000..12d650d Binary files /dev/null and b/src/imgs/big-circle-down-to-right1.png differ diff --git a/src/imgs/big-circle-down-to-right2.png b/src/imgs/big-circle-down-to-right2.png new file mode 100644 index 0000000..5edd0d9 Binary files /dev/null and b/src/imgs/big-circle-down-to-right2.png differ diff --git a/src/imgs/big-circle-down-to-right3.png b/src/imgs/big-circle-down-to-right3.png new file mode 100644 index 0000000..bd06d3a Binary files /dev/null and b/src/imgs/big-circle-down-to-right3.png differ diff --git a/src/imgs/big-circle-down.png b/src/imgs/big-circle-down.png new file mode 100644 index 0000000..2c8b0d3 Binary files /dev/null and b/src/imgs/big-circle-down.png differ diff --git a/src/imgs/big-circle-left-to-down1.png b/src/imgs/big-circle-left-to-down1.png new file mode 100644 index 0000000..6b5993a Binary files /dev/null and b/src/imgs/big-circle-left-to-down1.png differ diff --git a/src/imgs/big-circle-left-to-down2.png b/src/imgs/big-circle-left-to-down2.png new file mode 100644 index 0000000..4039a62 Binary files /dev/null and b/src/imgs/big-circle-left-to-down2.png differ diff --git a/src/imgs/big-circle-left-to-down3.png b/src/imgs/big-circle-left-to-down3.png new file mode 100644 index 0000000..86afd9a Binary files /dev/null and b/src/imgs/big-circle-left-to-down3.png differ diff --git a/src/imgs/big-circle-left.png b/src/imgs/big-circle-left.png new file mode 100644 index 0000000..8820f70 Binary files /dev/null and b/src/imgs/big-circle-left.png differ diff --git a/src/imgs/big-circle-right-to-up1.png b/src/imgs/big-circle-right-to-up1.png new file mode 100644 index 0000000..dbaf2e6 Binary files /dev/null and b/src/imgs/big-circle-right-to-up1.png differ diff --git a/src/imgs/big-circle-right-to-up2.png b/src/imgs/big-circle-right-to-up2.png new file mode 100644 index 0000000..606c47c Binary files /dev/null and b/src/imgs/big-circle-right-to-up2.png differ diff --git a/src/imgs/big-circle-right-to-up3.png b/src/imgs/big-circle-right-to-up3.png new file mode 100644 index 0000000..23f12ff Binary files /dev/null and b/src/imgs/big-circle-right-to-up3.png differ diff --git a/src/imgs/big-circle-right.png b/src/imgs/big-circle-right.png new file mode 100644 index 0000000..825c4d7 Binary files /dev/null and b/src/imgs/big-circle-right.png differ diff --git a/src/imgs/big-circle-up-to-left1.png b/src/imgs/big-circle-up-to-left1.png new file mode 100644 index 0000000..462d358 Binary files /dev/null and b/src/imgs/big-circle-up-to-left1.png differ diff --git a/src/imgs/big-circle-up-to-left2.png b/src/imgs/big-circle-up-to-left2.png new file mode 100644 index 0000000..6e0305f Binary files /dev/null and b/src/imgs/big-circle-up-to-left2.png differ diff --git a/src/imgs/big-circle-up-to-left3.png b/src/imgs/big-circle-up-to-left3.png new file mode 100644 index 0000000..8ab9bf5 Binary files /dev/null and b/src/imgs/big-circle-up-to-left3.png differ diff --git a/src/imgs/big-circle-up.png b/src/imgs/big-circle-up.png new file mode 100644 index 0000000..5b1508b Binary files /dev/null and b/src/imgs/big-circle-up.png differ diff --git a/src/imgs/enemy-bullet.png b/src/imgs/enemy-bullet.png new file mode 100644 index 0000000..66c2533 Binary files /dev/null and b/src/imgs/enemy-bullet.png differ diff --git a/src/imgs/font/ .png b/src/imgs/font/ .png new file mode 100644 index 0000000..c900961 Binary files /dev/null and b/src/imgs/font/ .png differ diff --git a/src/imgs/font/white/!.png b/src/imgs/font/white/!.png new file mode 100644 index 0000000..f7f4963 Binary files /dev/null and b/src/imgs/font/white/!.png differ diff --git a/src/imgs/font/white/&.png b/src/imgs/font/white/&.png new file mode 100644 index 0000000..4f97229 Binary files /dev/null and b/src/imgs/font/white/&.png differ diff --git a/src/imgs/font/white/-.png b/src/imgs/font/white/-.png new file mode 100644 index 0000000..18eb462 Binary files /dev/null and b/src/imgs/font/white/-.png differ diff --git a/src/imgs/font/white/..png b/src/imgs/font/white/..png new file mode 100644 index 0000000..e29178a Binary files /dev/null and b/src/imgs/font/white/..png differ diff --git a/src/imgs/font/white/?.png b/src/imgs/font/white/?.png new file mode 100644 index 0000000..71884d7 Binary files /dev/null and b/src/imgs/font/white/?.png differ diff --git a/src/imgs/font/white/_.png b/src/imgs/font/white/_.png new file mode 100644 index 0000000..7fd5f84 Binary files /dev/null and b/src/imgs/font/white/_.png differ diff --git a/src/imgs/font/white/a.png b/src/imgs/font/white/a.png new file mode 100644 index 0000000..8cee648 Binary files /dev/null and b/src/imgs/font/white/a.png differ diff --git a/src/imgs/font/white/b.png b/src/imgs/font/white/b.png new file mode 100644 index 0000000..62f4851 Binary files /dev/null and b/src/imgs/font/white/b.png differ diff --git a/src/imgs/font/white/c.png b/src/imgs/font/white/c.png new file mode 100644 index 0000000..691f1d7 Binary files /dev/null and b/src/imgs/font/white/c.png differ diff --git a/src/imgs/font/white/d.png b/src/imgs/font/white/d.png new file mode 100644 index 0000000..eb721b5 Binary files /dev/null and b/src/imgs/font/white/d.png differ diff --git a/src/imgs/font/white/e.png b/src/imgs/font/white/e.png new file mode 100644 index 0000000..2b6031c Binary files /dev/null and b/src/imgs/font/white/e.png differ diff --git a/src/imgs/font/white/ed.png b/src/imgs/font/white/ed.png new file mode 100644 index 0000000..c180fc6 Binary files /dev/null and b/src/imgs/font/white/ed.png differ diff --git a/src/imgs/font/white/f.png b/src/imgs/font/white/f.png new file mode 100644 index 0000000..e97e8c5 Binary files /dev/null and b/src/imgs/font/white/f.png differ diff --git a/src/imgs/font/white/g.png b/src/imgs/font/white/g.png new file mode 100644 index 0000000..9b116d8 Binary files /dev/null and b/src/imgs/font/white/g.png differ diff --git a/src/imgs/font/white/h.png b/src/imgs/font/white/h.png new file mode 100644 index 0000000..a563a82 Binary files /dev/null and b/src/imgs/font/white/h.png differ diff --git a/src/imgs/font/white/heart.png b/src/imgs/font/white/heart.png new file mode 100644 index 0000000..ec57f75 Binary files /dev/null and b/src/imgs/font/white/heart.png differ diff --git a/src/imgs/font/white/i.png b/src/imgs/font/white/i.png new file mode 100644 index 0000000..da655ed Binary files /dev/null and b/src/imgs/font/white/i.png differ diff --git a/src/imgs/font/white/j.png b/src/imgs/font/white/j.png new file mode 100644 index 0000000..ced6588 Binary files /dev/null and b/src/imgs/font/white/j.png differ diff --git a/src/imgs/font/white/k.png b/src/imgs/font/white/k.png new file mode 100644 index 0000000..33d1649 Binary files /dev/null and b/src/imgs/font/white/k.png differ diff --git a/src/imgs/font/white/l.png b/src/imgs/font/white/l.png new file mode 100644 index 0000000..83c6de9 Binary files /dev/null and b/src/imgs/font/white/l.png differ diff --git a/src/imgs/font/white/m.png b/src/imgs/font/white/m.png new file mode 100644 index 0000000..1b7903c Binary files /dev/null and b/src/imgs/font/white/m.png differ diff --git a/src/imgs/font/white/man.png b/src/imgs/font/white/man.png new file mode 100644 index 0000000..f3aeb7d Binary files /dev/null and b/src/imgs/font/white/man.png differ diff --git a/src/imgs/font/white/n.png b/src/imgs/font/white/n.png new file mode 100644 index 0000000..778a738 Binary files /dev/null and b/src/imgs/font/white/n.png differ diff --git a/src/imgs/font/white/o.png b/src/imgs/font/white/o.png new file mode 100644 index 0000000..48664f5 Binary files /dev/null and b/src/imgs/font/white/o.png differ diff --git a/src/imgs/font/white/p.png b/src/imgs/font/white/p.png new file mode 100644 index 0000000..0c8652e Binary files /dev/null and b/src/imgs/font/white/p.png differ diff --git a/src/imgs/font/white/q.png b/src/imgs/font/white/q.png new file mode 100644 index 0000000..b0c5097 Binary files /dev/null and b/src/imgs/font/white/q.png differ diff --git a/src/imgs/font/white/r.png b/src/imgs/font/white/r.png new file mode 100644 index 0000000..511a916 Binary files /dev/null and b/src/imgs/font/white/r.png differ diff --git a/src/imgs/font/white/rv.png b/src/imgs/font/white/rv.png new file mode 100644 index 0000000..869d37a Binary files /dev/null and b/src/imgs/font/white/rv.png differ diff --git a/src/imgs/font/white/s.png b/src/imgs/font/white/s.png new file mode 100644 index 0000000..932714f Binary files /dev/null and b/src/imgs/font/white/s.png differ diff --git a/src/imgs/font/white/t.png b/src/imgs/font/white/t.png new file mode 100644 index 0000000..828a5f9 Binary files /dev/null and b/src/imgs/font/white/t.png differ diff --git a/src/imgs/font/white/u.png b/src/imgs/font/white/u.png new file mode 100644 index 0000000..5d32614 Binary files /dev/null and b/src/imgs/font/white/u.png differ diff --git a/src/imgs/font/white/v.png b/src/imgs/font/white/v.png new file mode 100644 index 0000000..a77f1dd Binary files /dev/null and b/src/imgs/font/white/v.png differ diff --git a/src/imgs/font/white/w.png b/src/imgs/font/white/w.png new file mode 100644 index 0000000..64f0866 Binary files /dev/null and b/src/imgs/font/white/w.png differ diff --git a/src/imgs/font/white/woman.png b/src/imgs/font/white/woman.png new file mode 100644 index 0000000..f6e1422 Binary files /dev/null and b/src/imgs/font/white/woman.png differ diff --git a/src/imgs/font/white/x.png b/src/imgs/font/white/x.png new file mode 100644 index 0000000..f186b8f Binary files /dev/null and b/src/imgs/font/white/x.png differ diff --git a/src/imgs/font/white/y.png b/src/imgs/font/white/y.png new file mode 100644 index 0000000..98d1bb8 Binary files /dev/null and b/src/imgs/font/white/y.png differ diff --git a/src/imgs/font/white/z.png b/src/imgs/font/white/z.png new file mode 100644 index 0000000..ade4c33 Binary files /dev/null and b/src/imgs/font/white/z.png differ diff --git a/src/imgs/font/yellow/!.png b/src/imgs/font/yellow/!.png new file mode 100644 index 0000000..919037b Binary files /dev/null and b/src/imgs/font/yellow/!.png differ diff --git a/src/imgs/font/yellow/&.png b/src/imgs/font/yellow/&.png new file mode 100644 index 0000000..74489a2 Binary files /dev/null and b/src/imgs/font/yellow/&.png differ diff --git a/src/imgs/font/yellow/-.png b/src/imgs/font/yellow/-.png new file mode 100644 index 0000000..2677b45 Binary files /dev/null and b/src/imgs/font/yellow/-.png differ diff --git a/src/imgs/font/yellow/..png b/src/imgs/font/yellow/..png new file mode 100644 index 0000000..5f0e9c3 Binary files /dev/null and b/src/imgs/font/yellow/..png differ diff --git a/src/imgs/font/yellow/?.png b/src/imgs/font/yellow/?.png new file mode 100644 index 0000000..98ac04b Binary files /dev/null and b/src/imgs/font/yellow/?.png differ diff --git a/src/imgs/font/yellow/_.png b/src/imgs/font/yellow/_.png new file mode 100644 index 0000000..6211922 Binary files /dev/null and b/src/imgs/font/yellow/_.png differ diff --git a/src/imgs/font/yellow/a.png b/src/imgs/font/yellow/a.png new file mode 100644 index 0000000..395ea56 Binary files /dev/null and b/src/imgs/font/yellow/a.png differ diff --git a/src/imgs/font/yellow/b.png b/src/imgs/font/yellow/b.png new file mode 100644 index 0000000..e7740e0 Binary files /dev/null and b/src/imgs/font/yellow/b.png differ diff --git a/src/imgs/font/yellow/c.png b/src/imgs/font/yellow/c.png new file mode 100644 index 0000000..98d9c02 Binary files /dev/null and b/src/imgs/font/yellow/c.png differ diff --git a/src/imgs/font/yellow/d.png b/src/imgs/font/yellow/d.png new file mode 100644 index 0000000..b5378a9 Binary files /dev/null and b/src/imgs/font/yellow/d.png differ diff --git a/src/imgs/font/yellow/e.png b/src/imgs/font/yellow/e.png new file mode 100644 index 0000000..9334386 Binary files /dev/null and b/src/imgs/font/yellow/e.png differ diff --git a/src/imgs/font/yellow/ed.png b/src/imgs/font/yellow/ed.png new file mode 100644 index 0000000..7c7de83 Binary files /dev/null and b/src/imgs/font/yellow/ed.png differ diff --git a/src/imgs/font/yellow/f.png b/src/imgs/font/yellow/f.png new file mode 100644 index 0000000..277e750 Binary files /dev/null and b/src/imgs/font/yellow/f.png differ diff --git a/src/imgs/font/yellow/g.png b/src/imgs/font/yellow/g.png new file mode 100644 index 0000000..b47882f Binary files /dev/null and b/src/imgs/font/yellow/g.png differ diff --git a/src/imgs/font/yellow/h.png b/src/imgs/font/yellow/h.png new file mode 100644 index 0000000..3ecc26b Binary files /dev/null and b/src/imgs/font/yellow/h.png differ diff --git a/src/imgs/font/yellow/heart.png b/src/imgs/font/yellow/heart.png new file mode 100644 index 0000000..93e6f58 Binary files /dev/null and b/src/imgs/font/yellow/heart.png differ diff --git a/src/imgs/font/yellow/i.png b/src/imgs/font/yellow/i.png new file mode 100644 index 0000000..3df7399 Binary files /dev/null and b/src/imgs/font/yellow/i.png differ diff --git a/src/imgs/font/yellow/j.png b/src/imgs/font/yellow/j.png new file mode 100644 index 0000000..edc42c0 Binary files /dev/null and b/src/imgs/font/yellow/j.png differ diff --git a/src/imgs/font/yellow/k.png b/src/imgs/font/yellow/k.png new file mode 100644 index 0000000..1a09894 Binary files /dev/null and b/src/imgs/font/yellow/k.png differ diff --git a/src/imgs/font/yellow/l.png b/src/imgs/font/yellow/l.png new file mode 100644 index 0000000..aa449bb Binary files /dev/null and b/src/imgs/font/yellow/l.png differ diff --git a/src/imgs/font/yellow/m.png b/src/imgs/font/yellow/m.png new file mode 100644 index 0000000..77e2767 Binary files /dev/null and b/src/imgs/font/yellow/m.png differ diff --git a/src/imgs/font/yellow/man.png b/src/imgs/font/yellow/man.png new file mode 100644 index 0000000..9c5dbc0 Binary files /dev/null and b/src/imgs/font/yellow/man.png differ diff --git a/src/imgs/font/yellow/n.png b/src/imgs/font/yellow/n.png new file mode 100644 index 0000000..0dedbbb Binary files /dev/null and b/src/imgs/font/yellow/n.png differ diff --git a/src/imgs/font/yellow/o.png b/src/imgs/font/yellow/o.png new file mode 100644 index 0000000..d8d946d Binary files /dev/null and b/src/imgs/font/yellow/o.png differ diff --git a/src/imgs/font/yellow/p.png b/src/imgs/font/yellow/p.png new file mode 100644 index 0000000..7413ef1 Binary files /dev/null and b/src/imgs/font/yellow/p.png differ diff --git a/src/imgs/font/yellow/q.png b/src/imgs/font/yellow/q.png new file mode 100644 index 0000000..749f269 Binary files /dev/null and b/src/imgs/font/yellow/q.png differ diff --git a/src/imgs/font/yellow/r.png b/src/imgs/font/yellow/r.png new file mode 100644 index 0000000..323cac4 Binary files /dev/null and b/src/imgs/font/yellow/r.png differ diff --git a/src/imgs/font/yellow/rv.png b/src/imgs/font/yellow/rv.png new file mode 100644 index 0000000..6c4f309 Binary files /dev/null and b/src/imgs/font/yellow/rv.png differ diff --git a/src/imgs/font/yellow/s.png b/src/imgs/font/yellow/s.png new file mode 100644 index 0000000..9ac4e01 Binary files /dev/null and b/src/imgs/font/yellow/s.png differ diff --git a/src/imgs/font/yellow/t.png b/src/imgs/font/yellow/t.png new file mode 100644 index 0000000..66a764c Binary files /dev/null and b/src/imgs/font/yellow/t.png differ diff --git a/src/imgs/font/yellow/u.png b/src/imgs/font/yellow/u.png new file mode 100644 index 0000000..e6445de Binary files /dev/null and b/src/imgs/font/yellow/u.png differ diff --git a/src/imgs/font/yellow/v.png b/src/imgs/font/yellow/v.png new file mode 100644 index 0000000..e7fe866 Binary files /dev/null and b/src/imgs/font/yellow/v.png differ diff --git a/src/imgs/font/yellow/w.png b/src/imgs/font/yellow/w.png new file mode 100644 index 0000000..3073fa6 Binary files /dev/null and b/src/imgs/font/yellow/w.png differ diff --git a/src/imgs/font/yellow/woman.png b/src/imgs/font/yellow/woman.png new file mode 100644 index 0000000..687d276 Binary files /dev/null and b/src/imgs/font/yellow/woman.png differ diff --git a/src/imgs/font/yellow/x.png b/src/imgs/font/yellow/x.png new file mode 100644 index 0000000..b926580 Binary files /dev/null and b/src/imgs/font/yellow/x.png differ diff --git a/src/imgs/font/yellow/y.png b/src/imgs/font/yellow/y.png new file mode 100644 index 0000000..1baf0ff Binary files /dev/null and b/src/imgs/font/yellow/y.png differ diff --git a/src/imgs/font/yellow/z.png b/src/imgs/font/yellow/z.png new file mode 100644 index 0000000..42161bf Binary files /dev/null and b/src/imgs/font/yellow/z.png differ diff --git a/src/imgs/friendly-bullet.png b/src/imgs/friendly-bullet.png new file mode 100644 index 0000000..77ec9a7 Binary files /dev/null and b/src/imgs/friendly-bullet.png differ diff --git a/src/imgs/green-down-to-left.png b/src/imgs/green-down-to-left.png new file mode 100644 index 0000000..f970d4b Binary files /dev/null and b/src/imgs/green-down-to-left.png differ diff --git a/src/imgs/green-down.png b/src/imgs/green-down.png new file mode 100644 index 0000000..817bc83 Binary files /dev/null and b/src/imgs/green-down.png differ diff --git a/src/imgs/green-left-to-up.png b/src/imgs/green-left-to-up.png new file mode 100644 index 0000000..fc79919 Binary files /dev/null and b/src/imgs/green-left-to-up.png differ diff --git a/src/imgs/green-left.png b/src/imgs/green-left.png new file mode 100644 index 0000000..1851fb4 Binary files /dev/null and b/src/imgs/green-left.png differ diff --git a/src/imgs/green-right-to-down.png b/src/imgs/green-right-to-down.png new file mode 100644 index 0000000..fc645b5 Binary files /dev/null and b/src/imgs/green-right-to-down.png differ diff --git a/src/imgs/green-right.png b/src/imgs/green-right.png new file mode 100644 index 0000000..ce3496d Binary files /dev/null and b/src/imgs/green-right.png differ diff --git a/src/imgs/green-up-to-right.png b/src/imgs/green-up-to-right.png new file mode 100644 index 0000000..1250970 Binary files /dev/null and b/src/imgs/green-up-to-right.png differ diff --git a/src/imgs/green-up.png b/src/imgs/green-up.png new file mode 100644 index 0000000..813ebbd Binary files /dev/null and b/src/imgs/green-up.png differ diff --git a/src/imgs/player-left.png b/src/imgs/player-left.png new file mode 100644 index 0000000..5061a1b Binary files /dev/null and b/src/imgs/player-left.png differ diff --git a/src/imgs/player-right.png b/src/imgs/player-right.png new file mode 100644 index 0000000..1f62209 Binary files /dev/null and b/src/imgs/player-right.png differ diff --git a/src/imgs/player-up.png b/src/imgs/player-up.png new file mode 100644 index 0000000..8fefada Binary files /dev/null and b/src/imgs/player-up.png differ diff --git a/src/imgs/red-down-to-left.png b/src/imgs/red-down-to-left.png new file mode 100644 index 0000000..8313dc0 Binary files /dev/null and b/src/imgs/red-down-to-left.png differ diff --git a/src/imgs/red-down.png b/src/imgs/red-down.png new file mode 100644 index 0000000..9042dfa Binary files /dev/null and b/src/imgs/red-down.png differ diff --git a/src/imgs/red-left-to-up.png b/src/imgs/red-left-to-up.png new file mode 100644 index 0000000..6139f50 Binary files /dev/null and b/src/imgs/red-left-to-up.png differ diff --git a/src/imgs/red-left.png b/src/imgs/red-left.png new file mode 100644 index 0000000..21ac51c Binary files /dev/null and b/src/imgs/red-left.png differ diff --git a/src/imgs/red-right-to-down.png b/src/imgs/red-right-to-down.png new file mode 100644 index 0000000..429f536 Binary files /dev/null and b/src/imgs/red-right-to-down.png differ diff --git a/src/imgs/red-right.png b/src/imgs/red-right.png new file mode 100644 index 0000000..83a35b1 Binary files /dev/null and b/src/imgs/red-right.png differ diff --git a/src/imgs/red-up-to-right.png b/src/imgs/red-up-to-right.png new file mode 100644 index 0000000..5d593ea Binary files /dev/null and b/src/imgs/red-up-to-right.png differ diff --git a/src/imgs/red-up.png b/src/imgs/red-up.png new file mode 100644 index 0000000..0f671c0 Binary files /dev/null and b/src/imgs/red-up.png differ diff --git a/src/imgs/selector.png b/src/imgs/selector.png new file mode 100644 index 0000000..9ccbcd7 Binary files /dev/null and b/src/imgs/selector.png differ diff --git a/src/imgs/simple-down.png b/src/imgs/simple-down.png new file mode 100644 index 0000000..86f3fdf Binary files /dev/null and b/src/imgs/simple-down.png differ diff --git a/src/imgs/simple-rot1.png b/src/imgs/simple-rot1.png new file mode 100644 index 0000000..8dd3740 Binary files /dev/null and b/src/imgs/simple-rot1.png differ diff --git a/src/imgs/simple-rot2.png b/src/imgs/simple-rot2.png new file mode 100644 index 0000000..9ed0864 Binary files /dev/null and b/src/imgs/simple-rot2.png differ diff --git a/src/imgs/simple-rot3.png b/src/imgs/simple-rot3.png new file mode 100644 index 0000000..69362c0 Binary files /dev/null and b/src/imgs/simple-rot3.png differ diff --git a/src/imgs/simple-rot4.png b/src/imgs/simple-rot4.png new file mode 100644 index 0000000..48afbd7 Binary files /dev/null and b/src/imgs/simple-rot4.png differ diff --git a/src/imgs/simple-up.png b/src/imgs/simple-up.png new file mode 100644 index 0000000..bce253e Binary files /dev/null and b/src/imgs/simple-up.png differ diff --git a/src/imgs/topbar.png b/src/imgs/topbar.png new file mode 100644 index 0000000..8b798bc Binary files /dev/null and b/src/imgs/topbar.png differ diff --git a/src/imgs/white-down.png b/src/imgs/white-down.png new file mode 100644 index 0000000..46bf38f Binary files /dev/null and b/src/imgs/white-down.png differ diff --git a/src/imgs/white-strange-left.png b/src/imgs/white-strange-left.png new file mode 100644 index 0000000..803fecd Binary files /dev/null and b/src/imgs/white-strange-left.png differ diff --git a/src/imgs/white-strange-right.png b/src/imgs/white-strange-right.png new file mode 100644 index 0000000..e66ef02 Binary files /dev/null and b/src/imgs/white-strange-right.png differ diff --git a/src/imgs/white-turn.png b/src/imgs/white-turn.png new file mode 100644 index 0000000..099ce93 Binary files /dev/null and b/src/imgs/white-turn.png differ diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..9f462e5 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,10 @@ +import "./style.css"; +import "./Events"; +import loadAllImages from "./Images"; +import { start } from "./game"; + +async function init() { + await loadAllImages(); + start(); +} +document.body.onload = init; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..026f6a1 --- /dev/null +++ b/src/style.css @@ -0,0 +1,13 @@ +body { + display: grid; + height: 100vh; +} +canvas { + --scale: 3; + width: calc(320px * var(--scale)); + height: calc(200px * var(--scale)); + place-self: center; + image-rendering: pixelated; + image-rendering: crisp-edges; + border: 1px solid black; +} -- cgit v1.3.1