random pipe position working

frontend/game.ts

@@ -1,12 +1,15 @@
 let obstacle: Obstacle;
 let raspberry: Raspberry;
+
 function setup() {
-    createCanvas(400, 400)
-    background(187)
-    line(0,0, 400,400)
+    createCanvas(1000, 1000);
 
     raspberry = new Raspberry();
-    obstacle = new Obstacle(new Pipe(new Position(width, 0), 20, 50, 0), new Pipe(new Position(width, 300), 20, 50, 0))
+
+    obstacle = new Obstacle(
+        new Pipe(new Position(width, 0), 32, height),
+        new Pipe(new Position(width, height - (height / 3)), 32, height),
+    );
 }
 
 function draw() {
@@ -15,7 +18,12 @@ function draw() {
     raspberry.update();
     obstacle.draw();
     obstacle.update();
+
+    if (obstacle.position.x < 0) {
+        obstacle.resetPosition();
+    }
 }
+
 //
 // function keyPressed() {
 //

frontend/models/Entity.ts

@@ -4,6 +4,7 @@ abstract class Entity {
     private _height: number;
     private _fill: number;
 
+    //region Getter & Setter
     get position(): Position {
         return this._position;
     }
@@ -27,6 +28,7 @@ abstract class Entity {
     set height(value: number) {
         this._height = value;
     }
+    //endregion
 
     constructor(position: Position, width: number, height: number, fill: number) {
         this.position = position;
@@ -36,6 +38,7 @@ abstract class Entity {
     }
 
     public abstract update(): void;
+
     public draw() {
         fill(this._fill);
         rect(this.position.x, this.position.y, this.width, this.height);

frontend/models/Obstacle.ts

@@ -1,29 +1,56 @@
 class Obstacle extends Entity {
     private pipeTop: Entity;
     private pipeBottom: Entity;
-    private distanceBetweenPipes: number = 50;
-    private padding: number = 50;
-    private speed: number = 10;
+    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) {
-        super(pipeTop.position, pipeTop.width, height, 0);
+        super(pipeTop.position, pipeTop.width, pipeBottom.height, 0);
         this.pipeTop = pipeTop;
         this.pipeBottom = pipeBottom;
+
+        this.distanceBetweenPipes = height / 4;
+        Obstacle.startX = width;
     }
 
-    private resetPosition(){
-        let randomY = Math.random() * (height - this.padding) + this.padding;
-
-        this.pipeTop.height = randomY - this.distanceBetweenPipes / 2;
-        this.pipeTop.position.x = Obstacle.startX;
-
-        this.pipeBottom.height = randomY + this.distanceBetweenPipes / 2;
+    public resetPosition() {
+        this.pipeBottom.position.y = this.distanceBetweenPipes + this.randomRange(0, height - this.padding - 1.2 * this.distanceBetweenPipes);
         this.pipeBottom.position.x = Obstacle.startX;
+
+        this.pipeTop.position.y = this.pipeBottom.position.y - this.distanceBetweenPipes - this.pipeTop.height;
+        this.pipeTop.position.x = Obstacle.startX;
     }
 
-    public update(){
+    private randomRange(min: number, max: number) {
+        return Math.random() * (max - min) + min;
+    }
+
+    public update() {
         this.pipeTop.position.x -= this.speed;
         this.pipeBottom.position.x -= this.speed;
     }
+
+    public draw() {
+        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
+        )
+    }
 }

frontend/models/Pipe.ts

@@ -1,5 +1,8 @@
 class Pipe extends Entity {
-    update() {
+    constructor(position: Position, width: number, height: number) {
+        super(position, width, height, 0);
+    }
 
+    update(): void {
     }
 }