From 5413001f654d4ea27129cf2edfc15322f2ba27ec Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Wed, 1 Jun 2022 00:26:52 +0200 Subject: Spawning enemies, start Startscreen --- src/Events.ts | 2 ++ src/Highscore.ts | 3 +-- src/Images.ts | 6 ++++++ src/Player.ts | 11 ++++++----- src/Storage.ts | 3 +-- src/drawables/Background.ts | 2 +- src/drawables/Startscreen.ts | 45 +++++++++++++++++++++++++++++++++++++++++++ src/game.ts | 40 ++++++++++++++++++++++++++++++++++++-- src/imgs/bg.png | Bin 21391 -> 21631 bytes src/imgs/bg2.xcf | Bin 0 -> 76507 bytes src/imgs/old-bgs/1bg.png | Bin 0 -> 21391 bytes src/imgs/start-screen0.png | Bin 0 -> 19849 bytes src/imgs/start-screen1.png | Bin 0 -> 13078 bytes src/imgs/start-screen2.png | Bin 0 -> 10245 bytes src/imgs/start-screen3.png | Bin 0 -> 16336 bytes src/imgs/start-screen4.png | Bin 0 -> 13555 bytes 16 files changed, 100 insertions(+), 12 deletions(-) create mode 100644 src/drawables/Startscreen.ts create mode 100644 src/imgs/bg2.xcf create mode 100644 src/imgs/old-bgs/1bg.png create mode 100644 src/imgs/start-screen0.png create mode 100644 src/imgs/start-screen1.png create mode 100644 src/imgs/start-screen2.png create mode 100644 src/imgs/start-screen3.png create mode 100644 src/imgs/start-screen4.png diff --git a/src/Events.ts b/src/Events.ts index 2a3e363..2a07ea9 100644 --- a/src/Events.ts +++ b/src/Events.ts @@ -31,6 +31,8 @@ function setKey(key: string, val: boolean, repeat: boolean) { else if (["f"].includes(key)) keys.fps = 50; else if (["g"].includes(key)) keys.fps = 1; else if (["c"].includes(key)) keys.fps = 12; + else if (["y"].includes(key)) keys.fps += 1; + else if (["t"].includes(key)) keys.fps -= 1; // console.log(key, val ? "keydown" : "keyup") } diff --git a/src/Highscore.ts b/src/Highscore.ts index 509289d..b70715b 100644 --- a/src/Highscore.ts +++ b/src/Highscore.ts @@ -92,13 +92,12 @@ export default class Highscore extends Drawable { else if (char === "ed") { console.log(this.score, this.name, this.place); if (this.place == null) throw Error("Place is null"); - const place = parseInt(this.place[0]) + const place = this.place[0] === 't' ? 1 :parseInt(this.place[0]) if (place < 7) { const score = { name: this.name, score: this.score.toString(), world: "01" } as Score; const ns = getStorage() ns.splice(place - 1, 0, score); ns.length = 6; - console.log(ns.forEach(console.log)); setStorage(ns); } diff --git a/src/Images.ts b/src/Images.ts index fce97ea..bf91bb3 100644 --- a/src/Images.ts +++ b/src/Images.ts @@ -63,6 +63,11 @@ export const IMGS = { whiteStrangeRight: {} as HTMLImageElement, planeIcon: {} as HTMLImageElement, rollIcon: {} as HTMLImageElement, + startScreen0: {} as HTMLImageElement, + startScreen1: {} as HTMLImageElement, + startScreen2: {} as HTMLImageElement, + startScreen3: {} as HTMLImageElement, + startScreen4: {} as HTMLImageElement, font: { white: {} as any, yellow: {} as any, @@ -93,6 +98,7 @@ export default async function loadAllImages() { 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") + // Only numbers for (const c of allChars.filter(ch => !alphabet.includes(ch))) { IMGS.font.small.white[c] = await asyncImageLoader("/src/imgs/font/small/white/" + c + ".png"); } diff --git a/src/Player.ts b/src/Player.ts index 171f704..eb76fbe 100644 --- a/src/Player.ts +++ b/src/Player.ts @@ -6,17 +6,18 @@ import { keys } from "./Events"; import { IMGS } from "./Images"; export default class Player extends Drawable { - static startx = 250; - static starty = 100; + static startx = 175; + static starty = 155; width = IMGS.playerUp.width; height = IMGS.playerUp.height; - sprite = IMGS.empty; + sprite = IMGS.playerUp; xvel = 0; yvel = 0; lastShoot = 0; stopAtBorder = true; - squares: Rectangle[] = [new Rectangle(this)] + // squares: Rectangle[] = [new Rectangle(this)] + squares: Rectangle[] = [] lifes = 3; power = 2; @@ -54,7 +55,7 @@ export default class Player extends Drawable { this.width = this.sprite.width; this.height = this.sprite.height; - this.squares = [new Rectangle(this)] + // this.squares = [new Rectangle(this)] this.y += this.yvel; this.x += this.xvel; diff --git a/src/Storage.ts b/src/Storage.ts index 50d70a2..632ce50 100644 --- a/src/Storage.ts +++ b/src/Storage.ts @@ -20,7 +20,6 @@ export function getStorage(): Storage { } export function setStorage(s: Storage) { - debugger localStorage.setItem("storage", JSON.stringify(s)) } @@ -33,7 +32,7 @@ export function getPlace(s: number): string { place = i; break; } } - if (place === 1) return "1st"; + if (place === 1) return "top"; else if (place === 2) return "2nd"; else if (place === 3) return "3rd"; else return place + "th"; diff --git a/src/drawables/Background.ts b/src/drawables/Background.ts index 1eef6c4..da091a1 100644 --- a/src/drawables/Background.ts +++ b/src/drawables/Background.ts @@ -11,7 +11,7 @@ export class Background extends Drawable { } // delta = -1751 + 24 + 2693; delta = 0 - move(): boolean { + move() { this.delta += 1; return true; } diff --git a/src/drawables/Startscreen.ts b/src/drawables/Startscreen.ts new file mode 100644 index 0000000..ea8dc40 --- /dev/null +++ b/src/drawables/Startscreen.ts @@ -0,0 +1,45 @@ +import { TOPBAR_HEIGHT } from "../consts" +import Drawable from "../Drawable" +import { IMGS } from "../Images" + +export default class Startscreen extends Drawable { + sprite = IMGS.startScreen0 + si = 0 + i = 0 + j = 0 + color = "white" + colors = ["white", "yellow", "blue", "purple", "red"] + ci = 0 + + constructor() { + super(0, TOPBAR_HEIGHT) + } + + move() { + if(this.si === 0) { + if(this.i++ === 199) { this.sprite = IMGS.startScreen1; this.i = 0; this.si++ } + // if(this.i++ === 19) { this.sprite = IMGS.startScreen1; this.i = 0; this.si++ } + } else { + // if(this.i++ === 2) { + if(this.i++ === 9) { + this.ci++; + if(this.ci >= this.colors.length) { + if(this.j++ === 9) { + // if(this.j++ === 2) { + this.si++; + if(this.si > 4) this.si = 0 + //@ts-expect-error + this.sprite = IMGS["startScreen" + this.si] + this.j = 0 + } + this.ci = 0; + } + this.color = this.colors[this.ci] + this.i = 0 + } + } + // console.log(this.sprite, this.color); + + return true; + } +} diff --git a/src/game.ts b/src/game.ts index f01e2ea..3fdfa8c 100644 --- a/src/game.ts +++ b/src/game.ts @@ -1,7 +1,7 @@ import Anime from "./Animation"; import { Background } from "./drawables/Background"; import Bullet from "./drawables/Bullet"; -import { canvas, ctx } from "./consts"; +import { canvas, ctx, TOPBAR_HEIGHT } from "./consts"; import BigCircle from "./enemies/BigCircle"; import Straight from "./enemies/Straight"; import Red1 from "./enemies/Red1"; @@ -16,6 +16,7 @@ import Green1 from "./enemies/Green1"; import Green2 from "./enemies/Green2"; import Strange from "./enemies/Strange"; import White from "./enemies/White"; +// import Startscreen from "./drawables/Startscreen"; let p = new Player() let pLifes = 1; @@ -33,6 +34,7 @@ let rafId = 0; const bg = new Background() const tb = new TopBar() const hg = new Highscore() +// const ss = new Startscreen(); export function start() { p = new Player() @@ -51,6 +53,9 @@ export function start() { rafId = requestAnimationFrame(gpuLoop) } export function cpuLoop() { + // ss.move() + // newTimeout() + // return if (hg.show) { hg.move(); tb.setData(score, pLifes, rolls, highscore) @@ -60,6 +65,7 @@ export function cpuLoop() { p.move() p.shoot(bullets) bg.move() + spawnEnemies() tb.setData(score, pLifes, rolls, highscore) if (enemies.length === 0) { // enemies.push(new BigCircle(25, -20)) @@ -105,7 +111,7 @@ export function cpuLoop() { }) // console.log("aft: ", enemies.length); // playerDied({} as Enemy) - if (!bullCollPlay.length || enemCollPlay.length) playerDied(enemCollPlay) + if (bullCollPlay.length || enemCollPlay.length) playerDied(enemCollPlay) else newTimeout() } @@ -161,3 +167,33 @@ export async function drawRestartScreen() { const newTimeout = (f = cpuLoop) => { clearTimeout(intervalId); intervalId = setTimeout(f, 1000 / keys.fps) } +function spawnEnemies() { + if(bg.delta === 180) enemies.push(new Straight(80, 0)); + if(bg.delta === 180 + 20) enemies.push(new Straight(110, 0)); + if(bg.delta === 180 + 20 + 30) enemies.push(new Straight(160, 0)); + if(bg.delta === 180 + 20 + 30 + 25) enemies.push(new Straight(210, 0)); + if(bg.delta === 180 + 20 + 30 + 25 + 80) enemies.push(new Straight(130, 0)); + if(bg.delta === 180 + 20 + 30 + 25 + 80 + 50) enemies.push(new Straight(90, 0)); + if(bg.delta === 180 + 20 + 30 + 25 + 80 + 50 + 32) enemies.push(new Straight(220, 0)); + if(bg.delta === 630) enemies.push(new BigCircle(16, TOPBAR_HEIGHT - 40)) + if(bg.delta === 630 + 38) enemies.push(new Straight(90, 0), new Straight(266, 0)) + if(bg.delta === 630 + 38 + 38) enemies.push(new Straight(140, 0)) + if(bg.delta === 630 + 38 + 38 + 70) enemies.push(new Straight(30, 0)) + if(bg.delta === 630 + 38 + 38 + 70 + 30) enemies.push(new Straight(266, 0)) + if(bg.delta === 1016 + 21 * 0) enemies.push(new Red1(-20, 52)) + if(bg.delta === 1016 + 21 * 1) enemies.push(new Red1(-20, 52)) + if(bg.delta === 1016 + 21 * 2) enemies.push(new Red1(-20, 52)) + if(bg.delta === 1016 + 21 * 3) enemies.push(new Red1(-20, 52)) + if(bg.delta === 1016 + 21 * 4) enemies.push(new Red1(-20, 52)) + if(bg.delta === 1120) enemies.push(new Green1(110, canvas.height, true), new Green1(170, canvas.height, false)) + if(bg.delta === 1498) enemies.push(new Strange(160, canvas.height)) + if(bg.delta === 1498 + 45) enemies.push(new Red2(100, 0, true), new Red2(180, 0, false)) + if(bg.delta === 1498 + 45 + 90) enemies.push(new Green2(100, 0, true), new Green2(180, 0, false)) + if(bg.delta === 2000 + 85 * 0) enemies.push(new White(60, 0, true), new White(230, 0, false)) + if(bg.delta === 2000 + 85 * 1) enemies.push(new White(60, 0, true), new White(230, 0, false)) + if(bg.delta === 2000 + 85 * 2) enemies.push(new White(60, 0, true), new White(230, 0, false)) + if(bg.delta === 2000 + 85 * 3) enemies.push(new White(60, 0, true)) + + if(bg.delta > 2200) + console.log(bg.delta); +} diff --git a/src/imgs/bg.png b/src/imgs/bg.png index c89e65c..cef05ec 100644 Binary files a/src/imgs/bg.png and b/src/imgs/bg.png differ diff --git a/src/imgs/bg2.xcf b/src/imgs/bg2.xcf new file mode 100644 index 0000000..04604c9 Binary files /dev/null and b/src/imgs/bg2.xcf differ diff --git a/src/imgs/old-bgs/1bg.png b/src/imgs/old-bgs/1bg.png new file mode 100644 index 0000000..c89e65c Binary files /dev/null and b/src/imgs/old-bgs/1bg.png differ diff --git a/src/imgs/start-screen0.png b/src/imgs/start-screen0.png new file mode 100644 index 0000000..f6d46d5 Binary files /dev/null and b/src/imgs/start-screen0.png differ diff --git a/src/imgs/start-screen1.png b/src/imgs/start-screen1.png new file mode 100644 index 0000000..8833a6a Binary files /dev/null and b/src/imgs/start-screen1.png differ diff --git a/src/imgs/start-screen2.png b/src/imgs/start-screen2.png new file mode 100644 index 0000000..472a5d2 Binary files /dev/null and b/src/imgs/start-screen2.png differ diff --git a/src/imgs/start-screen3.png b/src/imgs/start-screen3.png new file mode 100644 index 0000000..b759d13 Binary files /dev/null and b/src/imgs/start-screen3.png differ diff --git a/src/imgs/start-screen4.png b/src/imgs/start-screen4.png new file mode 100644 index 0000000..2e54248 Binary files /dev/null and b/src/imgs/start-screen4.png differ -- cgit v1.3.1