solvedPedro

index.html

@@ -39,5 +39,9 @@ <h1>Game Over</h1>
 
     <script type="text/javascript" src="js/game.js"></script>
     <script type="text/javascript" src="js/script.js"></script>
+    <script type="text/javascript" src="js/player.js"></script>
+    <script type="text/javascript" src="js/obstacle.js"></script>
+
+
   </body>
 </html>

js/game.js

@@ -1,3 +1,99 @@
 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 = new Player(
+            this.gameScreen,
+            200,
+            500,
+            100,
+            150,
+            "./images/car.png"
+        );
+        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);
+    }   
+
+    startGame() {
+        this.gameScreen.style.height = `${this.height}px`;
+        this.gameScreen.style.width = `${this.width}px`;
+        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();
+        console.log("in the update");
+        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)) {
+              // Remove the obstacle element from the DOM
+              obstacle.element.remove();
+              // Remove obstacle object from the array
+              this.obstacles.splice(i, 1);
+              // Reduce player's lives by 1
+              this.lives--;
+              // Update the counter variable to account for the removed obstacle
+              i--;
+            } // If the obstacle is off the screen (at the bottom)
+            else if (obstacle.top > this.height) {
+              // Increase the score by 1
+              this.score++;
+              // Remove the obstacle from the DOM
+              obstacle.element.remove();
+              // Remove obstacle object from the array
+              this.obstacles.splice(i, 1);
+              // Update the counter variable to account for the removed obstacle
+              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));
+          }
+        }
+
+        // Create a new method responsible for ending the game
+        endGame() {
+          this.player.element.remove();
+          this.obstacles.forEach(obstacle => obstacle.element.remove());
+
+          this.gameIsOver = true;
+
+          // Hide game screen
+          this.gameScreen.style.display = "none";
+          // Show end game screen
+          this.gameEndScreen.style.display = "block";
+        }
+
+
+      }

js/obstacle.js

@@ -0,0 +1,32 @@
+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() {
+      // Update the obstacle's position based on the properties left and top
+      this.element.style.left = `${this.left}px`;
+      this.element.style.top = `${this.top}px`;
+    }
+
+    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,60 @@
+class Player {
+    constructor(gameScreen, left, top, widht, height, imgSrc) {
+        this.gameScreen = gameScreen;    
+        this.left = left;
+        this.top = top;
+        this.width = widht; 
+        this.height = height;
+        this.directionX = 0;
+        this.directionY = 0;
+        this.element = document.createElement('img');
+
+        this.element.src = imgSrc;
+        this.element.style.position = "absolute";
+        this.element.style.width = `${this.width}px`;
+        this.element.style.height = `${this.height}px`;
+        this.element.style.left = `${left}px`;
+        this.element.style.top = `${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();
+        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,72 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  let game;
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
   function startGame() {
+    game = new Game();
+
+    game.startGame();
     console.log("start game");
   }
-};
+  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;
+      }
+
+    }
+
+    document.onkeyup = (event) => {
+      switch (event.key) {
+          case 'ArrowLeft':
+          case 'ArrowRight':
+              game.player.directionX = 0;
+              break;
+          case 'ArrowUp':
+          case 'ArrowDown':
+              game.player.directionY = 0;
+              break;
+      }
+  };
+}
+  // Add an event listener to the restart button
+  restartButton.addEventListener("click", function () {
+    // Call the restartGame function when the button is clicked
+    restartGame();
+  });
+
+  // The function that reloads the page to start a new game
+  function restartGame() {
+    location.reload();
+  }
+  // Add the handleKeydown function as an event listener for the keydown event
+  window.addEventListener("keydown", handleKeydown);
+};