Add scrolling background, add spawnrate difficulty curve

Author: rjoken

public/assets/gfx/bg.png

@@ -50,6 +50,12 @@ export class SpriteAssets {
         frameHeight: 64,
       });
     }
+    if (!scene.textures.exists("bg")) {
+      scene.load.spritesheet("bg", "./assets/gfx/bg.png", {
+        frameWidth: 16,
+        frameHeight: 16,
+      });
+    }
   }
 
   static createSprites(scene: Phaser.Scene): void {
@@ -113,5 +119,16 @@ export class SpriteAssets {
         repeat: -1,
       });
     }
+    if (!scene.anims.exists("bg")) {
+      scene.anims.create({
+        key: "bg",
+        frames: scene.anims.generateFrameNumbers("bg", {
+          start: 0,
+          end: 0,
+        }),
+        frameRate: 6,
+        repeat: -1,
+      });
+    }
   }
 }

src/game/createSpriteAssets.ts

@@ -63,18 +63,18 @@ export class GameScene extends Phaser.Scene {
     const gameWidth = this.cameras.main.width;
     const gameHeight = this.cameras.main.height;
 
-    // Set up background to fill the screen
-    this.background = this.add
-      .tileSprite(0, 0, gameWidth, gameHeight, "background")
-      .setOrigin(0, 0)
-      .setScrollFactor(0);
-
     // Update physics settings for framerate independence
     this.physics.world.setFPS(60);
 
     // Load sprites from asset handler
     SpriteAssets.createSprites(this);
 
+    // Set up background to fill the screen
+    this.background = this.add
+      .tileSprite(0, 0, gameWidth, gameHeight, "bg")
+      .setOrigin(0, 0)
+      .setScrollFactor(0);
+
     document.fonts.load('24px "Monogram"').then(() => {
       this.scoreText = this.add
         .text(8, 0, `${this.score}`, {
@@ -116,14 +116,17 @@ export class GameScene extends Phaser.Scene {
     // Convert delta to seconds for easier calculations
     const deltaSeconds = delta / 1000;
 
+    this.background.tilePositionY -= delta * 0.01;
+
     // The A key moves from center to the left of the screen
     // The D key moves from center to the right of the screen
     // Update position according to horizontal
     this.player.update(this.horizontal);
 
     this.obstacleTimer += delta;
 
-    if (this.obstacleTimer > 1000) {
+    // difficulty curve
+    if (this.obstacleTimer > Math.max(300, 1000 * Math.pow(0.97, this.score))) {
       this.spawnObstacle();
       this.obstacleTimer = 0;
     }