lab solved

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5506
+}

index.html

@@ -37,7 +37,9 @@ <h1>Game Over</h1>
       </div>
     </main>
 
+    <script type="text/javascript" src="js/player.js"></script>
     <script type="text/javascript" src="js/game.js"></script>
     <script type="text/javascript" src="js/script.js"></script>
+    <script type="text/javascript" src="js/obstacle.js"></script>
   </body>
 </html>

js/game.js

@@ -1,3 +1,105 @@
 class Game {
-    // code to be added
-}
+  constructor() {
+    this.startScreen = document.getElementById("game-intro");
+    this.gameScreen = document.getElementById("game-screen");
+    this.gameEndScreen = document.getElementById("game-end");
+    this.player = new Player(
+      this.gameScreen,
+      200,
+      500,
+      100,
+      150,
+      "./images/car.png"
+    );
+    this.height = 600;
+    this.width = 500;
+    this.obstacles = [];
+    this.score = 0;
+    this.lives = 3;
+    this.gameIsOver = false;
+    this.gameIntervalId;
+    this.gameLoopFrequency = Math.round(1000 / 60);
+  }
+  // code to be added
+  start() {
+    this.gameScreen.style.height = `${this.height}px`;
+    this.gameScreen.style.width = `${this.width}px`;
+
+    //Hide Start screen
+    this.startScreen.style.display = "none";
+
+    //show game screen
+    this.gameScreen.style.display = "block";
+
+    this.gameIntervalId = setInterval(() => {
+      this.gameLoop();
+    }, this.gameLoopFrequency);
+  }
+
+  gameLoop() {
+    console.log("in the game loop");
+    this.update();
+    if (this.gameIsOver) {
+      clearInterval(this.gameIntervalId);
+    }
+  }
+
+  update() {
+    let livesTag = document.getElementById("lives");
+    livesTag.innerText = this.lives;
+    this.player.move();
+
+    // Check for collision and if an obstacle is still on the screen
+    for (let i = 0; i < this.obstacles.length; i++) {
+      const obstacle = this.obstacles[i];
+      obstacle.move();
+
+      // If the player's car collides with an obstacle
+      if (this.player.didCollide(obstacle)) {
+        // Remove the obstacle element from the DOM
+        obstacle.element.remove();
+        // Remove obstacle object from the array
+        this.obstacles.splice(i, 1);
+        // Reduce player's lives by 1
+        this.lives--;
+        // Update the counter variable to account for the removed obstacle
+        i--;
+      } // If the obstacle is off the screen (at the bottom)
+      else if (obstacle.top > this.height) {
+        // Increase the score by 1
+        this.score++;
+
+        // Remove the obstacle from the DOM
+        obstacle.element.remove();
+        // Remove obstacle object from the array
+        this.obstacles.splice(i, 1);
+        // Update the counter variable to account for the removed obstacle
+        i--;
+      }
+    }
+
+    // If the lives are 0, end the game
+    if (this.lives === 0) {
+      this.endGame();
+    }
+
+    // Create a new obstacle based on a random probability
+    // when there is no other obstacles on the screen
+    if (Math.random() > 0.98 && this.obstacles.length < 1) {
+      this.obstacles.push(new Obstacle(this.gameScreen));
+    }
+  }
+
+  // Create a new method responsible for ending the game
+  endGame() {
+    this.player.element.remove();
+    this.obstacles.forEach((obstacle) => obstacle.element.remove());
+
+    this.gameIsOver = true;
+
+    // Hide game screen
+    this.gameScreen.style.display = "none";
+    // Show end game screen
+    this.gameEndScreen.style.display = "block";
+  }
+}

js/obstacle.js

@@ -0,0 +1,31 @@
+class Obstacle {
+  constructor(gameScreen) {
+    this.gameScreen = gameScreen;
+    this.left = Math.floor(Math.random() * 300 + 70);
+    this.top = 0;
+    this.width = 100;
+    this.height = 150;
+    this.element = document.createElement("img");
+    this.element.src = "./images/redCar.png";
+    this.element.style.position = "absolute";
+    this.element.style.width = `${this.width}px`;
+    this.element.style.height = `${this.height}px`;
+    this.element.style.left = `${this.left}px`;
+    this.element.style.top = `${this.top}px`;
+
+    this.gameScreen.appendChild(this.element);
+  }
+
+  updatePosition() {
+    // Update the obstacle's position based on the properties left and top
+    this.element.style.left = `${this.left}px`;
+    this.element.style.top = `${this.top}px`;
+  }
+
+  move() {
+    // Move the obstacle down by 3px
+    this.top += 3;
+    // Update the obstacle's position on the screen
+    this.updatePosition();
+  }
+}

js/player.js

@@ -0,0 +1,65 @@
+class Player {
+  constructor(gameScreen, left, top, width, height, imgSrc) {
+    this.gameScreen = gameScreen;
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+    this.directionX = 0;
+    this.directionY = 0;
+    this.element = document.createElement("img");
+    this.element.src = imgSrc;
+    this.element.style.position = "absolute";
+    this.element.style.height = `${height}px`;
+    this.element.style.width = `${width}px`;
+    this.element.style.left = `${left}px`;
+    this.element.style.top = `${top}px`;
+
+    this.gameScreen.appendChild(this.element);
+  }
+
+  move() {
+    this.left += this.directionX;
+    this.top += this.directionY;
+    if (this.left < 10) {
+      this.left = 10;
+    }
+
+    if (this.top < 10) {
+      this.top = 10;
+    }
+
+    //handles right hand side
+    if (this.left > this.gameScreen.offsetWidth - this.width - 10) {
+      this.top = this.gameScreen.offsetWidth - this.width - 10;
+    }
+
+    //handles bottom
+    if (this.top > this.gameScreen.offsetHeight - this.height - 10) {
+      this.top = this.gameScreen.offsetHeight - this.height - 10;
+    }
+
+    this.updatePosition();
+  }
+
+  updatePosition() {
+    this.element.style.left = `${this.left}px`;
+    this.element.style.top = `${this.top}px`;
+  }
+
+  didCollide(obstacle) {
+    const playerRect = this.element.getBoundingClientRect();
+    const obstacleRect = obstacle.element.getBoundingClientRect();
+
+    if (
+      playerRect.left < obstacleRect.right &&
+      playerRect.right > obstacleRect.left &&
+      playerRect.top < obstacleRect.bottom &&
+      playerRect.bottom > obstacleRect.top
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

js/script.js

@@ -1,12 +1,61 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  const livesTag = document.getElementById("lives");
+  //livesTag.innerText = game.lives;
+
+  let game;
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
   function startGame() {
     console.log("start game");
+    game = new Game();
+    game.start();
+  }
+
+  function handleKeydown(event) {
+    const key = event.key;
+    const possibleKeystrokes = [
+      "ArrowLeft",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowDown",
+    ];
+
+    if (possibleKeystrokes.includes(key)) {
+      event.preventDefault();
+
+      // Update player's directionX and directionY based on the key pressed
+      switch (key) {
+        case "ArrowLeft":
+          game.player.directionX = -3;
+          break;
+        case "ArrowUp":
+          game.player.directionY = -3;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 3;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 3;
+          break;
+      }
+    }
+  }
+
+  // Add the handleKeydown function as an event listener for the keydown event
+  window.addEventListener("keydown", handleKeydown);
+
+  restartButton.addEventListener("click", function () {
+    // Call the restartGame function when the button is clicked
+    restartGame();
+  });
+
+  // The function that reloads the page to start a new game
+  function restartGame() {
+    location.reload();
   }
 };