Floor & Positioning & small Obstacle rework

- added images for pipes and floor
- floor is now working
- raspberry is falling on floor correctly
- images are now getting preloaded
- font ia getting preloaded
- obstacle and pipe constructor now take p5.Image instead of a string with the path
- removed everything to do with drawing background posters

- started working on pipe tiling instead of streching

frontend/game.ts

@@ -1,19 +1,17 @@
-const PIPE_IMAGE_PATH: string = "resources/raspberry-low-res.png";
+const PIPE_IMAGE_PATH: string = "resources/seesORsoos_sad_no-bg.png";
 const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png";
 const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png";
-const FLOOR_IMAGE_PATH: string = "resources/"; //TODO: add image for floor
+const FLOOR_IMAGE_PATH: string = "resources/table-min-min.png";
-const SCROLLING_POSTER_IMAGE_PATHS: string[] = [
+const FONT_PATH: string = "resources/PressStart2P-Regular.ttf";
-    "resources/rickroll.png",
-    "resources/seesORsoos_sad_no-bg.png",
-    "resources/sw_icon.png"
-];
 const OBSTACLE_WIDTH: number = 88;
 const OBSTACLE_COUNT: number = 3;
-const FLOOR_HEIGHT: number = 200;
 const BOOST_KEYS = ["k", " "];
+let floorHeight: number;
 let obstacleOffset: number;
-let backgroundImage: any;
+let font: p5.Font;
-let scrollingPosterImages: p5.Image[] = [];
+let backgroundImage: p5.Image;
+let pipeImage: p5.Image;
+let floorImage: p5.Image;
 
 let obstacles: Obstacle[] = [];
 let raspberry: Raspberry;
@@ -24,24 +22,24 @@ let hasDied: boolean = false;
 let ready: boolean = true;
 
 /**
- * p5 setup function.
+ * p5 preload function
  */
-function setup() {
+function preload() {
+    font = loadFont(FONT_PATH);
     backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
-    loadScrollingPosterImages();
+    pipeImage = loadImage(PIPE_IMAGE_PATH);
-    createCanvas(2000, 1000);
+    floorImage = loadImage(FLOOR_IMAGE_PATH);
-    setupObstacleConsts();
-    setupFont();
-    setupGame();
 }
 
 /**
- * Loads all scrolling poster images into the `scrollingPosterImages` list
+ * p5 setup function.
  */
-function loadScrollingPosterImages(){
+function setup() {
-    for (const posterImagePath of SCROLLING_POSTER_IMAGE_PATHS) {
+    createCanvas(2000, 1000);
-        scrollingPosterImages.push(loadImage(posterImagePath));
+    floorHeight = height / 5;
-    }
+    setupObstacleConsts();
+    setupFont();
+    setupGame();
 }
 
 /**
@@ -59,7 +57,7 @@ function setupObstacleConsts() {
 function setupFont() {
     textSize(150);
     textAlign(CENTER);
-    textFont(loadFont("resources/PressStart2P-Regular.ttf"));
+    textFont(font);
 }
 
 /**
@@ -87,7 +85,7 @@ function setupObstacles() {
 function instantiateObstacles(number: number) {
     for (let i = 0; i < number; i++) {
         obstacles.push(
-            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, PIPE_IMAGE_PATH));
+            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage));
     }
 }
 
@@ -117,7 +115,6 @@ function drawGame() {
 function drawScenery(){
    background(backgroundImage);
    drawFloor();
-   drawBackgroundPosters();
 }
 
 /**
@@ -126,22 +123,11 @@ function drawScenery(){
 function drawFloor(){
     push();
     noFill();
-    //TODO: image
+    image(floorImage, 0, height - floorHeight, width, floorHeight);
-    // image(loadImage(FLOOR_IMAGE_PATH), 0, height - FLOOR_HEIGHT, width, FLOOR_HEIGHT);
+    rect(0, height - floorHeight, width, floorHeight);
-    rect(0, height - FLOOR_HEIGHT, width, FLOOR_HEIGHT);
     pop();
 }
 
-function drawBackgroundPosters(){
-    for (const posterImage of scrollingPosterImages){
-        push();
-        noFill();
-        //TODO scroll images and dont load all at once
-        image(posterImage, 0, 0);
-        pop();
-    }
-}
-
 /**
  * Draws the game's enities.
  */
@@ -150,6 +136,15 @@ function drawEntities() {
     drawObstacles();
 }
 
+/**
+ * Draws the obstacles.
+ */
+function drawObstacles() {
+    obstacles.forEach((obstacle) => {
+        obstacle.draw();
+    });
+}
+
 /**
  * Operations for the game's functionality.
  */
@@ -206,16 +201,6 @@ function update() {
     })
 }
 
-/**
- * Draws the obstacles.
- */
-function drawObstacles() {
-    obstacles.forEach((obstacle) => {
-        obstacle.draw();
-    });
-}
-
-
 /**
  * Check if obstacle positions should be reset and reset if so
  * @param obstacle obstacle to check

frontend/model/Obstacle.ts

@@ -23,11 +23,11 @@ class Obstacle extends Entity implements Collidable {
      * @param position starting position of the obstacle
      * @param obstacleWidth width of the obstacle
      * @param obstacleHeight height of the obstacle
-     * @param pipeImagePath path to the image to be used
+     * @param image the image to be used
      */
-    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) {
+    constructor(position: Position, obstacleWidth: number, obstacleHeight: number, image: p5.Image) {
         super(position, obstacleWidth, obstacleHeight, 0);
-        this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath);
+        this.createPipes(position, obstacleHeight, obstacleWidth, image);
     }
 
     /**
@@ -35,12 +35,12 @@ class Obstacle extends Entity implements Collidable {
      * @param position
      * @param obstacleHeight
      * @param obstacleWidth
-     * @param pipeImagePath
+     * @param pipeImage
      * @private
      */
-    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImagePath: string) {
+    private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImage: p5.Image) {
-        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
+        this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
-        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
+        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage);
     }
 
     /**

frontend/model/Pipe.ts

@@ -6,33 +6,16 @@ class Pipe extends Entity implements Collidable {
      * Pipe's image.
      * @private
      */
-    private _image: p5.Image;
+    private readonly image: p5.Image;
-
-    //region Getter & Setter
-    /**
-     * Gets the image.
-     */
-    get image(): p5.Image {
-        return this._image;
-    }
-
-    /**
-     * Sets the image.
-     * @param path Path to image
-     */
-    set image(path: any) {
-        this._image = loadImage(path);
-    }
-    //endregion
 
     /**
      * Constructs the pipe.
      * @param positionX starting x-Position
      * @param width pipe width
      * @param height pipe height
-     * @param image path to image.
+     * @param image image object
      */
-    constructor(positionX: number, width: number, height: number, image: string) {
+    constructor(positionX: number, width: number, height: number, image: p5.Image) {
         super(new Position(positionX, 0), width, height, 0);
         this.image = image;
     }
@@ -40,7 +23,8 @@ class Pipe extends Entity implements Collidable {
     /**
      * YAGNI.
      */
-    public update(): void {}
+    public update(): void {
+    }
 
     /**
      * Draws the pipe.
@@ -48,7 +32,19 @@ class Pipe extends Entity implements Collidable {
     public draw(): void {
         push();
         noFill();
-        image(this.image, this.position.x, this.position.y, this.width, this.height);
+
+        if (this.height > this.image.height) {
+            let maxImageYPos = Math.ceil(this.height / this.image.height) * this.image.height;
+            for (let imageYPos = 0; imageYPos < maxImageYPos; imageYPos += this.image.height) {
+                console.log("maximageypos: " + maxImageYPos);
+                console.log("image height: " + this.image.height);
+                console.log("imageypos: " + imageYPos);
+                image(this.image, this.position.x, this.position.y + imageYPos, this.width, this.image.height);
+            }
+        } else {
+            image(this.image, this.position.x, this.position.y, this.width, this.height);
+        }
+
         rect(this.position.x, this.position.y, this.width, this.height);
         pop();
     }

frontend/model/Raspberry.ts

@@ -56,6 +56,12 @@ class Raspberry extends Entity {
      */
     private static readonly FILL: number = 0;
 
+    /**
+     * Offset off of the floor so that the raspberry looks like it's falling on the floor
+     * @private
+     */
+    private static BOTTOM_FLOOR_OFFSET: number;
+
     //region Getter & Setter
 
     /**
@@ -97,6 +103,7 @@ class Raspberry extends Entity {
     constructor(image: string) {
         Raspberry.position = new Position(width / 6, height / 2);
         super(Raspberry.position, Raspberry.WIDTH, Raspberry.HEIGHT, Raspberry.FILL);
+        Raspberry.BOTTOM_FLOOR_OFFSET = (height / 5) - (height / 15 / 2);
         this.image = image;
     }
 
@@ -117,7 +124,7 @@ class Raspberry extends Entity {
     }
 
     /**
-     * Limits the raspberry's movement to the shown canvas.
+     * Limits the Raspberry's movement to the shown canvas.
      * @private
      */
     private forceBoundaries(): void {
@@ -141,8 +148,8 @@ class Raspberry extends Entity {
      * @private
      */
     private boundaryBottom(): void {
-        if (this.position.y + this.height > height) {
+        if (this.position.y + this.height + Raspberry.BOTTOM_FLOOR_OFFSET > height) {
-            this.position.y = height - this.height;
+            this.position.y = height - this.height - Raspberry.BOTTOM_FLOOR_OFFSET;
             this.velocity = 0;
         }
     }