solution

index.html

@@ -36,7 +36,8 @@ <h1>Game Over</h1>
         <button id="restart-button">Restart</button>
       </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,69 @@
 class Game {
-    // code to be added
-}
+  constructor() {
+    this.startScreen = document.querySelector("#game-intro");
+    this.gameScreen = document.querySelector("#game-screen");
+    this.gameEndScreen = document.querySelector("#game-end");
+    this.player = new Player(
+      this.gameScreen,
+      200,
+      500,
+      100,
+      150,
+      "./images/car.png"
+    );
+    this.height = 600;
+    this.width = 500;
+    this.obstacle = [];
+    this.score = 0;
+    this.lives = 3;
+    this.gameIsOver = false;
+    this.gameIntervalId;
+    this.gameLoopFrequency = Math.round(1000 / 60);
+  }
+  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();
+    if (this.gameIsOver) {
+      clearInterval(this.gameIntervalId);
+    }
+  }
+  update() {
+    this.player.move();
+    for (let i = 0; i < this.obstacle.length; i++) {
+      const obstacle = this.obstacle[i];
+      obstacle.move();
+      if (this.player.didCollide(obstacle)) {
+        obstacle.element.remove();
+        this.obstacle.splice(i, 1);
+        this.lives--;
+        i--;
+      } else if (obstacle.top > this.height) {
+        this.score++;
+        obstacle.element.remove();
+        this.obstacle.splice(i, 1);
+        i--;
+      }
+    }
+    if (this.lives === 0) {
+      this.endGame();
+    }
+    if (Math.random() > 0.98 && this.obstacle.length < 1) {
+      this.obstacle.push(new Obstacle(this.gameScreen));
+    }
+  }
+  endGame() {
+    this.player.element.remove();
+    this.obstacle.forEach((obstacle) => obstacle.element.remove());
+    this.gameIsOver = true;
+    this.gameScreen.style.display = "none";
+    this.gameEndScreen.style.display = "block";
+  }
+}

js/obstacle.js

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

js/player.js

@@ -0,0 +1,54 @@
+class Player {
+  constructor(gameScreen, left, top, width, height, imageSrc) {
+    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 = imageSrc;
+    this.element.style.position = "absolute";
+    this.element.style.width = this.width + "px";
+    this.element.style.height = this.heigth + "px";
+    this.element.style.left = this.left + "px";
+    this.element.style.top = this.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;
+    }
+    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();
+  }
+  updatePosition() {
+    this.element.style.left = this.left + "px";
+    this.element.style.top = this.top + "px";
+  }
+  didCollide(obstacle) {
+    const playerRect = this.element.getBoundingClientRect(); //shows where the player is on the screen
+    const obstacleRect = obstacle.element.getBoundingClientRect(); //shows where the obstacle is on the screen
+    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,47 @@
 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 = [
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+    ];
+    if (possibleKeystrokes.includes(key)) {
+      event.preventDefault();
+      switch (key) {
+        case "ArrowUp":
+          game.player.directionY = -1;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 1;
+          break;
+        case "ArrowLeft":
+          game.player.directionX = -1;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 1;
+          break;
+      }
+    }
+  }
+  window.addEventListener("keydown", handleKeydown);
+  restartButton.addEventListener("click", function () {
+    restartGame();
+  });
+  function restartGame() {
+    location.reload();
   }
 };