solved lab

index.html

@@ -37,6 +37,8 @@ <h1>Game Over</h1>
       </div>
     </main>
 
+    <script type="text/javascript" src="js/obstacle.js"></script>
+    <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>
   </body>

js/game.js

@@ -1,3 +1,100 @@
 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 = null;
+    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); // 60fps
+
+    this.player = new Player(
+      this.gameScreen,
+      200,
+      500,
+      100,
+      150,
+      "./images/car.png"
+    );
+  }
+
+  start() {
+    // Set the height and width of the game screen
+    this.gameScreen.style.height = `${this.height}px`;
+    this.gameScreen.style.width = `${this.width}px`;
+
+    // Hide the start screen
+    this.startScreen.style.display = "none";
+
+
+    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() {
+    this.player.move();
+
+
+    for (let i = 0; i < this.obstacles.length; i++) {
+      const obstacle = this.obstacles[i];
+      obstacle.move();
+
+      if (this.player.didCollide(obstacle)) {
+        obstacle.element.remove();
+
+        this.obstacles.splice(i, 1);
+
+        this.lives--;
+
+        i--;
+      } else if (obstacle.top > this.height) {
+        this.score++;
+
+        obstacle.element.remove();
+
+        this.obstacles.splice(i, 1);
+
+        i--;
+      }
+    }
+
+    if (this.lives === 0) {
+      this.endGame();
+    }
+
+    if (Math.random() > 0.98 && this.obstacles.length < 1) {
+      this.obstacles.push(new Obstacle(this.gameScreen));
+    }
+  }
+
+  endGame() {
+    this.player.element.remove();
+    this.obstacles.forEach((obstacle) => obstacle.element.remove());
+
+    this.gameIsOver = true;
+
+    this.gameScreen.style.display = "none";
+
+    this.gameEndScreen.style.display = "block";
+  }
+}

js/obstacle.js

@@ -0,0 +1,28 @@
+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() {
+    this.element.style.left = this.left + "px";
+    this.element.style.top = this.top + "px";
+  }
+
+  move() {
+    this.top += 3;
+    this.updatePosition();
+  }
+}

js/player.js

@@ -0,0 +1,73 @@
+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";
+    // Set up the default element's property values
+    this.element.style.width = `${width}px`;
+    this.element.style.height = `${height}px`;
+    this.element.style.left = `${left}px`;
+    this.element.style.top = `${top}px`;
+
+    this.gameScreen.appendChild(this.element);
+  }
+
+  move() {
+    // Update player's car position based on directionX and directionY
+    this.left += this.directionX;
+    this.top += this.directionY;
+
+    // Ensure the player's car stays within the game screen
+    // handles left hand side
+    if (this.left < 10) {
+      this.left = 10;
+    }
+
+    // handles top side
+    if (this.top < 10) {
+      this.top = 10;
+    }
+
+    // handles right hand side
+    if (this.left > this.gameScreen.offsetWidth - this.width - 10) {
+      this.left = this.gameScreen.offsetWidth - this.width - 10;
+    }
+
+    // handles bottom side
+    if (this.top > this.gameScreen.offsetHeight - this.height - 10) {
+      this.top = this.gameScreen.offsetHeight - this.height - 10;
+    }
+
+    // Update the player's car position on the screen
+    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,58 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  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",
+    ];
+
+    // Check if the pressed key is in the possibleKeystrokes array
+    if (possibleKeystrokes.includes(key)) {
+      event.preventDefault();
+
+      // Update player's directionX and directionY based on the key pressed
+      switch (key) {
+        case "ArrowLeft":
+          game.player.directionX = -2;
+          break;
+        case "ArrowUp":
+          game.player.directionY = -2;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 2;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 2;
+          break;
+      }
+    }
+  }
+
+  // Add the handleKeydown function as an event listener for the keydown event
+  window.addEventListener("keydown", handleKeydown);
+
+  restartButton.addEventListener("click", function () {
+    restartGame();
+  });
+
+  function restartGame() {
+    location.reload();
   }
 };