solved lab

index.html

@@ -19,13 +19,14 @@
       </div>
 
       <div id="game-container">
-        <div>
-          <h2>Stats</h2>
-          <p>Score: <span id="score">0</span></p>
-          <p>Lives: <span id="lives">3</span></p>
-        </div>
+
         <!-- #game-screen is initially hidden using CSS style display: none -->
-        <div id="game-screen"></div>
+        <div id="game-screen">
+          <div id = "score-container">
+            <p>Score: <span id="score">0</span></p>
+            <p>Lives: <span id="lives">3</span></p>
+          </div>
+        </div>
       </div>
 
       <!-- #game-end is initially hidden using CSS style display: none -->
@@ -39,5 +40,7 @@ <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,90 @@
 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.scoreElement = document.querySelector('#score');
+        this.livesElement = document.querySelector('#lives');
+        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);
+    }
+    start(){
+
+        this.gameScreen.style.height = `${this.height}px`;
+        this.gameScreen.style.width = `${this.width}px`;
+        this.startScreen.style.display = 'none';
+        this.gameScreen.style.display = 'flex';
+        this.gameIntervalId = setInterval(() => {
+            this.gameLoop();
+        }, this.gameLoopFrequency);
+    }
+    gameLoop(){
+        this.update();
+        if(this.gameIsOver){
+            clearInterval(this.gameIntervalId);
+        }
+    }
+    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)) {
+            // 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--;
+            }
+        }
+        this.scoreElement.innerText = this.score;
+        this.livesElement.innerText = this.lives;
+        // 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));
+        }
+    }
+    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,29 @@
+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.element.style.transform = "rotate(180deg)";
+
+        this.gameScreen.appendChild(this.element);
+    }
+    move(){
+        this.top +=Math.floor( Math.random() * 15 +1);
+        this.updatePosition();
+    }
+    updatePosition(){
+        this.element.style.top = `${this.top}px`;
+    }
+}

js/player.js

@@ -0,0 +1,64 @@
+class Player {
+    constructor(gameScreen,left,top,width,height,imgSrc){
+        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 = 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);
+    }
+    move(){
+        this.left += this.directionX;
+        this.top += this.directionY;
+        if (this.left < 10) {
+            this.left = 10;
+          }
+
+          // handles top side
+        if (this.top < 10) {
+        this.top = 10;
+        }
+
+        // handles right hand side
+        if (this.left > this.gameScreen.offsetWidth - this.width - 10) {
+        this.left = this.gameScreen.offsetWidth - this.width - 10;
+        }
+
+        // handles bottom side
+        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

@@ -5,8 +5,51 @@ window.onload = function () {
   startButton.addEventListener("click", function () {
     startGame();
   });
+  restartButton.addEventListener("click", function () {
+    restartGame();
+  });
+
+  document.addEventListener('keydown',(event)=>handleKeydown(event))
+  let game; 
 
   function startGame() {
     console.log("start game");
+    game = new Game();
+    game.start();
+  }
+  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 = -3;
+          break;
+        case "ArrowUp":
+          game.player.directionY = -3;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 3;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 3;
+          break;
+      }
+    }
+  }
+
+  function restartGame(){
+    console.log('restart game');
+    location.reload()
   }
 };

styles/style.css

@@ -14,16 +14,7 @@ body {
   justify-content: center;
 }
 
-#game-screen {
-  display: none;
-  align-content: center;
-  padding: 20px 0px;
-  overflow: hidden;
-  position: relative;
-  background-image: url(../images/road.png);
-  background-size: cover;
-  animation: slide 5s linear infinite;
-}
+
 
 @keyframes slide {
   0% {
@@ -64,3 +55,28 @@ body button {
   border-radius: 5px;
   margin-bottom: 20px;
 }
+
+#game-screen {
+  display: none;
+  align-content: center;
+  flex-direction: column;
+
+  overflow: hidden;
+  position: relative;
+  background-image: url(../images/road.png);
+  background-size: cover;
+  animation: slide 5s linear infinite;
+}
+#score-container{
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  background-color: blueviolet;
+}
+#score-container p{
+  color: white;
+  font-weight: bold;
+  font-size: 22px;
+  outline-color: black;
+  outline-width: 10;
+}