add some obstacles and basic collision

Author: rjoken

src/assets/briefcase.png

@@ -0,0 +1,32 @@
+import Phaser from "phaser";
+
+export class Obstacle {
+  private scene: Phaser.Scene;
+  private sprite: Phaser.Physics.Arcade.Sprite;
+  private speed: number;
+
+  constructor(scene: Phaser.Scene, x: number, type: string) {
+    this.scene = scene;
+    this.sprite = this.scene.physics.add.sprite(x, -128, type);
+    this.sprite.play(`${type}-fall`, true);
+    this.sprite.setOrigin(0.5, 1);
+
+    this.speed = Phaser.Math.Between(30, 60);
+  }
+
+  update(deltaSeconds: number) {
+    this.sprite.setVelocityY(this.speed);
+
+    if (this.sprite.y > this.scene.cameras.main.height + 128) {
+      this.sprite.destroy();
+    }
+  }
+
+  getBody(): Phaser.GameObjects.Sprite {
+    return this.sprite;
+  }
+
+  isAlive(): boolean {
+    return this.sprite.active;
+  }
+}

src/assets/mail.png

@@ -2,13 +2,13 @@ import Phaser from "phaser";
 
 export class Player {
   private scene: Phaser.Scene;
-  private sprite: Phaser.GameObjects.Sprite;
+  private sprite: Phaser.Physics.Arcade.Sprite;
   private horizontal: number = 0;
 
   constructor(scene: Phaser.Scene, x: number, y: number, spriteName: string) {
     this.scene = scene;
-    this.sprite = this.scene.add.sprite(x, y, spriteName);
-    this.sprite.play("walk");
+    this.sprite = this.scene.physics.add.sprite(x, y, spriteName);
+    this.sprite.play(`${spriteName}-walk`);
   }
 
   update(horizontal: number) {
@@ -18,4 +18,8 @@ export class Player {
       (this.horizontal * this.scene.cameras.main.width) / 2;
     this.sprite.setPosition(newX, this.scene.cameras.main.height - 16);
   }
+
+  getBody() {
+    return this.sprite;
+  }
 }

src/assets/paper.png

@@ -10,7 +10,7 @@ export const gameConfig: Phaser.Types.Core.GameConfig = {
   physics: {
     default: "arcade",
     arcade: {
-      gravity: { y: 600, x: 0 },
+      gravity: { y: 0, x: 0 },
       debug: false,
     },
   },

src/assets/stapler.png

@@ -6,14 +6,67 @@ export class SpriteAssets {
       frameWidth: 16,
       frameHeight: 16,
     });
+    scene.load.spritesheet("briefcase", "src/assets/briefcase.png", {
+      frameWidth: 16,
+      frameHeight: 16,
+    });
+    scene.load.spritesheet("mail", "src/assets/mail.png", {
+      frameWidth: 16,
+      frameHeight: 16,
+    });
+    scene.load.spritesheet("paper", "src/assets/paper.png", {
+      frameWidth: 16,
+      frameHeight: 16,
+    });
+    scene.load.spritesheet("stapler", "src/assets/stapler.png", {
+      frameWidth: 16,
+      frameHeight: 16,
+    });
+    scene.load.spritesheet("taxman", "src/assets/taxman.png", {
+      frameWidth: 32,
+      frameHeight: 64,
+    });
   }
 
   static createSprites(scene: Phaser.Scene): void {
     scene.anims.create({
-      key: "walk",
+      key: "switchy-walk",
       frames: scene.anims.generateFrameNumbers("switchy", { start: 0, end: 2 }),
       frameRate: 6,
       repeat: -1,
     });
+    scene.anims.create({
+      key: "briefcase-fall",
+      frames: scene.anims.generateFrameNumbers("briefcase", {
+        start: 0,
+        end: 0,
+      }),
+      frameRate: 6,
+      repeat: -1,
+    });
+    scene.anims.create({
+      key: "mail-fall",
+      frames: scene.anims.generateFrameNumbers("mail", { start: 0, end: 0 }),
+      frameRate: 6,
+      repeat: -1,
+    });
+    scene.anims.create({
+      key: "paper-fall",
+      frames: scene.anims.generateFrameNumbers("paper", { start: 0, end: 0 }),
+      frameRate: 6,
+      repeat: -1,
+    });
+    scene.anims.create({
+      key: "stapler-fall",
+      frames: scene.anims.generateFrameNumbers("stapler", { start: 0, end: 0 }),
+      frameRate: 6,
+      repeat: -1,
+    });
+    scene.anims.create({
+      key: "taxman-fall",
+      frames: scene.anims.generateFrameNumbers("taxman", { start: 0, end: 1 }),
+      frameRate: 6,
+      repeat: -1,
+    });
   }
 }

src/assets/taxman.png

@@ -3,10 +3,14 @@ import { Player } from "../Player";
 import { PlaceholderAssets } from "../createPlaceholderAssets";
 import { AnalogKey, AnalogReport } from "../../components/ConnectDevice";
 import { SpriteAssets } from "../createSpriteAssets";
+import { Obstacle } from "../Obstacle";
 
 export class GameScene extends Phaser.Scene {
   private player!: Player;
 
+  private obstacles: Obstacle[] = [];
+  private obstacleTimer: number = 0;
+
   private switchy!: Phaser.GameObjects.Sprite;
 
   private background!: Phaser.GameObjects.TileSprite;
@@ -66,6 +70,7 @@ export class GameScene extends Phaser.Scene {
 
     // Collision optimizations
     // this.switchy.setCollideWorldBounds(true);
+    this.physics.world.setBoundsCollision(true, true, true, true);
 
     // Set up keyboard controls - ensure keyboard exists
     if (this.input.keyboard) {
@@ -84,9 +89,36 @@ export class GameScene extends Phaser.Scene {
     // Update position according to horizontal
     this.player.update(this.horizontal);
 
+    this.obstacleTimer += delta;
+
+    if (this.obstacleTimer > 1000) {
+      this.spawnObstacle();
+      this.obstacleTimer = 0;
+    }
+
+    this.obstacles = this.obstacles.filter((o) => {
+      o.update(deltaSeconds);
+      this.physics.world.overlap(this.player.getBody(), o.getBody(), () => {
+        this.handlePlayerHit();
+      });
+      return o.isAlive();
+    });
+
     // Jump when space is pressed or screen is tapped (handled via pointer events)
     // if (this.input.keyboard && Phaser.Input.Keyboard.JustDown(this.jumpKey)) {
     //   this.jump();
     // }
   }
+
+  spawnObstacle() {
+    const obstacleTypes = ["paper", "mail", "stapler", "taxman", "briefcase"];
+    const type = Phaser.Utils.Array.GetRandom(obstacleTypes);
+    const x = Phaser.Math.Between(0, this.cameras.main.width - 16);
+    const obstacle = new Obstacle(this, x, type);
+    this.obstacles.push(obstacle);
+  }
+
+  handlePlayerHit() {
+    console.log("SWITCHY GOT BUSTED BY THE IRS 🚨");
+  }
 }