Car race game completed

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -37,6 +37,8 @@ <h1>Game Over</h1>
       </div>
     </main>
 
+    <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,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.livesElement       = document.querySelector('#lives');
+        this.scoreElement       = document.querySelector('#score');
+        this.height             = 600;
+        this.width              = 500;
+        this.obstacles          = [];
+        this.score              = 0;
+        this.lives              = 3;
+        this.gameIsOver         = false;
+        this.genObstacle        = null;
+        this.gameIntervalId     = null;
+        this.gameLoopFrecuency  = Math.round(1000/60);
+
+        this.gameScreen.style.position = "relative";
+
+        let imgSrc  = '../images/car.png';
+        this.player = new Player(this.gameScreen, 210, 510, 80, 130, imgSrc);
+    }
+
+    start (){
+        this.gameScreen.style.height    = `${this.height}px`;
+        this.gameScreen.style.width     = `${this.width}px`;
+        this.startScreen.style.display  = "none";   //Hide Intro screen
+        this.gameScreen.style.display   = "block";  //Show Game screen
+
+        this.gameIntervalId             = setInterval(()=>{
+            this.gameLoop();
+        }, this.gameLoopFrecuency);
+
+        this.genObstacle = setInterval(()=>{
+            let imgSrc        = '../images/redCar.png';
+            const newObstacle = new Obstacle(this.gameScreen);
+            this.obstacles.push(newObstacle);
+        }, 3000);
+    }
+
+    gameLoop (){
+        this.update();
+
+        if (this.gameIsOver) {
+            clearInterval(this.gameIntervalId);
+            clearInterval(this.genObstacle);
+        }
+    }
+
+    update (){
+        this.player.move();
+
+        this.obstacles.forEach((obstacle, index) =>{
+            obstacle.move();
+
+            let didCollide = this.player.didCollide(obstacle);
+            if (didCollide){
+                obstacle.element.remove();      //Remove obstacle after collision
+                this.obstacles.splice(index, 1) //Remove the obstacle from the JS array
+                this.lives -= 1;
+                this.livesElement.textContent = this.lives;
+
+                //Check if all lives lost then end the game
+                if (this.lives === 0){
+                    this.endGame();
+                };
+            }
+            else if (obstacle.top > this.height){
+                this.score += 1;                //Player cleared 1 obstacle so increment score
+                this.scoreElement.textContent = this.score;
+                obstacle.element.remove();      //Remove obstacle after collision
+                this.obstacles.splice(index, 1) //Remove the obstacle from the JS array
+            }
+        })
+    }
+
+    endGame(){
+        this.player.element.remove();
+
+        this.obstacles.forEach(obstacle =>{
+            obstacle.element.remove();
+        })
+
+        this.gameIsOver = true;
+
+        this.gameScreen.style.display   = "none";   //Hide Game screen
+        this.gameEndScreen.style.display= "block";  //Show End game screen
+    }
 }

js/obstacle.js

@@ -0,0 +1,32 @@
+class Obstacle{
+    constructor (gameScreen){
+        const leftPos   = [100, 320]
+
+        this.gameScreen = gameScreen;
+        this.left       = leftPos[Math.floor(Math.random() * leftPos.length)];
+        this.top        = -200;
+        this.width      = 80;
+        this.height     = 130;
+        this.element    = document.createElement("img");
+
+        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.element.src            = '../images/redCar.png'; 
+        this.element.style.position = "absolute";
+
+        this.gameScreen.appendChild(this.element);
+    }
+
+    move(){
+        this.top      += 3;     //Move the opponent down by 3px
+        this.updatePosition();
+    }
+
+    updatePosition(){
+        //Update the opponent car position on the screen
+        this.element.style.left     = `${this.left}px`;
+        this.element.style.top      = `${this.top}px`;
+    }
+}

js/player.js

@@ -0,0 +1,58 @@
+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.style.left     = `${left}px`;
+        this.element.style.top      = `${top}px`;
+        this.element.style.width    = `${width}px`;
+        this.element.style.height   = `${height}px`;
+        this.element.src            = imgSrc; 
+        this.element.style.position = "absolute";
+
+        this.gameScreen.appendChild(this.element);
+    }
+
+    move(){
+        //Move the player car position values within the screen        
+        let newLeft = this.left + this.directionX;
+        let newTop  = this.top  + this.directionY;
+
+        if ((newLeft <= 368) && (newLeft >= 50)){
+            this.left = newLeft;
+        }
+        if ((newTop <= 510) && (newTop >= 0)){
+            this.top = newTop;
+        }
+        this.updatePosition();
+    }
+
+    updatePosition(){
+        //Update the player car position on the screen
+        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();
+
+        //Check collision
+        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,56 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
+  let raceGame;
 
   startButton.addEventListener("click", function () {
     startGame();
   });
 
   function startGame() {
     console.log("start game");
+    raceGame = new Game();
+    raceGame.start();
   }
+
+  //Check if arrow keys were pressed  
+  document.body.addEventListener("keydown", keyDownPressed);
+  function keyDownPressed(e) {
+
+    if (e.keyCode == '38') {// up arrow
+      raceGame.player.directionY -= 1;
+    }
+    else if (e.keyCode == '40') {// down arrow
+      raceGame.player.directionY += 1;
+    }
+    else if (e.keyCode == '37') {// left arrow
+      raceGame.player.directionX -= 1;
+    }
+    else if (e.keyCode == '39') {// right arrow
+      raceGame.player.directionX += 1;
+    }
+  }
+
+  //Check if arrow keys were released  
+  document.body.addEventListener("keyup", keyUpPressed);
+  function keyUpPressed(e) {
+    //Reset the Direction values on key release
+
+    if (e.keyCode == '38') {// up arrow
+      raceGame.player.directionY = 0;
+    }
+    else if (e.keyCode == '40') {// down arrow
+      raceGame.player.directionY = 0;
+    }
+    else if (e.keyCode == '37') {// left arrow
+      raceGame.player.directionX = 0;
+    }
+    else if (e.keyCode == '39') {// right arrow
+      raceGame.player.directionX = 0;
+    }
+  }
+
+  restartButton.addEventListener("click", function () {
+    location.reload();
+  });
 };