From 0010f2de57cfa97106432ea1849c1bb75d3d99a1 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Tue, 31 May 2022 18:11:09 +0200 Subject: All enemies movement --- src/Animation.ts | 15 +-- src/Drawable.ts | 54 +++++++--- src/Events.ts | 5 +- src/Highscore.ts | 52 +++++++-- src/Images.ts | 39 ++++++- src/Player.ts | 19 ++-- src/Storage.ts | 40 +++++++ src/consts.ts | 1 + src/drawables/Bullet.ts | 10 +- src/drawables/TopBar.ts | 26 ++++- src/enemies/BigCircle.ts | 101 +++++++++++++----- src/enemies/Enemy.ts | 4 +- src/enemies/Green1.ts | 59 +++++++++++ src/enemies/Green2.ts | 113 ++++++++++++++++++++ src/enemies/Red1.ts | 193 ++++++++++++++++++++++++++++++++++ src/enemies/Red2.ts | 114 ++++++++++++++++++++ src/enemies/Straight.ts | 38 +++++-- src/enemies/Strange.ts | 92 ++++++++++++++++ src/enemies/White.ts | 68 ++++++++++++ src/game.ts | 86 ++++++++++++--- src/imgs/big-circle-left-to-down1.png | Bin 13863 -> 11366 bytes src/imgs/big-strange-up0.png | Bin 0 -> 908 bytes src/imgs/big-strange-up1.png | Bin 0 -> 912 bytes src/imgs/font/small/white/0.png | Bin 0 -> 4885 bytes src/imgs/font/small/white/1.png | Bin 0 -> 4874 bytes src/imgs/font/small/white/2.png | Bin 0 -> 4870 bytes src/imgs/font/small/white/3.png | Bin 0 -> 4880 bytes src/imgs/font/small/white/4.png | Bin 0 -> 4870 bytes src/imgs/font/small/white/5.png | Bin 0 -> 4878 bytes src/imgs/font/small/white/6.png | Bin 0 -> 4882 bytes src/imgs/font/small/white/7.png | Bin 0 -> 4868 bytes src/imgs/font/small/white/8.png | Bin 0 -> 4876 bytes src/imgs/font/small/white/9.png | Bin 0 -> 4879 bytes src/imgs/green-up-to-left.png | Bin 0 -> 739 bytes src/imgs/green-up-to-right.png | Bin 11294 -> 732 bytes src/imgs/orig-topbar.png | Bin 0 -> 1273 bytes src/imgs/player-rot1.png | Bin 0 -> 8940 bytes src/imgs/player-rot2.png | Bin 0 -> 7365 bytes src/imgs/player-rot3.png | Bin 0 -> 7330 bytes src/imgs/player-rot4.png | Bin 0 -> 8538 bytes src/imgs/player-rot5.png | Bin 0 -> 8182 bytes src/imgs/player-rot6.png | Bin 0 -> 7009 bytes src/imgs/player-rot7.png | Bin 0 -> 7762 bytes src/imgs/red-down-to-right.png | Bin 0 -> 729 bytes src/imgs/red-left-to-down.png | Bin 0 -> 729 bytes src/imgs/red-right-to-up.png | Bin 0 -> 731 bytes src/imgs/red-up-to-left.png | Bin 0 -> 10230 bytes src/imgs/topbar.png | Bin 1273 -> 6348 bytes src/imgs/white-turn-left.png | Bin 0 -> 9772 bytes src/imgs/white-turn-right.png | Bin 0 -> 705 bytes src/imgs/white-turn.png | Bin 9772 -> 0 bytes 51 files changed, 1030 insertions(+), 99 deletions(-) create mode 100644 src/Storage.ts create mode 100644 src/enemies/Green1.ts create mode 100644 src/enemies/Green2.ts create mode 100644 src/enemies/Red1.ts create mode 100644 src/enemies/Red2.ts create mode 100644 src/enemies/Strange.ts create mode 100644 src/enemies/White.ts create mode 100644 src/imgs/big-strange-up0.png create mode 100644 src/imgs/big-strange-up1.png create mode 100644 src/imgs/font/small/white/0.png create mode 100644 src/imgs/font/small/white/1.png create mode 100644 src/imgs/font/small/white/2.png create mode 100644 src/imgs/font/small/white/3.png create mode 100644 src/imgs/font/small/white/4.png create mode 100644 src/imgs/font/small/white/5.png create mode 100644 src/imgs/font/small/white/6.png create mode 100644 src/imgs/font/small/white/7.png create mode 100644 src/imgs/font/small/white/8.png create mode 100644 src/imgs/font/small/white/9.png create mode 100644 src/imgs/green-up-to-left.png create mode 100644 src/imgs/orig-topbar.png create mode 100644 src/imgs/player-rot1.png create mode 100644 src/imgs/player-rot2.png create mode 100644 src/imgs/player-rot3.png create mode 100644 src/imgs/player-rot4.png create mode 100644 src/imgs/player-rot5.png create mode 100644 src/imgs/player-rot6.png create mode 100644 src/imgs/player-rot7.png create mode 100644 src/imgs/red-down-to-right.png create mode 100644 src/imgs/red-left-to-down.png create mode 100644 src/imgs/red-right-to-up.png create mode 100644 src/imgs/red-up-to-left.png create mode 100644 src/imgs/white-turn-left.png create mode 100644 src/imgs/white-turn-right.png delete mode 100644 src/imgs/white-turn.png 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) { 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 { 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 = [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 Binary files a/src/imgs/big-circle-left-to-down1.png and b/src/imgs/big-circle-left-to-down1.png differ diff --git a/src/imgs/big-strange-up0.png b/src/imgs/big-strange-up0.png new file mode 100644 index 0000000..c9586ad Binary files /dev/null and b/src/imgs/big-strange-up0.png differ diff --git a/src/imgs/big-strange-up1.png b/src/imgs/big-strange-up1.png new file mode 100644 index 0000000..9a5c7fd Binary files /dev/null and b/src/imgs/big-strange-up1.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/0.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/1.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/2.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/3.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/4.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/5.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/6.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/7.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/8.png differ 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 Binary files /dev/null and b/src/imgs/font/small/white/9.png differ 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 Binary files /dev/null and b/src/imgs/green-up-to-left.png differ diff --git a/src/imgs/green-up-to-right.png b/src/imgs/green-up-to-right.png index 1250970..3f25506 100644 Binary files a/src/imgs/green-up-to-right.png and b/src/imgs/green-up-to-right.png differ diff --git a/src/imgs/orig-topbar.png b/src/imgs/orig-topbar.png new file mode 100644 index 0000000..8b798bc Binary files /dev/null and b/src/imgs/orig-topbar.png differ diff --git a/src/imgs/player-rot1.png b/src/imgs/player-rot1.png new file mode 100644 index 0000000..97bdc0e Binary files /dev/null and b/src/imgs/player-rot1.png differ diff --git a/src/imgs/player-rot2.png b/src/imgs/player-rot2.png new file mode 100644 index 0000000..d31eaa4 Binary files /dev/null and b/src/imgs/player-rot2.png differ diff --git a/src/imgs/player-rot3.png b/src/imgs/player-rot3.png new file mode 100644 index 0000000..f3a0f70 Binary files /dev/null and b/src/imgs/player-rot3.png differ diff --git a/src/imgs/player-rot4.png b/src/imgs/player-rot4.png new file mode 100644 index 0000000..624ae0a Binary files /dev/null and b/src/imgs/player-rot4.png differ diff --git a/src/imgs/player-rot5.png b/src/imgs/player-rot5.png new file mode 100644 index 0000000..6a02d70 Binary files /dev/null and b/src/imgs/player-rot5.png differ diff --git a/src/imgs/player-rot6.png b/src/imgs/player-rot6.png new file mode 100644 index 0000000..914c3e0 Binary files /dev/null and b/src/imgs/player-rot6.png differ diff --git a/src/imgs/player-rot7.png b/src/imgs/player-rot7.png new file mode 100644 index 0000000..2244d62 Binary files /dev/null and b/src/imgs/player-rot7.png differ 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 Binary files /dev/null and b/src/imgs/red-down-to-right.png differ 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 Binary files /dev/null and b/src/imgs/red-left-to-down.png differ 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 Binary files /dev/null and b/src/imgs/red-right-to-up.png differ 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 Binary files /dev/null and b/src/imgs/red-up-to-left.png differ diff --git a/src/imgs/topbar.png b/src/imgs/topbar.png index 8b798bc..9f69ebb 100644 Binary files a/src/imgs/topbar.png and b/src/imgs/topbar.png differ diff --git a/src/imgs/white-turn-left.png b/src/imgs/white-turn-left.png new file mode 100644 index 0000000..099ce93 Binary files /dev/null and b/src/imgs/white-turn-left.png differ diff --git a/src/imgs/white-turn-right.png b/src/imgs/white-turn-right.png new file mode 100644 index 0000000..27d62a2 Binary files /dev/null and b/src/imgs/white-turn-right.png differ diff --git a/src/imgs/white-turn.png b/src/imgs/white-turn.png deleted file mode 100644 index 099ce93..0000000 Binary files a/src/imgs/white-turn.png and /dev/null differ -- cgit v1.3.1