added images

pipes and background now have images

frontend/game.ts

@@ -1,35 +1,47 @@
+const pipeImagePath: string = "resources/raspberry-low-res.png";
 const obstacleWidth: number = 42;
 let obstacleOffset: number;
 
+const backgroundImagePath: string = "resources/raspberry-low-res.png";
+let backgroundImage: any;
+
 let obstacles: Obstacle[] = [];
 let raspberry: Raspberry;
 
 function setup() {
+    backgroundImage = loadImage(backgroundImagePath);
+
     createCanvas(1000, 1000);
     obstacleOffset = width / 4;
 
     raspberry = new Raspberry();
 
     obstacles.push(new Obstacle(
-        new Pipe(new Position(width, 0), obstacleWidth, height),
-        new Pipe(new Position(width, height - (height / 3)), obstacleWidth, height),
+        new Pipe(width, obstacleWidth, height),
+        new Pipe(width, obstacleWidth, height),
+        pipeImagePath
     ));
     obstacles.push(new Obstacle(
-        new Pipe(new Position(width + obstacleOffset, 0), obstacleWidth, height),
-        new Pipe(new Position(width + obstacleOffset, height - (height / 3)), obstacleWidth, height)
+        new Pipe(width + obstacleOffset, obstacleWidth, height),
+        new Pipe(width + obstacleOffset, obstacleWidth, height),
+        pipeImagePath
     ));
     obstacles.push(new Obstacle(
-        new Pipe(new Position(width + obstacleOffset * 2, 0), obstacleWidth, height),
-        new Pipe(new Position(width + obstacleOffset * 2, height - (height / 3)), obstacleWidth, height)
+        new Pipe(width + obstacleOffset * 2, obstacleWidth, height),
+        new Pipe(width + obstacleOffset * 2, obstacleWidth, height),
+        pipeImagePath
     ));
     obstacles.push(new Obstacle(
-        new Pipe(new Position(width + obstacleOffset * 3, 0), obstacleWidth, height),
-        new Pipe(new Position(width + obstacleOffset * 3, height - (height / 3)), obstacleWidth, height)
+        new Pipe(width + obstacleOffset * 3, obstacleWidth, height),
+        new Pipe(width + obstacleOffset * 3, obstacleWidth, height),
+        pipeImagePath
     ));
+
+    obstacles.forEach((obstacle) => obstacle.resetPosition(false));
 }
 
 function draw() {
-    background(187)
+    background(backgroundImage)
     raspberry.draw();
     raspberry.update();
 
@@ -38,7 +50,7 @@ function draw() {
         obstacle.update();
 
         if(obstacle.position.x < -obstacleWidth) {
-            obstacle.resetPosition();
+            obstacle.resetPosition(true);
         }
     });
 }

frontend/models/Obstacle.ts

@@ -1,33 +1,39 @@
 class Obstacle extends Entity {
-    private pipeTop: Entity;
-    private pipeBottom: Entity;
+    private pipeTop: Pipe;
+    private pipeBottom: Pipe;
     private distanceBetweenPipes: number;
     private padding: number = 300;
     private speed: number = 8;
+
     private static startX: number;
 
     /**
      * Constructs the Obstacle using the top and bottom Pipe
      * (fill is not used here)
-     * @param pipeTop
-     * @param pipeBottom
      */
-    constructor(pipeTop: Entity, pipeBottom: Entity) {
+    constructor(pipeTop: Pipe, pipeBottom: Pipe, pipeImagePath: string) {
         super(pipeTop.position, pipeTop.width, pipeBottom.height, 0);
         this.pipeTop = pipeTop;
         this.pipeBottom = pipeBottom;
+        this.pipeTop.image = pipeImagePath;
+        this.pipeBottom.image = pipeImagePath;
 
         this.distanceBetweenPipes = height / 4;
         Obstacle.startX = width;
     }
 
-    public resetPosition(): void {
-        this.pipeBottom.position.y = this.distanceBetweenPipes + this.randomRange(0, height - this.padding - 1.2 * this.distanceBetweenPipes);
-        this.pipeBottom.position.x = Obstacle.startX;
+    public resetPosition(resetX: boolean): void {
+        this.pipeBottom.position.y =
+            this.distanceBetweenPipes + this.randomRange(0, height - this.padding - 1.2 * this.distanceBetweenPipes);
 
-        this.pipeTop.position.y = this.pipeBottom.position.y - this.distanceBetweenPipes - this.pipeTop.height;
+        this.pipeTop.position.y =
+            this.pipeBottom.position.y - this.distanceBetweenPipes - this.pipeTop.height;
+
+        if(resetX){
+            this.pipeBottom.position.x = Obstacle.startX;
             this.pipeTop.position.x = Obstacle.startX;
         }
+    }
 
     private randomRange(min: number, max: number): number {
         return Math.random() * (max - min) + min;
@@ -39,18 +45,8 @@ class Obstacle extends Entity {
     }
 
     public draw(): void {
-        fill(10, 200, 100); //TODO do not make static
-        rect(
-            this.pipeTop.position.x,
-            this.pipeTop.position.y,
-            this.pipeTop.width,
-            this.pipeTop.height
-        );
-        rect(
-            this.pipeBottom.position.x,
-            this.pipeBottom.position.y,
-            this.pipeBottom.width,
-            this.pipeBottom.height
-        )
+        noFill();
+        this.pipeTop.draw();
+        this.pipeBottom.draw();
     }
 }

frontend/models/Pipe.ts

@@ -1,8 +1,31 @@
 class Pipe extends Entity {
-    constructor(position: Position, width: number, height: number) {
-        super(position, width, height, 0);
+    private _image: any;
+
+    //region Getter & Setter
+    get image() {
+        return this._image;
     }
 
-    public update(): void {
+    set image(path: string) {
+        this._image = loadImage(path);
+    }
+    //endregion
+
+    constructor(positionX: number, width: number, height: number) {
+        super(new Position(positionX, 0), width, height, 0);
+    }
+
+    public update(): void {}
+
+    public draw(): void {
+        // @ts-ignore
+        image(this.image, this.position.x, this.position.y, this.width, this.height);
+        noFill();
+        rect(
+            this.position.x,
+            this.position.y,
+            this.width,
+            this.height
+        );
     }
 }

frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "none",
+    "module": "ES2020",
     "noImplicitAny": true,
     "outFile": "./build/build.js",
     "preserveConstEnums": true,
@@ -8,6 +8,11 @@
     "rootDir": ".",
     "sourceMap": true,
     "target": "es5",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost"
+    ]
   }
 }