Race Game DOM completed

index.html

@@ -36,8 +36,10 @@ <h1>Game Over</h1>
         <button id="restart-button">Restart</button>
       </div>
     </main>
-
+    <script type="text/javascript" src="js/components.js"></script>
     <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,86 @@
 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.obstacles = [];
+        this.score = 0;
+        this.lives = 3;
+        this.gameIsOver = false;
+        this.gameIntervalId = null;
+        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();
+        const idScore = document.querySelector('#score');
+        const idLives = document.querySelector('#lives');
+
+        for (let i = 0; i < this.obstacles.length; i++) {
+            const obstacle = this.obstacles[i]
+            obstacle.move();
+
+            if (this.player.didCollide(obstacle)) {
+                obstacle.element.remove();
+                this.obstacles.splice(i, 1);
+                this.lives--;
+                idLives.innerHTML = this.lives;
+                i--;
+            }
+            else if (obstacle.top > this.height) {
+                obstacle.element.remove();
+                this.obstacles.splice(i, 1);
+                this.score++;
+                idScore.innerHTML = this.score;
+                i--;
+            }
+
+
+        }
+
+        if (this.lives === 0) {
+            this.endGame();
+        }
+
+        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;
+        this.gameEndScreen.style.display = "block";
+        this.gameScreen.style.display = "none";
+    }
 }

js/obstacle.js

@@ -0,0 +1,30 @@
+class Obstacle {
+    constructor(gameScreen) {
+        this.gameScreen = gameScreen;
+        this.left = Math.floor(Math.random() * this.gameScreen.offsetWidth - 50);
+        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);
+    }
+
+    move() {
+        this.top += 2;
+        this.updatePosition();
+
+    }
+
+    updatePosition() {
+        this.element.style.left = `${this.left}px`;
+        this.element.style.top = `${this.top}px`;
+    }
+}

js/player.js

@@ -0,0 +1,85 @@
+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.left = `${left}px`;
+        this.element.style.top = `${top}px`;
+        this.element.style.width = `${width}px`;
+        this.element.style.height = `${height}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`;
+
+    }
+
+    /* 
+    THIS COULD WORK IF I PASS FIXED VALUES TO THE WIDTH, HEIGHT, LEFT, TOP
+
+
+    didCollide(obstacle) {
+        const playerLeft = this.left;
+        const playerRight = this.left + this.width;
+        const playerTop = this.top;
+        const playerBottom = this.top + this.height;
+        const obstacleLeft = obstacle.left;
+        const obstacleRight = obstacle.left + obstacle.width;
+        const obstacleTop = obstacle.top;
+        const obstacleBottom = obstacle.top + obstacle.height;
+
+        return playerLeft < obstacleRight && playerRight > obstacleLeft && playerTop < obstacleBottom && playerBottom > obstacleTop;
+    }
+}
+ */
+
+
+    didCollide(obstacle) {
+        const playerRect = this.element.getBoundingClientRect();
+        const obstacleRect = obstacle.element.getBoundingClientRect();
+        if (
+            playerRect.left < obstacleRect.left + obstacleRect.width &&
+            playerRect.left + this.width > obstacleRect.left &&
+            playerRect.top < obstacleRect.top + obstacleRect.height &&
+            playerRect.top + this.height > obstacleRect.top
+        ) {
+            return true;
+        }
+        return false;
+    }
+}

js/script.js

@@ -1,12 +1,85 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  let game; // game
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
+  restartButton.addEventListener("click", function () {
+    restartGame();
+  });
+
+  window.addEventListener("keydown", handleKeydown);
+  window.addEventListener("keyup", handleKeyup);
+
+  function handleKeydown(event) {
+    const key = event.key;
+    const possibleKeystrokes = [
+      "ArrowLeft",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowDown",
+    ];
+
+    if (possibleKeystrokes.includes(key)) {
+      event.preventDefault();
+
+      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;
+      }
+    }
+  }
+
+  function handleKeyup(event) {
+    const key = event.key;
+    const possibleKeystrokes = [
+      "ArrowLeft",
+      "ArrowUp",
+      "ArrowRight",
+      "ArrowDown",
+    ];
+
+    if (possibleKeystrokes.includes(key)) {
+
+      switch (key) {
+        case "ArrowLeft":
+          game.player.directionX = 0;
+          break;
+        case "ArrowUp":
+          game.player.directionY = 0;
+          break;
+        case "ArrowRight":
+          game.player.directionX = 0;
+          break;
+        case "ArrowDown":
+          game.player.directionY = 0;
+          break;
+      }
+    }
+  }
+
+
   function startGame() {
     console.log("start game");
+    game = new Game();
+
+    game.start();
+  }
+
+  function restartGame() {
+    location.reload();
   }
 };