collision workey

frontend/game.ts

@@ -11,11 +11,12 @@ let raspberry: Raspberry;
 function setup() {
     backgroundImage = loadImage(backgroundImagePath);
 
-    createCanvas(1000, 1000);
+    createCanvas(2000, 1000);
     obstacleOffset = width / 3;
 
     raspberry = new Raspberry();
     raspberry.image = raspberryImagePath;
+    raspberry.showHitbox = true;
 
     obstacles.push(new Obstacle(
         new Position(width, 0),
@@ -43,18 +44,26 @@ function draw() {
     background(backgroundImage)
     raspberry.draw();
     raspberry.update();
-    
+
     obstacles.forEach((obstacle) => {
+
         obstacle.draw();
         obstacle.update();
 
         checkObstacleReset(obstacle);
     });
+
+    if (obstacles[0].collides(raspberry)) {
+        obstacles[0].draw();
+        console.log("SAMC")
+    }
 }
 
 function checkObstacleReset(obstacle: Obstacle){
     if(obstacle.position.x < -obstacleWidth) {
         obstacle.resetPosition(true);
+        obstacles.shift();
+        obstacles.push(obstacle);
     }
 }
 

frontend/models/Entity.ts

@@ -3,6 +3,7 @@ abstract class Entity {
     private _width: number;
     private _height: number;
     private fill: number;
+    private _showHitbox: boolean;
 
     //region Getter & Setter
     get position(): Position {
@@ -28,13 +29,23 @@ abstract class Entity {
     set height(value: number) {
         this._height = value;
     }
-    //endregion
+
+    get showHitbox(): boolean {
+        return this._showHitbox;
+    }
+
+    set showHitbox(value: boolean) {
+        this._showHitbox = value;
+    }
+
+//endregion
 
     protected constructor(position: Position, width: number, height: number, fill: number) {
         this.position = position;
         this.width = width;
         this.height = height;
         this.fill = fill;
+        this._showHitbox = false;
     }
 
     public abstract update(): void;

frontend/models/Obstacle.ts

@@ -18,7 +18,7 @@ class Obstacle extends Entity implements Collidable{
         this.pipeTop.image = pipeImagePath;
         this.pipeBottom.image = pipeImagePath;
 
-        this.distanceBetweenPipes = height / 4;
+        this.distanceBetweenPipes = height / 2.5;
         Obstacle.startX = width;
     }
 
@@ -51,7 +51,7 @@ class Obstacle extends Entity implements Collidable{
         this.pipeBottom.draw();
     }
 
-    collides(o: Entity): boolean {
+    public collides(o: Entity): boolean {
         return this.pipeTop.collides(o) || this.pipeBottom.collides(o);
     }
 }

frontend/models/Pipe.ts

@@ -31,9 +31,9 @@ class Pipe extends Entity implements Collidable {
     }
 
     collides(o: Entity): boolean {
-        return this.position.x < o.position.x + o.width && //inside left border
+        return this.position.x < (o.position.x + o.width) && //inside left border
-            this.position.x + this.width > o.position.x && //but not outside right border
+            (this.position.x + this.width) > o.position.x && //but not outside right border
-            this.position.y < o.position.y + o.height && //inside top border
+            this.position.y < (o.position.y + o.height) && //inside top border
-            this.position.y + this.height > o.position.y; //but not outside bottom border
+            (this.position.y + this.height) > o.position.y; //but not outside bottom border
     }
 }

frontend/models/Raspberry.ts

@@ -59,7 +59,10 @@ class Raspberry extends Entity {
     public draw(): void {
         image(this.image, this.position.x, this.position.y, this.width, this.height);
         noFill();
-        noStroke();
+        strokeWeight(50);
+        if (!this.showHitbox) {
+            noStroke();
+        }
         rect(
             this.position.x,
             this.position.y,