All enemies movement

50 files changed, 1030 insertions, 99 deletions

diff --git a/src/Animation.ts b/src/Animation.ts
index 13adb6c..820a6dd 100644
--- a/src/Animation.ts
+++ b/src/Animation.ts
@@ -5,18 +5,21 @@ export default class Anime extends Drawable {
   i = 0;
   j = 0;
 
-  constructor(drawable: Drawable, public frames: string[]) {
+  constructor(drawable: Drawable, public frames: Array<string | HTMLImageElement>) {
     super(drawable._x, drawable._y)
     this.width = drawable.width
     this.height = drawable.height
+    if (frames.length === 0) debugger
   }
 
   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; }
+    if (typeof this.frames[0] === "string") {
+      ctx.fillStyle = (this.frames as string[])[this.i];
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+    } else {
+      ctx.drawImage((this.frames as HTMLImageElement[])[this.i], this.x, this.y)
+    }
+    if (++this.j === 4) { this.i++; this.j = 0; }
     return this.i !== this.frames.length;
   }
 }
diff --git a/src/Drawable.ts b/src/Drawable.ts
index eccb5c3..9ed9a2a 100644
--- a/src/Drawable.ts
+++ b/src/Drawable.ts
@@ -1,4 +1,4 @@
-import { canvas, ctx } from "./consts";
+import { canvas, ctx, PLAYER_SIZE } from "./consts";
 import { IMGS } from "./Images";
 
 export default abstract class Drawable {
@@ -11,11 +11,27 @@ export default abstract class Drawable {
 
   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
+  collides(ws: Drawable[]): boolean {
+    if (this.width === 48 && ws.length > 0) {
+      // debugger
+      const alien = ws[0]
+      for (const square of this.squares) {
+        for (const s of alien.squares) {
+          if (square.x < s.x2 && square.x2 > s.x &&
+            square.y < s.y2 && square.y2 > s.y) console.log("aaa");
+        }
+      }
+    }
+    for (const w of ws) {
+      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;
@@ -49,8 +65,17 @@ export default abstract class Drawable {
       return
     }
     // Used only for Player
+    // const diff = Math.abs(IMGS.playerUp.height - (this.sprite as HTMLImageElement).height);
+    const left = this.sprite === IMGS.playerLeft
+    const right = this.sprite === IMGS.playerRight
+    const diff = left ? 1 : (right ? 2 : 0)
+
     if (val <= 15 + 24) this._y = 15 + 24;
-    else if (val + this.height >= canvas.height - 15) this._y = canvas.height - 15 - this.height;
+    // else if (val + this.height >= canvas.height - 15) this._y = canvas.height - 15 - this.height + diff;
+    else if (val + this.height >= canvas.height - 15) {
+      if (left || right) return
+      else this._y = canvas.height - 15 - this.height + diff;
+    }
     else this._y = val
   }
 
@@ -60,13 +85,17 @@ export default abstract class Drawable {
   /// Should be abstract but this is extended by Animation which doesnt move
   // abstract move(): boolean;
   move() { return true; };
+  isOutsideMap() { return this.x2 < 0 || this.y2 < 0 || this.x > canvas.width || this.y > canvas.height }
 
 }
 
 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
+    if (begetter.width === PLAYER_SIZE) {
+      console.log(begetter.x, begetter.y, begetter.width, begetter.height);
+    }
+    x = x ?? 0
+    y = y ?? 0
     super(x, y);
     this.change(x, y, width ?? begetter.width, height ?? begetter.height)
   }
@@ -75,14 +104,13 @@ export class Rectangle extends Drawable {
     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; }
+  get x() { return this.begetter.x + this._x; }
+  get y() { 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 }
+  get y2() { return this.y + this.height }
   sprite = "rgba(128,0,128, 0.5)"
 }
 // export abstract class Square {
diff --git a/src/Events.ts b/src/Events.ts
index d85e1c1..2a3e363 100644
--- a/src/Events.ts
+++ b/src/Events.ts
@@ -11,8 +11,9 @@ export const keys = {
   up: false,
   down: false,
   fire: false,
+  roll: false,
   repeat: false,
-  fps: 40,
+  fps: 50,
 }
 
 // window.onkeydown = window.onkeydown ?? ((e: KeyboardEvent) => e.repeat ? keys.fire = false : setKey(e.key, true))
@@ -25,9 +26,11 @@ function setKey(key: string, val: boolean, repeat: boolean) {
   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 ([" "].includes(key)) keys.roll = val;
   else if (["r"].includes(key)) location.reload();
   else if (["f"].includes(key)) keys.fps = 50;
   else if (["g"].includes(key)) keys.fps = 1;
+  else if (["c"].includes(key)) keys.fps = 12;
   // console.log(key, val ? "keydown" : "keyup")
 }
 
diff --git a/src/Highscore.ts b/src/Highscore.ts
index 563c16c..509289d 100644
--- a/src/Highscore.ts
+++ b/src/Highscore.ts
@@ -5,6 +5,7 @@ import { Background } from "./drawables/Background";
 import { Selector } from "./drawables/Selector";
 import { keys } from "./Events";
 import { IMGS } from "./Images";
+import { getPlace, getStorage, Score, setStorage } from "./Storage";
 
 export default class Highscore extends Drawable {
   width = canvas.width
@@ -13,16 +14,18 @@ export default class Highscore extends Drawable {
   imgPixels: ImageData | null = null;
   selector = new Selector(12, 37);
   _bx = 12
-  _by = 27
+  _by = 37
   moving = false;
   dx = 32;
   dy = 26;
   name = [' ', ' ', ' '];
   lastTimestamp = 0;
+  place: string[] | null = null;
+  score = 0
   constructor() {
     super(0, 0)
   }
-  drawHg(bg: Background) {
+  drawHg(bg: Background, s: number) {
     if (this.imgPixels == null) {
       const imgPixels = bg.getImageData();
       for (let y = 0; y < imgPixels.height; y++) {
@@ -36,6 +39,7 @@ export default class Highscore extends Drawable {
       }
       this.imgPixels = imgPixels;
     }
+    this.score = s
     ctx.putImageData(this.imgPixels, 0, 24, 0, 0, this.imgPixels.width, this.imgPixels.height);
     this.selector.draw()
     let x = 17, y = 40;
@@ -50,12 +54,12 @@ export default class Highscore extends Drawable {
     while (x < 275) { ctx.drawImage(IMGS.font.yellow['-'], x, y); x += this.dx / 2; }
     x = 17;
     y += this.dy;
-    const botTxt = ['2', 't', 'h', ' ', '0', '0', '0', '0', '7', '5', '9', ' ', ...this.name, ' ', 'z', 'y'];
+    if (this.place == null) this.place = getPlace(this.score).split('');
+    const botTxt = [...this.place, ' ', ...this.score.toString().padStart(7, '0').split(''), ' ', ...this.name, ' ', '0', '1'];
     for (let char of botTxt) {
       try {
-      ctx.drawImage(IMGS.font.yellow[char], x, y);
-
-      } catch(e) {
+        ctx.drawImage(IMGS.font.yellow[char], x, y);
+      } catch (e) {
         debugger
       }
       x += this.dx / 2;
@@ -82,11 +86,22 @@ export default class Highscore extends Drawable {
         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] = ' '
+            if (this.name[i] !== " ") { this.name[i] = ' '; break }
           }
         }
         else if (char === "ed") {
-          console.log("%csaving", "color: darkblue; font-size: 1.3em; background-color: darkgreen;");
+          console.log(this.score, this.name, this.place);
+          if (this.place == null) throw Error("Place is null");
+          const place = 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);
+          }
         }
         else if (this.name.filter(a => a !== ' ').length === 3) this.name[2] = char;
         else {
@@ -108,17 +123,34 @@ export default class Highscore extends Drawable {
       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)
+    if (val < 12)
+      this._bx = 12
+    else if (val > 12 + this.dx * 8)
+      this._bx = 12 + this.dx * 8
+    else
       this._bx = val
+    // if (val > 10 && val < 17 + this.dx * 8)
+    //   this._bx = val
+    // else
+    //   this._bx = 12;
   }
   set by(val) {
-    if (val > 30 && val < 40 + this.dy * 3)
+    if (val < 37)
+      this._by = 37
+    else if (val > 37 + this.dy * 3)
+      this._by = 37 + this.dy * 3
+    else
       this._by = val
+    // if (val > 30 && val < 40 + this.dy * 3)
+    //   this._by = val
+    // else
+    //   this._by = 37;
   }
 } 
diff --git a/src/Images.ts b/src/Images.ts
index a6bc1e0..fce97ea 100644
--- a/src/Images.ts
+++ b/src/Images.ts
@@ -2,7 +2,7 @@
 //   "/src/imgs/bg2.png",
 //   "/src/imgs/topbar.png",
 // ];
-import { allChars } from "./consts";
+import { allChars, alphabet } from "./consts";
 import { toKebabCase } from "./helpers";
 
 export const IMGS = {
@@ -27,12 +27,42 @@ export const IMGS = {
   bigCircleLeftToDown1: {} as HTMLImageElement,
   bigCircleLeftToDown2: {} as HTMLImageElement,
   bigCircleLeftToDown3: {} as HTMLImageElement,
+  bigStrangeUp0: {} as HTMLImageElement,
+  bigStrangeUp1: {} as HTMLImageElement,
   simpleDown: {} as HTMLImageElement,
   simpleRot1: {} as HTMLImageElement,
   simpleRot2: {} as HTMLImageElement,
   simpleRot3: {} as HTMLImageElement,
   simpleRot4: {} as HTMLImageElement,
   simpleUp: {} as HTMLImageElement, // po 4 klatki na sprite
+  redRight: {} as HTMLImageElement,
+  redRightToDown: {} as HTMLImageElement,
+  redRightToUp: {} as HTMLImageElement,
+  redDown: {} as HTMLImageElement,
+  redDownToLeft: {} as HTMLImageElement,
+  redDownToRight: {} as HTMLImageElement,
+  redLeft: {} as HTMLImageElement,
+  redLeftToUp: {} as HTMLImageElement,
+  redLeftToDown: {} as HTMLImageElement,
+  redUp: {} as HTMLImageElement,
+  redUpToRight: {} as HTMLImageElement,
+  redUpToLeft: {} as HTMLImageElement,
+  greenUp: {} as HTMLImageElement,
+  greenUpToRight: {} as HTMLImageElement,
+  greenUpToLeft: {} as HTMLImageElement,
+  greenRight: {} as HTMLImageElement,
+  greenRightToDown: {} as HTMLImageElement,
+  greenDown: {} as HTMLImageElement,
+  greenDownToLeft: {} as HTMLImageElement,
+  greenLeft: {} as HTMLImageElement,
+  greenLeftToUp: {} as HTMLImageElement,
+  whiteDown: {} as HTMLImageElement,
+  whiteTurnLeft: {} as HTMLImageElement,
+  whiteTurnRight: {} as HTMLImageElement,
+  whiteStrangeLeft: {} as HTMLImageElement,
+  whiteStrangeRight: {} as HTMLImageElement,
+  planeIcon: {} as HTMLImageElement,
+  rollIcon: {} as HTMLImageElement,
   font: {
     white: {} as any,
     yellow: {} as any,
@@ -40,6 +70,9 @@ export const IMGS = {
     red: {} as any,
     green: {} as any,
     purple: {} as any,
+    small: {
+      white: {} as any,
+    },
     ' ': {} as HTMLImageElement,
   },
   selector: {} as HTMLImageElement,
@@ -52,6 +85,7 @@ export default async function loadAllImages() {
     IMGS[key as keyof typeof IMGS] = await asyncImageLoader("/src/imgs/" + toKebabCase(key) + ".png") as any
   }
   for (const color of ['yellow', 'white']) {
+    // for (const color of ['white']) {
     for (const char of allChars) {
       (((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader("/src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any
     }
@@ -59,6 +93,9 @@ 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")
+  for (const c of allChars.filter(ch => !alphabet.includes(ch))) {
+    IMGS.font.small.white[c] = await asyncImageLoader("/src/imgs/font/small/white/" + c + ".png");
+  }
 }
 async function asyncImageLoader(url: string): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
diff --git a/src/Player.ts b/src/Player.ts
index 8890466..171f704 100644
--- a/src/Player.ts
+++ b/src/Player.ts
@@ -1,6 +1,6 @@
 import Anime from "./Animation";
 import Bullet from "./drawables/Bullet";
-import { BULLET_VEL, ctx, FIRE_DELAY, PLAYER_SIZE, PLAYER_VEL } from "./consts";
+import { BULLET_VEL, canvas, ctx, FIRE_DELAY, PLAYER_VEL } from "./consts";
 import Drawable, { Rectangle } from "./Drawable";
 import { keys } from "./Events";
 import { IMGS } from "./Images";
@@ -9,8 +9,8 @@ export default class Player extends Drawable {
   static startx = 250;
   static starty = 100;
 
-  width = PLAYER_SIZE;
-  height = PLAYER_SIZE;
+  width = IMGS.playerUp.width;
+  height = IMGS.playerUp.height;
   sprite = IMGS.empty;
   xvel = 0;
   yvel = 0;
@@ -19,6 +19,7 @@ export default class Player extends Drawable {
   squares: Rectangle[] = [new Rectangle(this)]
 
   lifes = 3;
+  power = 2;
 
   constructor() {
     super(Player.startx, Player.starty)
@@ -48,14 +49,14 @@ export default class Player extends Drawable {
     else if (keys.right) this.sprite = IMGS.playerRight
     else if (keys.left) this.sprite = IMGS.playerLeft
     else this.sprite = IMGS.playerUp
+    if (this.x + this.xvel <= 35) this.sprite = IMGS.playerUp
+    else if (this.x + this.xvel + this.width >= canvas.width - 35) this._x = canvas.width - 35 - this.width;
 
-    this.x += this.xvel;
+    this.width = this.sprite.width;
+    this.height = this.sprite.height;
+    this.squares = [new Rectangle(this)]
     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
+    this.x += this.xvel;
 
     return true;
   }
diff --git a/src/Storage.ts b/src/Storage.ts
new file mode 100644
index 0000000..50d70a2
--- /dev/null
+++ b/src/Storage.ts
@@ -0,0 +1,40 @@
+// export ine
+export interface Score {
+  name: string[];
+  score: string;
+  world: string;
+}
+export type Storage = Score[]
+export function getStorage(): Storage {
+  const s = JSON.parse(localStorage.getItem("storage") ?? "{}");
+  const storage = [
+    { name: "...".split(''), score: "40000", world: "03" },
+    { name: "...".split(''), score: "35000", world: "02" },
+    { name: "...".split(''), score: "30000", world: "01" },
+    { name: "...".split(''), score: "25000", world: "01" },
+    { name: "...".split(''), score: "20000", world: "01" },
+    { name: "...".split(''), score: "15000", world: "01" },
+  ] as Storage;
+  if (s[1] == null) return storage
+  return s;
+}
+
+export function setStorage(s: Storage) {
+  debugger
+  localStorage.setItem("storage", JSON.stringify(s))
+}
+
+export function getPlace(s: number): string {
+  const storage = getStorage();
+  let place = 7
+  for (let i = 1; i <= storage.length; i++) {
+    let sc = parseInt(storage[i - 1]['score']);
+    if (s > sc) {
+      place = i; break;
+    }
+  }
+  if (place === 1) return "1st";
+  else if (place === 2) return "2nd";
+  else if (place === 3) return "3rd";
+  else return place + "th";
+}
diff --git a/src/consts.ts b/src/consts.ts
index 317aa9a..63f9917 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -11,3 +11,4 @@ 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']
 export const allChars = [...alphabet, '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+
diff --git a/src/drawables/Bullet.ts b/src/drawables/Bullet.ts
index 68f55e8..a745a06 100644
--- a/src/drawables/Bullet.ts
+++ b/src/drawables/Bullet.ts
@@ -1,19 +1,21 @@
 import { canvas } from "../consts";
-import Drawable from "../Drawable";
+import Drawable, { Rectangle } from "../Drawable";
 
 export default class Bullet extends Drawable {
   static width = 2;
   static height = 5;
   static color = "black";
+  width = 2;
+  height = 5;
   color = "black";
   sprite = "black";
 
-  squares = [this]
+  squares: Rectangle[] = [new Rectangle(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;
+    // this.width = Bullet.width;
+    // this.height = Bullet.height;
   }
 
   move(): boolean {
diff --git a/src/drawables/TopBar.ts b/src/drawables/TopBar.ts
index f021f77..8772050 100644
--- a/src/drawables/TopBar.ts
+++ b/src/drawables/TopBar.ts
@@ -6,12 +6,36 @@ export class TopBar extends Drawable {
   sprite = IMGS.topbar;
   width = canvas.width
   height = 24
+  score = 0;
+  lives = 0;
+  rolls = 0;
+  highscore = 0;
   constructor() {
     super(0, 0)
   }
+  setData(score: number, lives: number, rolls: number, highscore?: number) {
+    this.score = score
+    this.lives = lives
+    this.rolls = rolls
+    this.highscore = highscore ?? this.highscore
+  }
   draw() {
     if (this.sprite.src == null) this.sprite = IMGS.topbar;
-    ctx.drawImage(this.sprite, 0, 0)
+    ctx.drawImage(this.sprite, 0, 0);
+    [...this.score.toString().padStart(7, '0')].forEach((char, i) => {
+      ctx.imageSmoothingEnabled = false
+      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.imageSmoothingEnabled = false
+      ctx.drawImage(IMGS.font.small.white[char], 240 + i * 8, 8)
+    });
   }
 }
 
diff --git a/src/enemies/BigCircle.ts b/src/enemies/BigCircle.ts
index 233491d..5525b13 100644
--- a/src/enemies/BigCircle.ts
+++ b/src/enemies/BigCircle.ts
@@ -1,6 +1,6 @@
 import { canvas } from "../consts";
 import { Rectangle } from "../Drawable";
-import { keys } from "../Events";
+// import { keys } from "../Events";
 import { IMGS } from "../Images";
 import Enemy from "./Enemy";
 
@@ -8,7 +8,9 @@ export default class BigCircle extends Enemy {
   width = 48
   height = 40
   sprite: HTMLImageElement | string = IMGS.bigCircleDown;
+  strSprite = "bigCircleDown"
   vel = 2
+  health = 20
 
   phase = 0;
 
@@ -28,8 +30,9 @@ export default class BigCircle extends Enemy {
         if (this.y2 > 124) this.phase++
         break;
       case 1:
-        keys.fps = 1
-        this.sprite = IMGS.bigCircleDownToRight1;
+        // keys.fps = 1
+        // this.sprite = IMGS.bigCircleDownToRight1;
+        this.strSprite = "bigCircleDownToRight1"
         this.squares = this.allSqaures.bigCircleDownToRight1;
         this.counter = 0;
         this.phase++;
@@ -40,7 +43,8 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 3:
-        this.sprite = IMGS.bigCircleDownToRight2;
+        // this.sprite = IMGS.bigCircleDownToRight2;
+        this.strSprite = "bigCircleDownToRight2";
         this.squares = this.allSqaures.bigCircleDownToRight2;
         this.counter = 0;
         this.phase++;
@@ -51,7 +55,8 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 5:
-        this.sprite = IMGS.bigCircleDownToRight3;
+        // this.sprite = IMGS.bigCircleDownToRight3;
+        this.strSprite = "bigCircleDownToRight3";
         this.squares = this.allSqaures.bigCircleDownToRight3;
         this.counter = 0;
         this.phase++;
@@ -62,18 +67,21 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 7:
-        this.sprite = IMGS.bigCircleRight;
+        // this.sprite = IMGS.bigCircleRight;
+        this.strSprite = "bigCircleRight";
         this.squares = this.allSqaures.bigCircleRight;
         this.phase++;
         break;
       case 8:
-        keys.fps = 50
+        // keys.fps = 50
         xShift = this.vel;
-        if(this.x2 > 184) this.phase++;
+        if (this.x2 > 184) this.phase++;
         break;
       case 9:
-        keys.fps = 1
-        this.sprite = IMGS.bigCircleRightToUp1; 
+        // keys.fps = 1
+        // this.sprite = IMGS.bigCircleRightToUp1;
+        this.strSprite = "bigCircleRightToUp1";
+        this.squares = this.allSqaures.bigCircleRightToUp1;
         this.phase++;
         this.counter = 0;
         break;
@@ -83,7 +91,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 11:
-        this.sprite = IMGS.bigCircleRightToUp2; 
+        // this.sprite = IMGS.bigCircleRightToUp2;
+        this.strSprite = "bigCircleRightToUp2";
+        this.squares = this.allSqaures.bigCircleRightToUp2;
         this.phase++;
         this.counter = 0;
         break;
@@ -93,7 +103,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 13:
-        this.sprite = IMGS.bigCircleRightToUp3; 
+        // this.sprite = IMGS.bigCircleRightToUp3;
+        this.strSprite = "bigCircleRightToUp3";
+        this.squares = this.allSqaures.bigCircleRightToUp3;
         this.phase++;
         this.counter = 0;
         break;
@@ -103,17 +115,21 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 15:
-        this.sprite = IMGS.bigCircleUp; 
+        // this.sprite = IMGS.bigCircleUp;
+        this.strSprite = "bigCircleUp";
+        this.squares = this.allSqaures.bigCircleUp;
         this.phase++;
         break;
       case 16:
         yShift = -this.vel;
-        if(this.y < 50) this.phase++;
+        if (this.y < 50) this.phase++;
         break;
-        // uptoleft at 77 + 24 + ~8
-        // leftToDown at 268
+      // uptoleft at 77 + 24 + ~8
+      // leftToDown at 268
       case 17:
-        this.sprite = IMGS.bigCircleUpToLeft1;
+        // this.sprite = IMGS.bigCircleUpToLeft1;
+        this.strSprite = "bigCircleUpToLeft1";
+        this.squares = this.allSqaures.bigCircleUpToLeft1;
         this.phase++;
         this.counter = 0;
         break;
@@ -123,7 +139,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 19:
-        this.sprite = IMGS.bigCircleUpToLeft2;
+        // this.sprite = IMGS.bigCircleUpToLeft2;
+        this.strSprite = "bigCircleUpToLeft2";
+        this.squares = this.allSqaures.bigCircleUpToLeft2;
         this.phase++;
         this.counter = 0;
         break;
@@ -133,7 +151,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 21:
-        this.sprite = IMGS.bigCircleUpToLeft3;
+        // this.sprite = IMGS.bigCircleUpToLeft3;
+        this.strSprite = "bigCircleUpToLeft3";
+        this.squares = this.allSqaures.bigCircleUpToLeft3;
         this.phase++;
         this.counter = 0;
         break;
@@ -143,7 +163,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 23:
-        this.sprite = IMGS.bigCircleLeft;
+        // this.sprite = IMGS.bigCircleLeft;
+        this.strSprite = "bigCircleLeft";
+        this.squares = this.allSqaures.bigCircleLeft;
         this.phase++;
         this.counter = 0;
         break;
@@ -152,7 +174,9 @@ export default class BigCircle extends Enemy {
         if (this.x < 49) this.phase++;
         break;
       case 25:
-        this.sprite = IMGS.bigCircleLeftToDown1;
+        // this.sprite = IMGS.bigCircleLeftToDown1;
+        this.strSprite = "bigCircleLeftToDown1";
+        this.squares = this.allSqaures.bigCircleLeftToDown1;
         this.phase++;
         this.counter = 0;
         break;
@@ -162,7 +186,9 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 27:
-        this.sprite = IMGS.bigCircleLeftToDown2;
+        // this.sprite = IMGS.bigCircleLeftToDown2;
+        this.strSprite = "bigCircleLeftToDown2";
+        this.squares = this.allSqaures.bigCircleLeftToDown2;
         this.phase++;
         this.counter = 0;
         break;
@@ -172,17 +198,23 @@ export default class BigCircle extends Enemy {
         if (this.counter++ === 3) this.phase++;
         break;
       case 29:
-        this.sprite = IMGS.bigCircleLeftToDown3;
+        // this.sprite = IMGS.bigCircleLeftToDown3;
+        this.strSprite = "bigCircleLeftToDown3";
+        this.squares = this.allSqaures.bigCircleLeftToDown3;
         this.phase++;
         this.counter = 0;
         break;
       case 30:
+        // debugger
         xShift = -this.vel
         yShift = this.vel
         if (this.counter++ === 3) this.phase++;
         break;
       case 31:
-        this.sprite = IMGS.bigCircleDown;
+        // this.sprite = IMGS.bigCircleDown;
+        // TODO: IMPORANT, set sprite by strSprite and get red spites
+        this.strSprite = "bigCircleDown";
+        this.squares = this.allSqaures.bigCircleDown;
         this.phase++;
         this.counter = 0;
         break;
@@ -201,11 +233,22 @@ export default class BigCircle extends Enemy {
   }
 
   readonly allSqaures = {
-     bigCircleDown: [new Rectangle(this, 14, 0, 20, 8), new Rectangle(this, 20, 0, 8, 40), new Rectangle(this, 0, 22, 48, 12)],
-     bigCircleDownToRight1: [new Rectangle(this, 4, 0, 14, 16), new Rectangle(this, 14, 10, 24, 20), new Rectangle(this, 0, 20, 24, 20)],
-     bigCircleDownToRight2: [new Rectangle(this, 0, 0, 14, 14), new Rectangle(this, 14, 14, 22, 22), new Rectangle(this, 28, 6, 14, 14), new Rectangle(this, 8, 28, 12, 14)],
-     bigCircleDownToRight3: [new Rectangle(this, 0, 2, 10, 22), new Rectangle(this, 10, 12, 30, 8), new Rectangle(this, 26, 0, 16, 12), new Rectangle(this, 18, 20, 24, 10), new Rectangle(this, 14, 30, 16, 12)],
-     bigCircleRight: [ new Rectangle(this, 0, 14, 8, 16), new Rectangle(this, 0, 18, 44, 8), new Rectangle(this, 22, 0, 14, 43), ],
+    bigCircleDown: [new Rectangle(this, 14, 0, 20, 8), new Rectangle(this, 20, 0, 8, 40), new Rectangle(this, 0, 22, 48, 12)],
+    bigCircleDownToRight1: [new Rectangle(this, 4, 0, 14, 16), new Rectangle(this, 14, 10, 24, 20), new Rectangle(this, 0, 20, 24, 20)],
+    bigCircleDownToRight2: [new Rectangle(this, 0, 0, 14, 14), new Rectangle(this, 14, 14, 22, 22), new Rectangle(this, 28, 6, 14, 14), new Rectangle(this, 8, 28, 12, 14)],
+    bigCircleDownToRight3: [new Rectangle(this, 0, 2, 10, 22), new Rectangle(this, 10, 12, 30, 8), new Rectangle(this, 26, 0, 16, 12), new Rectangle(this, 18, 20, 24, 10), new Rectangle(this, 14, 30, 16, 12)],
+    bigCircleRight: [new Rectangle(this, 0, 14, 8, 16), new Rectangle(this, 8, 18, 36, 8), new Rectangle(this, 22, 0, 16, 43)],
+    bigCircleRightToUp1: [new Rectangle(this, 0, 18, 10, 22), new Rectangle(this, 10, 20, 30, 10), new Rectangle(this, 28, 30, 14, 12), new Rectangle(this, 16, 0, 14, 20), new Rectangle(this, 30, 12, 12, 8)],
+    bigCircleRightToUp2: [new Rectangle(this, 0, 28, 12, 14), new Rectangle(this, 12, 6, 22, 22), new Rectangle(this, 6, 0, 12, 12), new Rectangle(this, 28, 24, 12, 12)],
+    bigCircleRightToUp3: [new Rectangle(this, 6, 28, 12, 12), new Rectangle(this, 0, 2, 24, 14), new Rectangle(this, 12, 16, 26, 10), new Rectangle(this, 24, 10, 10, 6), new Rectangle(this, 26, 26, 10, 4)],
+    bigCircleUp: [new Rectangle(this, 14, 32, 20, 8), new Rectangle(this, 20, 0, 8, 32), new Rectangle(this, 0, 6, 48, 12)],
+    bigCircleUpToLeft1: [new Rectangle(this, 20, 28, 14, 10), new Rectangle(this, 14, 2, 12, 24), new Rectangle(this, 26, 0, 12, 16), new Rectangle(this, 0, 10, 12, 20)],
+    bigCircleUpToLeft2: [new Rectangle(this, 28, 28, 12, 12), new Rectangle(this, 6, 6, 22, 22), new Rectangle(this, 22, 0, 12, 12), new Rectangle(this, 0, 22, 12, 14)],
+    bigCircleUpToLeft3: [new Rectangle(this, 32, 24, 10, 22), new Rectangle(this, 24, 28, 8, 8), new Rectangle(this, 0, 18, 26, 16), new Rectangle(this, 18, 0, 12, 16), new Rectangle(this, 12, 8, 6, 10), new Rectangle(this, 0, 32, 14, 17)],
+    bigCircleLeft: [new Rectangle(this, 36, 12, 8, 16), new Rectangle(this, 0, 16, 36, 8), new Rectangle(this, 8, 0, 14, 41)],
+    bigCircleLeftToDown1: [new Rectangle(this, 32, 5, 10, 21), new Rectangle(this, 2, 16, 30, 6), new Rectangle(this, 0, 0, 14, 16), new Rectangle(this, 0, 22, 24, 10), new Rectangle(this, 12, 32, 16, 10)],
+    bigCircleLeftToDown2: [new Rectangle(this, 28, 0, 12, 14), new Rectangle(this, 6, 14, 22, 22), new Rectangle(this, 22, 30, 12, 12), new Rectangle(this, 0, 6, 10, 12)],
+    bigCircleLeftToDown3: [new Rectangle(this, 20, 2, 14, 10), new Rectangle(this, 18, 12, 8, 26), new Rectangle(this, 26, 24, 12, 14), new Rectangle(this, 0, 12, 14, 12), new Rectangle(this, 14, 24, 4, 14), new Rectangle(this, 4, 24, 10, 6), new Rectangle(this, 12, 14, 8, 14)],
   };
 
 }
diff --git a/src/enemies/Enemy.ts b/src/enemies/Enemy.ts
index 607a612..d85b11e 100644
--- a/src/enemies/Enemy.ts
+++ b/src/enemies/Enemy.ts
@@ -5,8 +5,10 @@ import Drawable, { Rectangle } from "../Drawable";
 export default abstract class Enemy extends Drawable {
   squares: Array<Rectangle> = [new Rectangle(this)]
   points = 5;
+  health = 2
+  deathAnim: (string | HTMLImageElement)[] = ["red"]
 
   shoot(bullet: Bullet[]) {
-    bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y2, 0, BULLET_VEL, true))
+    bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y2, 0, BULLET_VEL, false))
   }
 }
diff --git a/src/enemies/Green1.ts b/src/enemies/Green1.ts
new file mode 100644
index 0000000..034ab15
--- /dev/null
+++ b/src/enemies/Green1.ts
@@ -0,0 +1,59 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class Green1 extends Enemy {
+  sprite = IMGS.greenUp;
+  width = IMGS.greenUp.width;
+  height = IMGS.greenUp.height;
+  vel = 2
+  phase = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  constructor(x: number, y: number, public left: boolean) {
+    super(x, y)
+  }
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dy = -this.vel
+        if (this.y < 110) this.phase++;
+        break;
+      case 1:
+        dx = this.left ? -this.vel : this.vel
+        dy = -this.vel
+        if (this.y < 58) this.phase++
+        break;
+      case 2:
+        this.sprite = this.left ? IMGS.greenUpToLeft : IMGS.greenUpToRight;
+        this.phase++;
+        break;
+      case 3:
+        dx = this.left ? -this.vel : this.vel
+        dy = -this.vel
+        if (this.y < 31) this.phase++
+        break;
+      case 4:
+        this.sprite = IMGS.greenDown
+        this.phase++;
+        break;
+      case 5:
+        dy = this.vel
+        break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap()
+  }
+}
diff --git a/src/enemies/Green2.ts b/src/enemies/Green2.ts
new file mode 100644
index 0000000..b4d9ddc
--- /dev/null
+++ b/src/enemies/Green2.ts
@@ -0,0 +1,113 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class Green2 extends Enemy {
+  sprite = IMGS.greenDown;
+  width = IMGS.greenDown.width;
+  height = IMGS.greenDown.height;
+  vel = 2
+  phase = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  constructor(x: number, y: number, public left: boolean) {
+    super(x, y)
+  }
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dy = this.vel
+        if (this.y > 163) this.phase++
+        break;
+      case 1:
+        this.sprite = IMGS.greenDownToLeft
+        this.phase++
+        this.i = 0
+        break;
+      case 2:
+        dx = -this.vel
+        dy = this.vel
+        if (this.i++ === 7) this.phase++
+        break;
+      case 3:
+        this.sprite = IMGS.greenLeft
+        this.phase++
+        this.i = 0
+        break;
+      case 4:
+        dx = -this.vel
+        if (this.x < (this.left ? 10 : 10 + 80)) this.phase++
+        break;
+      case 5:
+        this.sprite = IMGS.greenLeftToUp
+        this.phase++
+        this.i = 0
+        break;
+      case 6:
+        dx = -this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++
+        break;
+      case 7:
+        this.sprite = IMGS.greenUp
+        this.phase++
+        this.i = 0
+        break;
+      case 8:
+        dy = -this.vel
+        if (this.y < 88) this.phase++
+        break;
+      case 9:
+        this.sprite = IMGS.greenUpToRight
+        this.phase++
+        this.i = 0
+        break;
+      case 10:
+        dx = this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++
+        break;
+      case 11:
+        this.sprite = IMGS.greenRight
+        this.phase++
+        this.i = 0
+        break;
+      case 12:
+        dx = this.vel
+        if (this.x > (this.left ? 176 : 176 + 80)) this.phase++
+        break;
+      case 13:
+        this.sprite = IMGS.greenRightToDown
+        this.phase++
+        this.i = 0
+        break;
+      case 14:
+        dx = this.vel
+        dy = this.vel
+        if (this.i++ === 7) this.phase++
+        break;
+      case 15:
+        this.sprite = IMGS.greenDown
+        this.phase++
+        this.i = 0
+        break;
+      case 16:
+        dy = this.vel
+        break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap()
+  }
+}
diff --git a/src/enemies/Red1.ts b/src/enemies/Red1.ts
new file mode 100644
index 0000000..67a8729
--- /dev/null
+++ b/src/enemies/Red1.ts
@@ -0,0 +1,193 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class Red1 extends Enemy {
+  sprite = IMGS.redRight;
+  width = IMGS.redRight.width;
+  height = IMGS.redRight.height;
+  vel = 3
+  phase = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dx = this.vel;
+        if (this.x2 > 145) this.phase++;
+        // if (this.i++ === 19) this.phase++;
+        break;
+      case 1:
+        this.sprite = IMGS.redRightToDown;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 2:
+        dx = this.vel;
+        dy = this.vel;
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 3:
+        this.sprite = IMGS.redDown;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 4:
+        dy = this.vel;
+        // if (this.y > 125) this.phase++;
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 5:
+        this.sprite = IMGS.redDownToLeft;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 6:
+        dx = -this.vel;
+        dy = this.vel;
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 7:
+        this.sprite = IMGS.redLeft;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 8:
+        dx = -this.vel;
+        // if (this.x < 60) this.phase++;
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 9:
+        this.sprite = IMGS.redLeftToUp;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 10:
+        dx = -this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 11:
+        this.sprite = IMGS.redUp;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 12:
+        dy = -this.vel
+        // if (this.y < 80) this.phase++;
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 13:
+        this.sprite = IMGS.redUpToRight;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 14:
+        dx = this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 15:
+        this.sprite = IMGS.redRight;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 16:
+        dx = this.vel
+        if (this.x2 > 263) this.phase++;
+        // if (this.i++ === 19) this.phase++;
+        break;
+      case 17:
+        this.sprite = IMGS.redRightToDown;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 18:
+        dx = this.vel
+        dy = this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 19:
+        this.sprite = IMGS.redDown;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 20:
+        dy = this.vel;
+        // if (this.y2 > 150) this.phase++;
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 21:
+        this.sprite = IMGS.redDownToLeft;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 22:
+        dx = -this.vel
+        dy = this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 23:
+        this.sprite = IMGS.redLeft;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 24:
+        dx = -this.vel
+        // if (this.x < 175) this.phase++;
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 25:
+        this.sprite = IMGS.redLeftToUp;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 26:
+        dx = -this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 27:
+        this.sprite = IMGS.redUp;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 28:
+        dy = -this.vel
+        // if (this.y < 70) this.phase++
+        if (this.i++ === 19) this.phase++;
+        break;
+      case 29:
+        this.sprite = IMGS.redUpToRight;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 30:
+        dx = this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 31:
+        this.sprite = IMGS.redRight;
+        this.phase++;
+        this.i = 0;
+        break;
+      case 32:
+        dx = this.vel
+        break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap()
+  }
+}
diff --git a/src/enemies/Red2.ts b/src/enemies/Red2.ts
new file mode 100644
index 0000000..6cfa672
--- /dev/null
+++ b/src/enemies/Red2.ts
@@ -0,0 +1,114 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class Red2 extends Enemy {
+  sprite = IMGS.redDown;
+  width = IMGS.redDown.width;
+  height = IMGS.redDown.height;
+  vel = 2;
+  phase = 0;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  constructor(x: number, y: number, public left: boolean) {
+    super(x, y)
+  }
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dy = this.vel;
+        if (this.y > 163) this.phase++;
+        break;
+      case 1:
+        this.sprite = IMGS.redDownToRight
+        this.phase++
+        this.i = 0;
+        break;
+      case 2:
+        dx = this.vel
+        dy = this.vel
+        if (this.i++ === 9) this.phase++;
+        break;
+      case 3:
+        this.sprite = IMGS.redRight
+        this.phase++
+        this.i = 0;
+        break;
+      case 4:
+        dx = this.vel
+        if (this.x > (this.left ? 285 : 285 + 80)) this.phase++;
+        break;
+      case 5:
+        this.sprite = IMGS.redRightToUp
+        this.phase++
+        this.i = 0;
+        break;
+      case 6:
+        dx = this.vel
+        dy = -this.vel
+        if (this.i++ === 13) this.phase++;
+        break;
+      case 7:
+        this.sprite = IMGS.redUp
+        this.phase++;
+        break;
+      case 8:
+        dy = -this.vel
+        if (this.y < 98) this.phase++
+        break;
+      case 9:
+        this.sprite = IMGS.redUpToLeft
+        this.phase++
+        this.i = 0;
+        break;
+      case 10:
+        dx = -this.vel
+        dy = -this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 11:
+        this.sprite = IMGS.redLeft
+        this.phase++
+        this.i = 0;
+        break;
+      case 12:
+        dx = -this.vel
+        if (this.x < (this.left ? 210 : 210 + 80)) this.phase++
+        break;
+      case 13:
+        this.sprite = IMGS.redLeftToDown
+        this.phase++
+        this.i = 0
+        break;
+      case 14:
+        dx = -this.vel
+        dy = this.vel
+        if (this.i++ === 7) this.phase++;
+        break;
+      case 15:
+        this.sprite = IMGS.redDown
+        this.phase++
+        this.i = 0
+        break;
+      case 16:
+        dy = this.vel
+        console.log(this.x);
+
+        break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap() && this.phase > 12
+  }
+}
+
diff --git a/src/enemies/Straight.ts b/src/enemies/Straight.ts
index c397332..895ec01 100644
--- a/src/enemies/Straight.ts
+++ b/src/enemies/Straight.ts
@@ -1,17 +1,39 @@
-import { canvas, PLAYER_VEL } from "../consts";
+import { canvas } from "../consts";
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
 import Enemy from "./Enemy";
 
 export default class Straight extends Enemy {
-  width = 20;
-  height = 20;
-  sprite = "blue";
-  vel = PLAYER_VEL * 0.8
+  sprite = IMGS.simpleDown;
+  width = IMGS.simpleDown.width;
+  height = IMGS.simpleDown.height;
+  vel = 2
+  phase = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
 
   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; }
+    let dy = 0;
 
+    if (this.phase === 0) {
+      dy = this.vel;
+      if (this.y2 > canvas.height - 15) this.phase++;
+    }
+    if (this.phase === 1) {
+      //@ts-expect-error
+      this.sprite = IMGS["simpleRot" + this.spriteNum]
+      if (this.i++ === 4) { this.i = 0; this.spriteNum++; }
+      if (this.spriteNum === 5) { this.sprite = IMGS.simpleUp; this.phase++; }
+    }
+    if (this.phase === 2) {
+      dy = -this.vel;
+    }
+
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
     return this.y + this.height < 0
   }
 }
diff --git a/src/enemies/Strange.ts b/src/enemies/Strange.ts
new file mode 100644
index 0000000..69fd9c0
--- /dev/null
+++ b/src/enemies/Strange.ts
@@ -0,0 +1,92 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class Strange extends Enemy {
+  sprite = IMGS.bigStrangeUp1;
+  width = IMGS.bigStrangeUp1.width;
+  height = IMGS.bigStrangeUp1.height;
+  vel = 1
+  phase = 0;
+  spriteCounter = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dy = -this.vel
+        if (this.y < 105) this.phase++;
+        break;
+      case 1:
+        this.phase++;
+        break;
+      case 2:
+        dx = this.vel
+        dy = -this.vel
+        if (this.x > 182) this.phase++;
+        break;
+      case 3:
+        this.vel = 3
+        dx = this.vel
+        if (this.x > 210) this.phase++;
+        // if (this.x > 210) debugger
+        break;
+      case 4:
+        this.vel = 2;
+        dx = this.vel
+        dy = -this.vel
+        if (this.y < 70) this.phase++;
+        break;
+      case 5:
+        dx = -this.vel
+        if (this.x < 175) this.phase++;
+        break;
+      case 6:
+        dx = -this.vel
+        dy = -this.vel
+        if (this.y < 45) this.phase++;
+        break;
+      case 7:
+        dx = -this.vel
+        if (this.x < 60) this.phase++;
+        break;
+      case 8:
+        dx = -this.vel
+        dy = this.vel
+        if (this.x < 20) this.phase++;
+        break;
+      case 9:
+        dx = this.vel
+        if (this.x > 40) this.phase++;
+        break;
+      case 10:
+        dx = this.vel
+        dy = -this.vel
+        if (this.x > 60) this.phase++;
+        break;
+      case 11:
+        this.vel = 1;
+        this.phase++;
+        break;
+      case 12:
+        dy = -this.vel
+        break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    //@ts-expect-error
+    if (this.spriteCounter++ === 3) { this.spriteNum ^= 1; this.sprite = IMGS["bigStrangeUp" + this.spriteNum]; this.spriteCounter = 0; }
+    // this.width = this.sprite.width
+    // this.height = this.sprite.height
+    // this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap()
+  }
+}
+
diff --git a/src/enemies/White.ts b/src/enemies/White.ts
new file mode 100644
index 0000000..2987985
--- /dev/null
+++ b/src/enemies/White.ts
@@ -0,0 +1,68 @@
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class White extends Enemy {
+  sprite = IMGS.whiteDown;
+  width = IMGS.whiteDown.width;
+  height = IMGS.whiteDown.height;
+  velx = 1
+  vely = 3
+  phase = 0;
+  spriteNum = 1;
+  i = 0;
+  squares: Rectangle[] = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+
+  constructor(x: number, y: number, public left: boolean) {
+    super(x, y)
+  }
+
+  move() {
+    let dx = 0, dy = 0;
+
+    switch (this.phase) {
+      case 0:
+        dy = this.vely
+        if (this.y > 40) this.phase++;
+        break;
+      case 1:
+        dx = this.left ? this.velx : -this.velx
+        dy = this.vely
+        if (this.y > 78) this.phase++
+        break;
+      case 2:
+        this.velx = 3
+        this.sprite = this.left ? IMGS.whiteTurnLeft : IMGS.whiteTurnRight;
+        dx = this.left ? this.velx : -this.velx
+        dy = this.vely
+        if (this.y > 145) this.phase++
+        break;
+      case 3:
+        this.velx = 6
+        this.sprite = this.left ? IMGS.whiteStrangeLeft : IMGS.whiteStrangeRight;
+        dx = this.left ? this.velx : -this.velx
+        dy = this.vely
+        // if (this.y > 145) this.phase++
+        break;
+      // case 1:
+      //   dx = this.left ? -this.vel : this.vel
+      //   dy = -this.vel
+      //   if (this.y < 58) this.phase++
+      //   break;
+      // case 2:
+      //   this.sprite = this.left ? IMGS.greenUpToLeft : IMGS.greenUpToRight;
+      //   this.phase++;
+      //   break;
+      default:
+        break;
+    }
+
+    this.x += dx;
+    this.y += dy;
+    this.width = this.sprite.width
+    this.height = this.sprite.height
+    this.squares = [new Rectangle(this, 2, 2, this.width - 2, this.height - 2)]
+    return this.isOutsideMap()
+  }
+}
+
diff --git a/src/game.ts b/src/game.ts
index 6a09871..f01e2ea 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -3,22 +3,33 @@ import { Background } from "./drawables/Background";
 import Bullet from "./drawables/Bullet";
 import { canvas, ctx } from "./consts";
 import BigCircle from "./enemies/BigCircle";
+import Straight from "./enemies/Straight";
+import Red1 from "./enemies/Red1";
+import Red2 from "./enemies/Red2";
 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";
+import Green1 from "./enemies/Green1";
+import Green2 from "./enemies/Green2";
+import Strange from "./enemies/Strange";
+import White from "./enemies/White";
 
 let p = new Player()
-let pLifes = 3;
+let pLifes = 1;
+let score = 25004;
+let highscore = 0;
+let rolls = 3;
 let bullets = [] as Bullet[]
+const playerBullets = () => bullets.filter(b => b.players)
+const enemyBullets = () => bullets.filter(b => !b.players)
 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()
@@ -28,23 +39,42 @@ export function start() {
   bullets = [] as Bullet[]
   enemies = [] as Enemy[]
   animations = [] as Anime[]
-  enemies.push(new BigCircle(25, -20))
+  // enemies.push(new BigCircle(25, -20))
   // enemies.push(new Straight(20, 0))
-  intervalId = setTimeout(cpuLoop, 1000 / keys.fps)
+  // enemies.push(new Red1(0, 51))
+  // enemies.push(new Green1(115, canvas.height, true), new Green1(170, canvas.height, false))
+  // enemies.push(new Strange(160, canvas.height))
+  // enemies.push(new White(60, 0, true), new White(230, 0, false))
+  // enemies.push(new Red2(100, 0, true), new Red2(180, 0, false))
+  // enemies.push(new Green2(100, 0, true), new Green2(180, 0, false))
+  newTimeout()
   rafId = requestAnimationFrame(gpuLoop)
 }
 export function cpuLoop() {
   if (hg.show) {
     hg.move();
-    setTimeout(cpuLoop, 1000 / keys.fps)
+    tb.setData(score, pLifes, rolls, highscore)
+    newTimeout()
     return;
   }
   p.move()
   p.shoot(bullets)
   bg.move()
+  tb.setData(score, pLifes, rolls, highscore)
   if (enemies.length === 0) {
-    enemies.push(new BigCircle(25, -20))
-    setTimeout(() => enemies.push(new BigCircle(25, -20)), 1000)
+    // enemies.push(new BigCircle(25, -20))
+    // enemies.push(new Straight(25, -20))
+    // enemies.push(new Red1(25, -20))
+    // enemies.push(new Green1(115, canvas.height, true), new Green1(170, canvas.height, false))
+    // enemies.push(new Strange(160, canvas.height))
+    // enemies.push(new White(60, 0, true), new White(230, 0, false))
+    // enemies.push(new Red2(100, 0, true), new Red2(180, 0, false))
+    // enemies.push(new Green2(100, 0, true), new Green2(180, 0, false))
+    // setTimeout(() => enemies.push(new Straight(25, -20)), 1000)
+    // setTimeout(() => enemies.push(new BigCircle(25, -20)), 1000)
+    // setTimeout(() => enemies.push(new Red1(25, -20)), 1000)
+    // setTimeout(() => enemies.push(new Green1(115, canvas.height, true), new Green1(170, canvas.height, false)), 1000)
+    // setTimeout(() => enemies.push(new Strange(160, canvas.height)), 1000)
   }
 
   // enemies = enemies.filter(e => !bullets.some(b => b.collides(e)))
@@ -53,11 +83,30 @@ export function cpuLoop() {
 
   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])
+  const enemCollPlay = enemies.filter(e => p.collides([e]));
+  const bullCollPlay = enemyBullets().filter(b => p.collides([b]));
+
+  bullets = bullets.filter(b => !bullCollPlay.includes(b))
+  // const enemiesToDie = enemies.filter(e => e.collides(bullets))
+  // console.log("bef: ", enemies.length);
+
+  enemies = enemies.filter(e => {
+    if (e.collides(playerBullets())) {
+      e.health -= p.power;
+      animations.push(new Anime(e, e.deathAnim))
+      bullets = bullets.filter(b => !b.collides([e]))
+      if (e.health < 1) {
+        score += e.points
+        return false
+      }
+      return true
+    }
+    return true;
+  })
+  // console.log("aft: ", enemies.length);
   // playerDied({} as Enemy)
-  setTimeout(cpuLoop, 1000 / keys.fps)
+  if (!bullCollPlay.length || enemCollPlay.length) playerDied(enemCollPlay)
+  else newTimeout()
 }
 
 export function gpuLoop() {
@@ -66,7 +115,7 @@ export function gpuLoop() {
   clearCtx()
 
   if (hg.show) {
-    hg.drawHg(bg)
+    hg.drawHg(bg, score)
     tb.draw()
     return;
   }
@@ -85,17 +134,20 @@ export function gpuLoop() {
   tb.draw()
 }
 
-export async function playerDied(_enemy?: Enemy) {
+export async function playerDied(_enemy: Enemy[]) {
   animations.push(p.deathAnimation)
   p.width = 0;
   p.height = 0;
-  // clearTimeout(intervalId)
-  // cancelAnimationFrame(rafId)
-  if (--pLifes) {
+  clearTimeout(intervalId)
+  cancelAnimationFrame(rafId)
+  pLifes -= 1;
+  if (pLifes !== 0) {
     await drawRestartScreen();
     start()
   } else {
     hg.show = true
+    newTimeout()
+    requestAnimationFrame(gpuLoop)
   }
 }
 
@@ -107,3 +159,5 @@ export async function drawRestartScreen() {
   await sleep(2000)
 }
 
+const newTimeout = (f = cpuLoop) => { clearTimeout(intervalId); intervalId = setTimeout(f, 1000 / keys.fps) }
+
diff --git a/src/imgs/big-circle-left-to-down1.png b/src/imgs/big-circle-left-to-down1.png
index 6b5993a..eba3cad 100644
--- a/src/imgs/big-circle-left-to-down1.png
+++ b/src/imgs/big-circle-left-to-down1.png
diff --git a/src/imgs/big-strange-up0.png b/src/imgs/big-strange-up0.png
new file mode 100644
index 0000000..c9586ad
--- /dev/null
+++ b/src/imgs/big-strange-up0.png
diff --git a/src/imgs/big-strange-up1.png b/src/imgs/big-strange-up1.png
new file mode 100644
index 0000000..9a5c7fd
--- /dev/null
+++ b/src/imgs/big-strange-up1.png
diff --git a/src/imgs/font/small/white/0.png b/src/imgs/font/small/white/0.png
new file mode 100644
index 0000000..50812a2
--- /dev/null
+++ b/src/imgs/font/small/white/0.png
diff --git a/src/imgs/font/small/white/1.png b/src/imgs/font/small/white/1.png
new file mode 100644
index 0000000..3a37edd
--- /dev/null
+++ b/src/imgs/font/small/white/1.png
diff --git a/src/imgs/font/small/white/2.png b/src/imgs/font/small/white/2.png
new file mode 100644
index 0000000..6a6f8d8
--- /dev/null
+++ b/src/imgs/font/small/white/2.png
diff --git a/src/imgs/font/small/white/3.png b/src/imgs/font/small/white/3.png
new file mode 100644
index 0000000..8389436
--- /dev/null
+++ b/src/imgs/font/small/white/3.png
diff --git a/src/imgs/font/small/white/4.png b/src/imgs/font/small/white/4.png
new file mode 100644
index 0000000..9c32d02
--- /dev/null
+++ b/src/imgs/font/small/white/4.png
diff --git a/src/imgs/font/small/white/5.png b/src/imgs/font/small/white/5.png
new file mode 100644
index 0000000..5ab57af
--- /dev/null
+++ b/src/imgs/font/small/white/5.png
diff --git a/src/imgs/font/small/white/6.png b/src/imgs/font/small/white/6.png
new file mode 100644
index 0000000..c26ecff
--- /dev/null
+++ b/src/imgs/font/small/white/6.png
diff --git a/src/imgs/font/small/white/7.png b/src/imgs/font/small/white/7.png
new file mode 100644
index 0000000..29c3af5
--- /dev/null
+++ b/src/imgs/font/small/white/7.png
diff --git a/src/imgs/font/small/white/8.png b/src/imgs/font/small/white/8.png
new file mode 100644
index 0000000..4cc1928
--- /dev/null
+++ b/src/imgs/font/small/white/8.png
diff --git a/src/imgs/font/small/white/9.png b/src/imgs/font/small/white/9.png
new file mode 100644
index 0000000..d7122c5
--- /dev/null
+++ b/src/imgs/font/small/white/9.png
diff --git a/src/imgs/green-up-to-left.png b/src/imgs/green-up-to-left.png
new file mode 100644
index 0000000..38b24b5
--- /dev/null
+++ b/src/imgs/green-up-to-left.png
diff --git a/src/imgs/green-up-to-right.png b/src/imgs/green-up-to-right.png
index 1250970..3f25506 100644
--- a/src/imgs/green-up-to-right.png
+++ b/src/imgs/green-up-to-right.png
diff --git a/src/imgs/orig-topbar.png b/src/imgs/orig-topbar.png
new file mode 100644
index 0000000..8b798bc
--- /dev/null
+++ b/src/imgs/orig-topbar.png
diff --git a/src/imgs/player-rot1.png b/src/imgs/player-rot1.png
new file mode 100644
index 0000000..97bdc0e
--- /dev/null
+++ b/src/imgs/player-rot1.png
diff --git a/src/imgs/player-rot2.png b/src/imgs/player-rot2.png
new file mode 100644
index 0000000..d31eaa4
--- /dev/null
+++ b/src/imgs/player-rot2.png
diff --git a/src/imgs/player-rot3.png b/src/imgs/player-rot3.png
new file mode 100644
index 0000000..f3a0f70
--- /dev/null
+++ b/src/imgs/player-rot3.png
diff --git a/src/imgs/player-rot4.png b/src/imgs/player-rot4.png
new file mode 100644
index 0000000..624ae0a
--- /dev/null
+++ b/src/imgs/player-rot4.png
diff --git a/src/imgs/player-rot5.png b/src/imgs/player-rot5.png
new file mode 100644
index 0000000..6a02d70
--- /dev/null
+++ b/src/imgs/player-rot5.png
diff --git a/src/imgs/player-rot6.png b/src/imgs/player-rot6.png
new file mode 100644
index 0000000..914c3e0
--- /dev/null
+++ b/src/imgs/player-rot6.png
diff --git a/src/imgs/player-rot7.png b/src/imgs/player-rot7.png
new file mode 100644
index 0000000..2244d62
--- /dev/null
+++ b/src/imgs/player-rot7.png
diff --git a/src/imgs/red-down-to-right.png b/src/imgs/red-down-to-right.png
new file mode 100644
index 0000000..cd13693
--- /dev/null
+++ b/src/imgs/red-down-to-right.png
diff --git a/src/imgs/red-left-to-down.png b/src/imgs/red-left-to-down.png
new file mode 100644
index 0000000..9e1e08d
--- /dev/null
+++ b/src/imgs/red-left-to-down.png
diff --git a/src/imgs/red-right-to-up.png b/src/imgs/red-right-to-up.png
new file mode 100644
index 0000000..c45ab13
--- /dev/null
+++ b/src/imgs/red-right-to-up.png
diff --git a/src/imgs/red-up-to-left.png b/src/imgs/red-up-to-left.png
new file mode 100644
index 0000000..5176e19
--- /dev/null
+++ b/src/imgs/red-up-to-left.png
diff --git a/src/imgs/topbar.png b/src/imgs/topbar.png
index 8b798bc..9f69ebb 100644
--- a/src/imgs/topbar.png
+++ b/src/imgs/topbar.png
diff --git a/src/imgs/white-turn.png b/src/imgs/white-turn-left.png
index 099ce93..099ce93 100644
--- a/src/imgs/white-turn.png
+++ b/src/imgs/white-turn-left.png
diff --git a/src/imgs/white-turn-right.png b/src/imgs/white-turn-right.png
new file mode 100644
index 0000000..27d62a2
--- /dev/null
+++ b/src/imgs/white-turn-right.png