done

index.html

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

@@ -0,0 +1,23 @@
+class Component {
+  constructor(gameScreen, left, top, width, height, imgSrc) {
+    this.gameScreen = gameScreen;
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+    this.element = document.createElement("img");
+    this.element.src = imgSrc;
+    this.element.style.position = "absolute";
+    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);
+  }
+
+  updatePosition() {
+    this.element.style.left = `${this.left}px`;
+    this.element.style.top = `${this.top}px`;
+  }
+}

js/game.js

@@ -1,3 +1,89 @@
 class Game {
-    // code to be added
-}
+  // code to be added
+  constructor() {
+    this.startScreen = document.querySelector("#game-intro");
+    this.gameScreen = document.querySelector("#game-screen");
+    this.gameEndScreen = document.querySelector("#game-end");
+    this.height = 600;
+    this.width = 500;
+    this.obstacles = [];
+    this.score = 0;
+    this.lives = 3;
+    this.gameIsOver = false;
+    this.gameIntervalId = null;
+    this.gameLoopFrequency = Math.round(1000 / 60);
+    this.player = new Player(
+      this.gameScreen,
+      200,
+      500,
+      100,
+      150,
+      "../images/car.png"
+    );
+    this.playersScore = document.querySelector("#score");
+    this.playersLifes = document.querySelector("#lives");
+  }
+  start() {
+    this.gameScreen.style.width = this.width + "px";
+    this.gameScreen.style.height = this.height + "px";
+    this.startScreen.style.display = "none";
+    this.gameScreen.style.display = "block";
+    this.gameIntervalId = setInterval(() => {
+      this.gameLoop();
+    }, this.gameLoopFrequency);
+  }
+
+  gameLoop() {
+    this.update();
+    this.gameIsOver && clearInterval(this.gameIntervalId); // if statement
+  }
+
+  update() {
+    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)) {
+        obstacle.element.remove();
+        this.obstacles.splice(i, 1);
+        this.lives--;
+        this.playersLifes.innerText = this.lives;
+        i--;
+      }
+      // If the obstacle is off the screen (at the bottom)
+      else if (obstacle.top > this.height) {
+        this.score++;
+        this.playersScore.innerText = this.score;
+        obstacle.element.remove();
+        this.obstacles.splice(i, 1);
+        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));
+      console.log("object created");
+    }
+  }
+
+  endGame() {
+    this.player.element.remove();
+    this.obstacles.forEach((object) => {
+      object.element.remove();
+    });
+    this.gameIsOver = true;
+    this.gameScreen.style.display = "none";
+    this.gameEndScreen.style.display = "block";
+  }
+}

js/obstacle.js

@@ -0,0 +1,21 @@
+// js/obstacle.js
+
+class Obstacle extends Component {
+  constructor(gameScreen) {
+    super(
+      gameScreen,
+      Math.floor(Math.random() * 300 + 70),
+      0,
+      100,
+      150,
+      "./images/redCar.png"
+    );
+  }
+
+  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,48 @@
+class Player extends Component {
+  constructor(gameScreen, left, top, width, height, imgSrc) {
+    super(gameScreen, left, top, width, height, imgSrc);
+
+    this.directionX = 0;
+    this.directionY = 0;
+  }
+
+  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
+    if (this.left < 10) {
+      this.left = 10;
+    }
+    if (this.top < 10) {
+      this.top = 10;
+    }
+    if (this.left > this.gameScreen.offsetWidth - this.width - 10) {
+      this.left = this.gameScreen.offsetWidth - this.width - 10;
+    }
+    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();
+  }
+
+  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
+    ) {
+      console.log("Crash!");
+      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 = null;
+
+  // Function that handles keydown event
+  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 = -1;
+          break;
+        case "ArrowUp":
+          game.player.directionY = -1;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 1;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 1;
+          break;
+      }
+    }
+  }
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
   function startGame() {
+    game = new Game();
+    game.start();
     console.log("start game");
   }
+
+  // Add the handleKeydown function as an event listener for the keydown event
+  window.addEventListener("keydown", handleKeydown);
+
+  restartButton.addEventListener("click", () => {
+    restartGame();
+  });
+
+  function restartGame() {
+    location.reload();
+  }
 };