refactor + comments

frontend/game.ts

@@ -1,4 +1,3 @@
-// TODO: Refactor
 const PIPE_IMAGE_PATH: string = "resources/raspberry-low-res.png";
 const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png";
 const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png";
@@ -12,10 +11,14 @@ let paused: boolean;
 let score: number;
 let hasAlreadyScored: boolean;
 
+/**
+ * p5 setup function.
+ */
 function setup() {
     backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
     createCanvas(2000, 1000);
     obstacleOffset = width / 3;
+    Obstacle.distanceBetweenPipes = height / 2.5
 
     textSize(150);
     textFont("resources/PressStart2P-Regular.ttf");
@@ -24,11 +27,10 @@ function setup() {
 }
 
 /**
- * Sets up everything needed for the game
+ * Sets up everything needed for the game.
  */
 function setupGame() {
     paused = true;
-
     score = 0;
     raspberry = new Raspberry();
     raspberry.image = RASPBERRY_IMAGE_PATH;
@@ -48,24 +50,14 @@ function setupGame() {
     obstacles.forEach((obstacle) => obstacle.randomizeHeight());
 }
 
-// TODO: Split into funciton
+/**
+ * Draws and updates the game.
+ */
 function draw() {
-    background(backgroundImage)
+    update();
-    if (!paused) {
+    background(backgroundImage);
-        raspberry.update();
-    }
     raspberry.draw();
-    
+    drawObstacles();
-    // Reset Obstacles Position
-    obstacles.forEach((obstacle) => {
-        if (!paused) {
-            obstacle.update();
-            checkObstacleReset(obstacle);
-        }
-
-        obstacle.draw();
-    });
-
     // Check for collisions with pipes and set score
     if (!paused) {
         if (obstacles[0].collides(raspberry)) {
@@ -74,13 +66,45 @@ function draw() {
         checkRaspberryScore();
         obstacles[0].draw();
     }
+    displayScore();
+}
 
+/**
+ * Displays the game score.
+ */
+function displayScore(){
     push();
     fill(200, 100, 60);
     text(score, width / 2, height / 10, width, height);
     pop();
 }
 
+/**
+ * Updates all objects.
+ */
+function update() {
+    if (!paused) {
+        raspberry.update();
+    }
+    obstacles.forEach((obstacle: Obstacle) => {
+        if (!paused) {
+            obstacle.update();
+            // Reset Obstacles Position
+            checkObstacleReset(obstacle);
+        }
+    })
+}
+
+/**
+ * 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
@@ -105,6 +129,9 @@ function checkRaspberryScore() {
     }
 }
 
+/**
+ * Handler for key events.
+ */
 function keyPressed() {
     // Jump
     if (key.toLowerCase() == "k") {

frontend/model/Obstacle.ts

@@ -1,12 +1,16 @@
 class Obstacle extends Entity implements Collidable {
     private pipeTop: Pipe;
     private pipeBottom: Pipe;
-    private static distanceBetweenPipes: number;
+    private static _distanceBetweenPipes: number;
     private readonly padding: number = 150;
     private readonly speed: number = 3;
 
     private static startX: number;
 
+    static set distanceBetweenPipes(value: number) {
+        this._distanceBetweenPipes = value;
+    }
+
     /**
      * Constructs the Obstacle with the given image
      * (fill is not used here)
@@ -22,7 +26,6 @@ class Obstacle extends Entity implements Collidable {
         this.pipeTop.image = pipeImagePath;
         this.pipeBottom.image = pipeImagePath;
 
-        Obstacle.distanceBetweenPipes = height / 2.5;
         //TODO: Put into setupGame()
         Obstacle.startX = width;
     }
@@ -42,10 +45,10 @@ class Obstacle extends Entity implements Collidable {
      * Randomizes the height of the pipes
      */
     public randomizeHeight(): void {
-        this.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle.distanceBetweenPipes);
+        this.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle._distanceBetweenPipes);
         //TODO: Soi des do sei?
         this.pipeTop.position.y = 0;
-        this.pipeBottom.position.y = this.pipeTop.height + Obstacle.distanceBetweenPipes;
+        this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes;
         this.pipeBottom.height = height - this.pipeTop.height - this.padding;
     }