Spawning enemies, start Startscreen

16 files changed, 100 insertions, 12 deletions

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
--- a/src/imgs/bg.png
+++ b/src/imgs/bg.png
diff --git a/src/imgs/bg2.xcf b/src/imgs/bg2.xcf
new file mode 100644
index 0000000..04604c9
--- /dev/null
+++ b/src/imgs/bg2.xcf
diff --git a/src/imgs/old-bgs/1bg.png b/src/imgs/old-bgs/1bg.png
new file mode 100644
index 0000000..c89e65c
--- /dev/null
+++ b/src/imgs/old-bgs/1bg.png
diff --git a/src/imgs/start-screen0.png b/src/imgs/start-screen0.png
new file mode 100644
index 0000000..f6d46d5
--- /dev/null
+++ b/src/imgs/start-screen0.png
diff --git a/src/imgs/start-screen1.png b/src/imgs/start-screen1.png
new file mode 100644
index 0000000..8833a6a
--- /dev/null
+++ b/src/imgs/start-screen1.png
diff --git a/src/imgs/start-screen2.png b/src/imgs/start-screen2.png
new file mode 100644
index 0000000..472a5d2
--- /dev/null
+++ b/src/imgs/start-screen2.png
diff --git a/src/imgs/start-screen3.png b/src/imgs/start-screen3.png
new file mode 100644
index 0000000..b759d13
--- /dev/null
+++ b/src/imgs/start-screen3.png
diff --git a/src/imgs/start-screen4.png b/src/imgs/start-screen4.png
new file mode 100644
index 0000000..2e54248
--- /dev/null
+++ b/src/imgs/start-screen4.png