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,24 @@
+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,99 @@
+// js/game.js
+
 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 = null;
+      this.gameLoopFrequency = Math.round(1000 / 60); // 60fps
+    }
+
+    start() {
+      // Set the game screen dimensions
+      this.gameScreen.style.height = `${this.height}px`;
+      this.gameScreen.style.width = `${this.width}px`;
+
+      // Hide the start screen and show the game screen
+      this.startScreen.style.display = "none";
+      this.gameScreen.style.display = "block";
+
+      // Initialize player
+      this.player = new Player(this.gameScreen, 200, 500, 100, 150, "./images/car.png");
+
+      // Start the game loop
+      this.gameIntervalId = setInterval(() => {
+        this.gameLoop();
+      }, this.gameLoopFrequency);
+    }
+
+    gameLoop() {
+      // Check for the game over condition
+      if (this.gameIsOver) {
+        clearInterval(this.gameIntervalId);
+        return;
+      }
+
+      this.update();
+    }
+
+    update() {
+      this.player.move();
+
+      // Check for collisions and obstacle updates
+      for (let i = 0; i < this.obstacles.length; i++) {
+        const obstacle = this.obstacles[i];
+        obstacle.move();
+
+        if (this.player.didCollide(obstacle)) {
+          // Remove the obstacle element from the DOM
+          obstacle.element.remove();
+          this.obstacles.splice(i, 1);
+
+          // Decrease lives
+          this.lives--;
+          i--;
+        } else if (obstacle.top > this.height) {
+          // Increase score if obstacle is passed
+          this.score++;
+          obstacle.element.remove();
+          this.obstacles.splice(i, 1);
+          i--;
+        }
+      }
+
+      // Create new obstacles randomly
+      if (Math.random() > 0.98 && this.obstacles.length < 1) {
+        this.obstacles.push(new Obstacle(this.gameScreen));
+      }
+
+      // End the game if lives are zero
+      if (this.lives === 0) {
+        this.endGame();
+      }
+    }
+
+    endGame() {
+      // Remove player and obstacles from the DOM
+      this.player.element.remove();
+      this.obstacles.forEach(obstacle => obstacle.element.remove());
+
+      // Display the end screen
+      this.gameIsOver = true;
+      this.gameScreen.style.display = "none";
+      this.gameEndScreen.style.display = "block";
+    }
+  }
+
+
+
+
+

js/obstacle.js

@@ -0,0 +1,12 @@
+// js/obstacle.js
+
+class Obstacle extends Component {
+    constructor(gameScreen) {
+      super(gameScreen, Math.floor(Math.random() * 300 + 70), 0, 100, 150, "./images/redCar.png");
+    }
+
+    move() {
+      this.top += 3; // Move downwards
+      this.updatePosition();
+    }
+  }

js/player.js

@@ -0,0 +1,39 @@
+//js/player.js
+
+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 position based on direction
+      this.left += this.directionX;
+      this.top += this.directionY;
+
+      // Boundary checks to keep player within the 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;
+      }
+
+      this.updatePosition();
+    }
+
+    didCollide(obstacle) {
+        const playerRect = this.element.getBoundingClientRect();
+        const obstacleRect = obstacle.element.getBoundingClientRect();
+
+        return (
+          playerRect.left < obstacleRect.right &&
+          playerRect.right > obstacleRect.left &&
+          playerRect.top < obstacleRect.bottom &&
+          playerRect.bottom > obstacleRect.top
+        );
+      }
+    }

js/script.js

@@ -1,12 +1,61 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  let game;
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
+  restartButton.addEventListener("click", function () {
+    // Call the restartGame function when the button is clicked
+    restartGame();
+  });
+
   function startGame() {
     console.log("start game");
+    game = new Game();
+
+    game.start();
+  }
+
+  // The function that reloads the page to start a new game
+  function restartGame() {
+    location.reload();
   }
-};
+
+  // 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;
+      }
+    }
+  }
+
+  // Add the handleKeydown function as an event listener for the keydown event
+  window.addEventListener("keydown", handleKeydown);
+};