done

index.html

@@ -36,7 +36,9 @@ <h1>Game Over</h1>
         <button id="restart-button">Restart</button>
       </div>
     </main>
-
+    <!-- player.js is linked above the others so they have access -->
+    <script type="text/javascript" src="js/player.js"></script>
+    <script type="text/javascript" src="js/obstacle.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,93 @@
 class Game {
-    // code to be added
-}
+  constructor() {
+    this.startScreen = document.querySelector("#game-intro");
+    this.gameScreen = document.querySelector("#game-screen");
+    this.endScreen = document.getElementById("game-end");
+    this.scoreElement = document.getElementById("score");
+    this.livesElement = document.getElementById("lives");
+    this.player = new Player(110, 300, 60, 120, "../images/car.png");
+    this.height = 400;
+    this.width = 300;
+    this.obstacles = [new Obstacle()];
+    this.score = 0;
+    this.lives = 3;
+    this.gameIsOver = false;
+    this.gameIntervalId = null;
+    this.gameLoopFrequency = 1000 / 60;
+    this.counter = 0;
+  }
+  start() {
+    //this sets the height and width of the game screen
+    this.gameScreen.style.height = `${this.height}px`;
+    this.gameScreen.style.width = `${this.width}px`;
+    //this hides the start screen
+    this.startScreen.style.display = "none";
+    //this shows the game screen
+    this.gameScreen.style.display = "block";
+
+    //this starts the loop for the game
+    this.gameIntervalId = setInterval(() => {
+      this.gameLoop();
+    }, this.gameLoopFrequency);
+  }
+  gameLoop() {
+    this.update();
+    //this checks when the game is over and if true then stops the game
+    if (this.gameIsOver === true) {
+      clearInterval(this.gameIntervalId);
+    }
+  }
+  update() {
+    //increment the counter so we can add obstacles when it is a certain number
+    this.counter++;
+    //this updates the player on the DOM based on the directions of the player
+    this.player.move();
+    //this will move all of the obstacles
+    for (let i = 0; i < this.obstacles.length; i++) {
+      const currentObstacle = this.obstacles[i];
+      currentObstacle.move();
+
+      //this is checking for collisions (inside the for loop)
+      const didCollide = this.player.didCollide(currentObstacle);
+      console.log("did it collide", didCollide);
+      if (didCollide) {
+        this.obstacles.splice(i, 1);
+        currentObstacle.element.remove();
+        this.lives--;
+        this.livesElement.innerText = this.lives;
+      }
+
+      //this checks the top of the obstacle and if it is greater than the height of the game screen ...
+      //then it increases the score and removes that obstacle
+      //first increment the score
+      if (currentObstacle.top > this.height + 100) {
+        this.score++;
+        //remove the obstacle from the array
+        this.obstacles.splice(i, 1);
+        //update the DOM to reflect the new score
+        this.scoreElement.innerText = this.score;
+        currentObstacle.element.remove();
+        i--;
+      }
+    }
+
+    //outside the for loop
+    //checking for when the game is over
+    if (this.lives === 0) {
+      console.log("you died, you lost all your lives");
+      this.gameIsOver = true;
+      this.player.element.remove();
+      this.obstacles.forEach((oneObstacle) => {
+        oneObstacle.element.remove();
+      });
+      //hide the game screen and show the game over screen
+      this.gameScreen.style.display = "none";
+      this.endScreen.style.display = "block";
+    }
+
+    //this adds a new obstacle to the array every so many frames
+    if (this.counter % 120 === 0) {
+      this.obstacles.push(new Obstacle());
+    }
+  }
+}

js/obstacle.js

@@ -0,0 +1,30 @@
+class Obstacle {
+  constructor() {
+    this.gameScreen = document.querySelector("#game-screen");
+    this.positionsX = [70, 175, 175, 175, 70];
+    this.randomIndex = Math.floor(Math.random() * this.positionsX.length);
+    this.left = this.positionsX[this.randomIndex];
+    this.top = -200;
+    this.width = 60;
+    this.height = 120;
+    //this creates the <img /> in js to append to the game screen
+    this.element = document.createElement("img");
+    this.element.style.position = "absolute";
+    this.element.src = "../images/redCar.png"; // './images/carImage.png'
+    this.element.style.height = `${this.height}px`;
+    this.element.style.width = `${this.width}px`;
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+    //this actually adds the img to the DOM
+    this.gameScreen.appendChild(this.element);
+  }
+  move() {
+    this.top += 3;
+    this.updatePosition();
+  }
+  //this method visually shows us where the player move
+  updatePosition() {
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+  }
+}

js/player.js

@@ -0,0 +1,59 @@
+class Player {
+  constructor(left, top, width, height, playerImage) {
+    this.gameScreen = document.querySelector("#game-screen");
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+    this.directionX = 0;
+    this.directionY = 0;
+    //this creates the <img /> in js to append to the game screen
+    this.element = document.createElement("img");
+    this.element.style.position = "absolute";
+    this.element.src = playerImage; // './images/carImage.png'
+    this.element.style.height = `${height}px`;
+    this.element.style.width = `${width}px`;
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+    //this actually adds the img to the DOM
+    this.gameScreen.appendChild(this.element);
+  }
+  move() {
+    this.left += this.directionX;
+    this.top += this.directionY;
+    if (this.left < 20) {
+      this.left = 20;
+    }
+    if (this.left + this.width > 280) {
+      this.left = 280 - this.width;
+    }
+    if (this.top < 10) {
+      this.top = 10;
+    }
+    if (this.top + this.height > 440) {
+      this.top = 440 - this.height;
+    }
+
+    this.updatePosition();
+  }
+  //this method visually shows us where the player move
+  updatePosition() {
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}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;
+    }
+  }
+}