146 files changed, 815 insertions, 0 deletions

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<Rectangle>;
+  public sprites!: Array<string>;
+
+  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<HTMLImageElement> {
+  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<HTMLCanvasElement>('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<Rectangle> = [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
--- /dev/null
+++ b/src/imgs/bg.png
diff --git a/src/imgs/bg.xcf b/src/imgs/bg.xcf
new file mode 100644
index 0000000..e72dd7b
--- /dev/null
+++ b/src/imgs/bg.xcf
diff --git a/src/imgs/bg1.png b/src/imgs/bg1.png
new file mode 100644
index 0000000..f7d3aa8
--- /dev/null
+++ b/src/imgs/bg1.png
diff --git a/src/imgs/bg2.png b/src/imgs/bg2.png
new file mode 100644
index 0000000..c89e65c
--- /dev/null
+++ b/src/imgs/bg2.png
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
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right1.png
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
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right2.png
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
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right3.png
diff --git a/src/imgs/big-circle-down.png b/src/imgs/big-circle-down.png
new file mode 100644
index 0000000..2c8b0d3
--- /dev/null
+++ b/src/imgs/big-circle-down.png
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
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down1.png
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
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down2.png
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
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down3.png
diff --git a/src/imgs/big-circle-left.png b/src/imgs/big-circle-left.png
new file mode 100644
index 0000000..8820f70
--- /dev/null
+++ b/src/imgs/big-circle-left.png
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
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up1.png
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
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up2.png
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
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up3.png
diff --git a/src/imgs/big-circle-right.png b/src/imgs/big-circle-right.png
new file mode 100644
index 0000000..825c4d7
--- /dev/null
+++ b/src/imgs/big-circle-right.png
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
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left1.png
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
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left2.png
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
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left3.png
diff --git a/src/imgs/big-circle-up.png b/src/imgs/big-circle-up.png
new file mode 100644
index 0000000..5b1508b
--- /dev/null
+++ b/src/imgs/big-circle-up.png
diff --git a/src/imgs/enemy-bullet.png b/src/imgs/enemy-bullet.png
new file mode 100644
index 0000000..66c2533
--- /dev/null
+++ b/src/imgs/enemy-bullet.png
diff --git a/src/imgs/font/ .png b/src/imgs/font/ .png
new file mode 100644
index 0000000..c900961
--- /dev/null
+++ b/src/imgs/font/ .png
diff --git a/src/imgs/font/white/!.png b/src/imgs/font/white/!.png
new file mode 100644
index 0000000..f7f4963
--- /dev/null
+++ b/src/imgs/font/white/!.png
diff --git a/src/imgs/font/white/&.png b/src/imgs/font/white/&.png
new file mode 100644
index 0000000..4f97229
--- /dev/null
+++ b/src/imgs/font/white/&.png
diff --git a/src/imgs/font/white/-.png b/src/imgs/font/white/-.png
new file mode 100644
index 0000000..18eb462
--- /dev/null
+++ b/src/imgs/font/white/-.png
diff --git a/src/imgs/font/white/..png b/src/imgs/font/white/..png
new file mode 100644
index 0000000..e29178a
--- /dev/null
+++ b/src/imgs/font/white/..png
diff --git a/src/imgs/font/white/?.png b/src/imgs/font/white/?.png
new file mode 100644
index 0000000..71884d7
--- /dev/null
+++ b/src/imgs/font/white/?.png
diff --git a/src/imgs/font/white/_.png b/src/imgs/font/white/_.png
new file mode 100644
index 0000000..7fd5f84
--- /dev/null
+++ b/src/imgs/font/white/_.png
diff --git a/src/imgs/font/white/a.png b/src/imgs/font/white/a.png
new file mode 100644
index 0000000..8cee648
--- /dev/null
+++ b/src/imgs/font/white/a.png
diff --git a/src/imgs/font/white/b.png b/src/imgs/font/white/b.png
new file mode 100644
index 0000000..62f4851
--- /dev/null
+++ b/src/imgs/font/white/b.png
diff --git a/src/imgs/font/white/c.png b/src/imgs/font/white/c.png
new file mode 100644
index 0000000..691f1d7
--- /dev/null
+++ b/src/imgs/font/white/c.png
diff --git a/src/imgs/font/white/d.png b/src/imgs/font/white/d.png
new file mode 100644
index 0000000..eb721b5
--- /dev/null
+++ b/src/imgs/font/white/d.png
diff --git a/src/imgs/font/white/e.png b/src/imgs/font/white/e.png
new file mode 100644
index 0000000..2b6031c
--- /dev/null
+++ b/src/imgs/font/white/e.png
diff --git a/src/imgs/font/white/ed.png b/src/imgs/font/white/ed.png
new file mode 100644
index 0000000..c180fc6
--- /dev/null
+++ b/src/imgs/font/white/ed.png
diff --git a/src/imgs/font/white/f.png b/src/imgs/font/white/f.png
new file mode 100644
index 0000000..e97e8c5
--- /dev/null
+++ b/src/imgs/font/white/f.png
diff --git a/src/imgs/font/white/g.png b/src/imgs/font/white/g.png
new file mode 100644
index 0000000..9b116d8
--- /dev/null
+++ b/src/imgs/font/white/g.png
diff --git a/src/imgs/font/white/h.png b/src/imgs/font/white/h.png
new file mode 100644
index 0000000..a563a82
--- /dev/null
+++ b/src/imgs/font/white/h.png
diff --git a/src/imgs/font/white/heart.png b/src/imgs/font/white/heart.png
new file mode 100644
index 0000000..ec57f75
--- /dev/null
+++ b/src/imgs/font/white/heart.png
diff --git a/src/imgs/font/white/i.png b/src/imgs/font/white/i.png
new file mode 100644
index 0000000..da655ed
--- /dev/null
+++ b/src/imgs/font/white/i.png
diff --git a/src/imgs/font/white/j.png b/src/imgs/font/white/j.png
new file mode 100644
index 0000000..ced6588
--- /dev/null
+++ b/src/imgs/font/white/j.png
diff --git a/src/imgs/font/white/k.png b/src/imgs/font/white/k.png
new file mode 100644
index 0000000..33d1649
--- /dev/null
+++ b/src/imgs/font/white/k.png
diff --git a/src/imgs/font/white/l.png b/src/imgs/font/white/l.png
new file mode 100644
index 0000000..83c6de9
--- /dev/null
+++ b/src/imgs/font/white/l.png
diff --git a/src/imgs/font/white/m.png b/src/imgs/font/white/m.png
new file mode 100644
index 0000000..1b7903c
--- /dev/null
+++ b/src/imgs/font/white/m.png
diff --git a/src/imgs/font/white/man.png b/src/imgs/font/white/man.png
new file mode 100644
index 0000000..f3aeb7d
--- /dev/null
+++ b/src/imgs/font/white/man.png
diff --git a/src/imgs/font/white/n.png b/src/imgs/font/white/n.png
new file mode 100644
index 0000000..778a738
--- /dev/null
+++ b/src/imgs/font/white/n.png
diff --git a/src/imgs/font/white/o.png b/src/imgs/font/white/o.png
new file mode 100644
index 0000000..48664f5
--- /dev/null
+++ b/src/imgs/font/white/o.png
diff --git a/src/imgs/font/white/p.png b/src/imgs/font/white/p.png
new file mode 100644
index 0000000..0c8652e
--- /dev/null
+++ b/src/imgs/font/white/p.png
diff --git a/src/imgs/font/white/q.png b/src/imgs/font/white/q.png
new file mode 100644
index 0000000..b0c5097
--- /dev/null
+++ b/src/imgs/font/white/q.png
diff --git a/src/imgs/font/white/r.png b/src/imgs/font/white/r.png
new file mode 100644
index 0000000..511a916
--- /dev/null
+++ b/src/imgs/font/white/r.png
diff --git a/src/imgs/font/white/rv.png b/src/imgs/font/white/rv.png
new file mode 100644
index 0000000..869d37a
--- /dev/null
+++ b/src/imgs/font/white/rv.png
diff --git a/src/imgs/font/white/s.png b/src/imgs/font/white/s.png
new file mode 100644
index 0000000..932714f
--- /dev/null
+++ b/src/imgs/font/white/s.png
diff --git a/src/imgs/font/white/t.png b/src/imgs/font/white/t.png
new file mode 100644
index 0000000..828a5f9
--- /dev/null
+++ b/src/imgs/font/white/t.png
diff --git a/src/imgs/font/white/u.png b/src/imgs/font/white/u.png
new file mode 100644
index 0000000..5d32614
--- /dev/null
+++ b/src/imgs/font/white/u.png
diff --git a/src/imgs/font/white/v.png b/src/imgs/font/white/v.png
new file mode 100644
index 0000000..a77f1dd
--- /dev/null
+++ b/src/imgs/font/white/v.png
diff --git a/src/imgs/font/white/w.png b/src/imgs/font/white/w.png
new file mode 100644
index 0000000..64f0866
--- /dev/null
+++ b/src/imgs/font/white/w.png
diff --git a/src/imgs/font/white/woman.png b/src/imgs/font/white/woman.png
new file mode 100644
index 0000000..f6e1422
--- /dev/null
+++ b/src/imgs/font/white/woman.png
diff --git a/src/imgs/font/white/x.png b/src/imgs/font/white/x.png
new file mode 100644
index 0000000..f186b8f
--- /dev/null
+++ b/src/imgs/font/white/x.png
diff --git a/src/imgs/font/white/y.png b/src/imgs/font/white/y.png
new file mode 100644
index 0000000..98d1bb8
--- /dev/null
+++ b/src/imgs/font/white/y.png
diff --git a/src/imgs/font/white/z.png b/src/imgs/font/white/z.png
new file mode 100644
index 0000000..ade4c33
--- /dev/null
+++ b/src/imgs/font/white/z.png
diff --git a/src/imgs/font/yellow/!.png b/src/imgs/font/yellow/!.png
new file mode 100644
index 0000000..919037b
--- /dev/null
+++ b/src/imgs/font/yellow/!.png
diff --git a/src/imgs/font/yellow/&.png b/src/imgs/font/yellow/&.png
new file mode 100644
index 0000000..74489a2
--- /dev/null
+++ b/src/imgs/font/yellow/&.png
diff --git a/src/imgs/font/yellow/-.png b/src/imgs/font/yellow/-.png
new file mode 100644
index 0000000..2677b45
--- /dev/null
+++ b/src/imgs/font/yellow/-.png
diff --git a/src/imgs/font/yellow/..png b/src/imgs/font/yellow/..png
new file mode 100644
index 0000000..5f0e9c3
--- /dev/null
+++ b/src/imgs/font/yellow/..png
diff --git a/src/imgs/font/yellow/?.png b/src/imgs/font/yellow/?.png
new file mode 100644
index 0000000..98ac04b
--- /dev/null
+++ b/src/imgs/font/yellow/?.png
diff --git a/src/imgs/font/yellow/_.png b/src/imgs/font/yellow/_.png
new file mode 100644
index 0000000..6211922
--- /dev/null
+++ b/src/imgs/font/yellow/_.png
diff --git a/src/imgs/font/yellow/a.png b/src/imgs/font/yellow/a.png
new file mode 100644
index 0000000..395ea56
--- /dev/null
+++ b/src/imgs/font/yellow/a.png
diff --git a/src/imgs/font/yellow/b.png b/src/imgs/font/yellow/b.png
new file mode 100644
index 0000000..e7740e0
--- /dev/null
+++ b/src/imgs/font/yellow/b.png
diff --git a/src/imgs/font/yellow/c.png b/src/imgs/font/yellow/c.png
new file mode 100644
index 0000000..98d9c02
--- /dev/null
+++ b/src/imgs/font/yellow/c.png
diff --git a/src/imgs/font/yellow/d.png b/src/imgs/font/yellow/d.png
new file mode 100644
index 0000000..b5378a9
--- /dev/null
+++ b/src/imgs/font/yellow/d.png
diff --git a/src/imgs/font/yellow/e.png b/src/imgs/font/yellow/e.png
new file mode 100644
index 0000000..9334386
--- /dev/null
+++ b/src/imgs/font/yellow/e.png
diff --git a/src/imgs/font/yellow/ed.png b/src/imgs/font/yellow/ed.png
new file mode 100644
index 0000000..7c7de83
--- /dev/null
+++ b/src/imgs/font/yellow/ed.png
diff --git a/src/imgs/font/yellow/f.png b/src/imgs/font/yellow/f.png
new file mode 100644
index 0000000..277e750
--- /dev/null
+++ b/src/imgs/font/yellow/f.png
diff --git a/src/imgs/font/yellow/g.png b/src/imgs/font/yellow/g.png
new file mode 100644
index 0000000..b47882f
--- /dev/null
+++ b/src/imgs/font/yellow/g.png
diff --git a/src/imgs/font/yellow/h.png b/src/imgs/font/yellow/h.png
new file mode 100644
index 0000000..3ecc26b
--- /dev/null
+++ b/src/imgs/font/yellow/h.png
diff --git a/src/imgs/font/yellow/heart.png b/src/imgs/font/yellow/heart.png
new file mode 100644
index 0000000..93e6f58
--- /dev/null
+++ b/src/imgs/font/yellow/heart.png
diff --git a/src/imgs/font/yellow/i.png b/src/imgs/font/yellow/i.png
new file mode 100644
index 0000000..3df7399
--- /dev/null
+++ b/src/imgs/font/yellow/i.png
diff --git a/src/imgs/font/yellow/j.png b/src/imgs/font/yellow/j.png
new file mode 100644
index 0000000..edc42c0
--- /dev/null
+++ b/src/imgs/font/yellow/j.png
diff --git a/src/imgs/font/yellow/k.png b/src/imgs/font/yellow/k.png
new file mode 100644
index 0000000..1a09894
--- /dev/null
+++ b/src/imgs/font/yellow/k.png
diff --git a/src/imgs/font/yellow/l.png b/src/imgs/font/yellow/l.png
new file mode 100644
index 0000000..aa449bb
--- /dev/null
+++ b/src/imgs/font/yellow/l.png
diff --git a/src/imgs/font/yellow/m.png b/src/imgs/font/yellow/m.png
new file mode 100644
index 0000000..77e2767
--- /dev/null
+++ b/src/imgs/font/yellow/m.png
diff --git a/src/imgs/font/yellow/man.png b/src/imgs/font/yellow/man.png
new file mode 100644
index 0000000..9c5dbc0
--- /dev/null
+++ b/src/imgs/font/yellow/man.png
diff --git a/src/imgs/font/yellow/n.png b/src/imgs/font/yellow/n.png
new file mode 100644
index 0000000..0dedbbb
--- /dev/null
+++ b/src/imgs/font/yellow/n.png
diff --git a/src/imgs/font/yellow/o.png b/src/imgs/font/yellow/o.png
new file mode 100644
index 0000000..d8d946d
--- /dev/null
+++ b/src/imgs/font/yellow/o.png
diff --git a/src/imgs/font/yellow/p.png b/src/imgs/font/yellow/p.png
new file mode 100644
index 0000000..7413ef1
--- /dev/null
+++ b/src/imgs/font/yellow/p.png
diff --git a/src/imgs/font/yellow/q.png b/src/imgs/font/yellow/q.png
new file mode 100644
index 0000000..749f269
--- /dev/null
+++ b/src/imgs/font/yellow/q.png
diff --git a/src/imgs/font/yellow/r.png b/src/imgs/font/yellow/r.png
new file mode 100644
index 0000000..323cac4
--- /dev/null
+++ b/src/imgs/font/yellow/r.png
diff --git a/src/imgs/font/yellow/rv.png b/src/imgs/font/yellow/rv.png
new file mode 100644
index 0000000..6c4f309
--- /dev/null
+++ b/src/imgs/font/yellow/rv.png
diff --git a/src/imgs/font/yellow/s.png b/src/imgs/font/yellow/s.png
new file mode 100644
index 0000000..9ac4e01
--- /dev/null
+++ b/src/imgs/font/yellow/s.png
diff --git a/src/imgs/font/yellow/t.png b/src/imgs/font/yellow/t.png
new file mode 100644
index 0000000..66a764c
--- /dev/null
+++ b/src/imgs/font/yellow/t.png
diff --git a/src/imgs/font/yellow/u.png b/src/imgs/font/yellow/u.png
new file mode 100644
index 0000000..e6445de
--- /dev/null
+++ b/src/imgs/font/yellow/u.png
diff --git a/src/imgs/font/yellow/v.png b/src/imgs/font/yellow/v.png
new file mode 100644
index 0000000..e7fe866
--- /dev/null
+++ b/src/imgs/font/yellow/v.png
diff --git a/src/imgs/font/yellow/w.png b/src/imgs/font/yellow/w.png
new file mode 100644
index 0000000..3073fa6
--- /dev/null
+++ b/src/imgs/font/yellow/w.png
diff --git a/src/imgs/font/yellow/woman.png b/src/imgs/font/yellow/woman.png
new file mode 100644
index 0000000..687d276
--- /dev/null
+++ b/src/imgs/font/yellow/woman.png
diff --git a/src/imgs/font/yellow/x.png b/src/imgs/font/yellow/x.png
new file mode 100644
index 0000000..b926580
--- /dev/null
+++ b/src/imgs/font/yellow/x.png
diff --git a/src/imgs/font/yellow/y.png b/src/imgs/font/yellow/y.png
new file mode 100644
index 0000000..1baf0ff
--- /dev/null
+++ b/src/imgs/font/yellow/y.png
diff --git a/src/imgs/font/yellow/z.png b/src/imgs/font/yellow/z.png
new file mode 100644
index 0000000..42161bf
--- /dev/null
+++ b/src/imgs/font/yellow/z.png
diff --git a/src/imgs/friendly-bullet.png b/src/imgs/friendly-bullet.png
new file mode 100644
index 0000000..77ec9a7
--- /dev/null
+++ b/src/imgs/friendly-bullet.png
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
--- /dev/null
+++ b/src/imgs/green-down-to-left.png
diff --git a/src/imgs/green-down.png b/src/imgs/green-down.png
new file mode 100644
index 0000000..817bc83
--- /dev/null
+++ b/src/imgs/green-down.png
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
--- /dev/null
+++ b/src/imgs/green-left-to-up.png
diff --git a/src/imgs/green-left.png b/src/imgs/green-left.png
new file mode 100644
index 0000000..1851fb4
--- /dev/null
+++ b/src/imgs/green-left.png
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
--- /dev/null
+++ b/src/imgs/green-right-to-down.png
diff --git a/src/imgs/green-right.png b/src/imgs/green-right.png
new file mode 100644
index 0000000..ce3496d
--- /dev/null
+++ b/src/imgs/green-right.png
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
--- /dev/null
+++ b/src/imgs/green-up-to-right.png
diff --git a/src/imgs/green-up.png b/src/imgs/green-up.png
new file mode 100644
index 0000000..813ebbd
--- /dev/null
+++ b/src/imgs/green-up.png
diff --git a/src/imgs/player-left.png b/src/imgs/player-left.png
new file mode 100644
index 0000000..5061a1b
--- /dev/null
+++ b/src/imgs/player-left.png
diff --git a/src/imgs/player-right.png b/src/imgs/player-right.png
new file mode 100644
index 0000000..1f62209
--- /dev/null
+++ b/src/imgs/player-right.png
diff --git a/src/imgs/player-up.png b/src/imgs/player-up.png
new file mode 100644
index 0000000..8fefada
--- /dev/null
+++ b/src/imgs/player-up.png
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
--- /dev/null
+++ b/src/imgs/red-down-to-left.png
diff --git a/src/imgs/red-down.png b/src/imgs/red-down.png
new file mode 100644
index 0000000..9042dfa
--- /dev/null
+++ b/src/imgs/red-down.png
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
--- /dev/null
+++ b/src/imgs/red-left-to-up.png
diff --git a/src/imgs/red-left.png b/src/imgs/red-left.png
new file mode 100644
index 0000000..21ac51c
--- /dev/null
+++ b/src/imgs/red-left.png
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
--- /dev/null
+++ b/src/imgs/red-right-to-down.png
diff --git a/src/imgs/red-right.png b/src/imgs/red-right.png
new file mode 100644
index 0000000..83a35b1
--- /dev/null
+++ b/src/imgs/red-right.png
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
--- /dev/null
+++ b/src/imgs/red-up-to-right.png
diff --git a/src/imgs/red-up.png b/src/imgs/red-up.png
new file mode 100644
index 0000000..0f671c0
--- /dev/null
+++ b/src/imgs/red-up.png
diff --git a/src/imgs/selector.png b/src/imgs/selector.png
new file mode 100644
index 0000000..9ccbcd7
--- /dev/null
+++ b/src/imgs/selector.png
diff --git a/src/imgs/simple-down.png b/src/imgs/simple-down.png
new file mode 100644
index 0000000..86f3fdf
--- /dev/null
+++ b/src/imgs/simple-down.png
diff --git a/src/imgs/simple-rot1.png b/src/imgs/simple-rot1.png
new file mode 100644
index 0000000..8dd3740
--- /dev/null
+++ b/src/imgs/simple-rot1.png
diff --git a/src/imgs/simple-rot2.png b/src/imgs/simple-rot2.png
new file mode 100644
index 0000000..9ed0864
--- /dev/null
+++ b/src/imgs/simple-rot2.png
diff --git a/src/imgs/simple-rot3.png b/src/imgs/simple-rot3.png
new file mode 100644
index 0000000..69362c0
--- /dev/null
+++ b/src/imgs/simple-rot3.png
diff --git a/src/imgs/simple-rot4.png b/src/imgs/simple-rot4.png
new file mode 100644
index 0000000..48afbd7
--- /dev/null
+++ b/src/imgs/simple-rot4.png
diff --git a/src/imgs/simple-up.png b/src/imgs/simple-up.png
new file mode 100644
index 0000000..bce253e
--- /dev/null
+++ b/src/imgs/simple-up.png
diff --git a/src/imgs/topbar.png b/src/imgs/topbar.png
new file mode 100644
index 0000000..8b798bc
--- /dev/null
+++ b/src/imgs/topbar.png
diff --git a/src/imgs/white-down.png b/src/imgs/white-down.png
new file mode 100644
index 0000000..46bf38f
--- /dev/null
+++ b/src/imgs/white-down.png
diff --git a/src/imgs/white-strange-left.png b/src/imgs/white-strange-left.png
new file mode 100644
index 0000000..803fecd
--- /dev/null
+++ b/src/imgs/white-strange-left.png
diff --git a/src/imgs/white-strange-right.png b/src/imgs/white-strange-right.png
new file mode 100644
index 0000000..e66ef02
--- /dev/null
+++ b/src/imgs/white-strange-right.png
diff --git a/src/imgs/white-turn.png b/src/imgs/white-turn.png
new file mode 100644
index 0000000..099ce93
--- /dev/null
+++ b/src/imgs/white-turn.png
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;
+}