diff --git a/src/Scene.ts b/src/Scene.ts new file mode 100644 index 0000000..3a308af --- /dev/null +++ b/src/Scene.ts @@ -0,0 +1,124 @@ +import { AnimatedSprite, Container, Texture } from "pixi.js"; + +const salmonFrames = ["salmon_f01.png", "salmon_f02.png", "salmon_f03.png"]; + +export class Scene extends Container { + private readonly screenWidth: number; + private readonly screenHeight: number; + private isGoingUp: boolean = false; + private isGoingDown: boolean = false; + private isGoingLeft: boolean = false; + private isGoingRight: boolean = false; + + // We promoted clampy to a member of the class + private salmon: AnimatedSprite; + constructor(screenWidth: number, screenHeight: number) { + super(); // Mandatory! This calls the superclass constructor. + + // see how members of the class need `this.`? + this.screenWidth = screenWidth; + this.screenHeight = screenHeight; + + this.salmon = new AnimatedSprite( + salmonFrames.map((stringy) => Texture.from(stringy)) + ); + this.salmon.animationSpeed = 0.15; + this.salmon.scale = { x: 0.4, y: 0.4 }; + this.salmon.play(); + + this.salmon.anchor.set(0.5); + this.salmon.x = this.screenWidth / 2; + this.salmon.y = this.screenHeight / 2; + this.addChild(this.salmon); + + document.addEventListener("keyup", this.onKeyUp.bind(this)); + document.addEventListener("keydown", this.onKeyDown.bind(this)); + } + + private onKeyDown(e: KeyboardEvent): void { + console.log("KeyUp event fired!", e); + + if (e.key === "ArrowUp") { + this.isGoingUp = true; + } + + if (e.key === "ArrowDown") { + this.isGoingDown = true; + } + + if (e.key === "ArrowLeft") { + this.isGoingLeft = true; + } + + if (e.key === "ArrowRight") { + this.isGoingRight = true; + } + + if (e.key === " ") { + this.jump(); + } + } + + private onKeyUp(e: KeyboardEvent): void { + if (e.key === "ArrowUp") { + this.isGoingUp = false; + } + + if (e.key === "ArrowDown") { + this.isGoingDown = false; + } + + if (e.key === "ArrowLeft") { + this.isGoingLeft = false; + } + + if (e.key === "ArrowRight") { + this.isGoingRight = false; + } + + if (e.key === " ") { + this.jump(); + } + } + + update() { + if (this.isGoingUp) { + this.goUp(); + } + + if (this.isGoingDown) { + this.goDown(); + } + + if (this.isGoingLeft) { + this.goLeft(); + } + + if (this.isGoingRight) { + this.goRight(); + } + } + + private jump() { + this.goUp(2); + this.goLeft(); + this.goUp(2); + this.goLeft(2); + } + + private goUp(factor = 1) { + this.salmon.y -= 5 * factor; + } + + private goDown(factor = 1) { + this.salmon.y += 5 * factor; + } + + private goLeft(factor = 1) { + this.salmon.x -= 5 * factor; + } + + private goRight(factor = 1) { + this.salmon.x += 5 * factor; + } +} diff --git a/src/index.ts b/src/index.ts index 4bf11d9..ff33626 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,19 +1,26 @@ -import { Application, Sprite } from 'pixi.js' +import { Application } from "pixi.js"; +import { Scene } from "./Scene"; const app = new Application({ - view: document.getElementById("pixi-canvas") as HTMLCanvasElement, - resolution: window.devicePixelRatio || 1, - autoDensity: true, - backgroundColor: 0x6495ed, - width: 640, - height: 480 + view: document.getElementById("pixi-canvas") as HTMLCanvasElement, + resolution: window.devicePixelRatio || 1, + autoDensity: true, + backgroundColor: 0x6495ed, + width: 1280, + height: 720, }); -const clampy: Sprite = Sprite.from("clampy.png"); +// const clampy: Sprite = Sprite.from("clampy.png"); -clampy.anchor.set(0.5); +// clampy.anchor.set(0.5); +// clampy.x = app.screen.width / 2; +// clampy.y = app.screen.height / 2; +// app.stage.addChild(clampy); -clampy.x = app.screen.width / 2; -clampy.y = app.screen.height / 2; -app.stage.addChild(clampy); \ No newline at end of file +const scene: Scene = new Scene(app.screen.width, app.screen.height); +app.stage.addChild(scene); + +app.ticker.add(() => { + scene.update() +}); \ No newline at end of file diff --git a/static/salmon.png b/static/salmon.png new file mode 100644 index 0000000..d0c5c01 Binary files /dev/null and b/static/salmon.png differ diff --git a/static/salmon_f01.png b/static/salmon_f01.png new file mode 100644 index 0000000..a4cf69b Binary files /dev/null and b/static/salmon_f01.png differ diff --git a/static/salmon_f02.png b/static/salmon_f02.png new file mode 100644 index 0000000..fc39817 Binary files /dev/null and b/static/salmon_f02.png differ diff --git a/static/salmon_f03.png b/static/salmon_f03.png new file mode 100644 index 0000000..5be4cde Binary files /dev/null and b/static/salmon_f03.png differ