añade pruebas

Co-authored-by: Oier Bravo Urtasun <oierbravo@gmail.com>

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;
+  }
+}

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,
+  view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
-	resolution: window.devicePixelRatio || 1,
+  resolution: window.devicePixelRatio || 1,
-	autoDensity: true,
+  autoDensity: true,
-	backgroundColor: 0x6495ed,
+  backgroundColor: 0x6495ed,
-	width: 640,
+  width: 1280,
-	height: 480
+  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);
+const scene: Scene = new Scene(app.screen.width, app.screen.height);
+app.stage.addChild(scene);
+
+app.ticker.add(() => {
+	scene.update()
+});