FT_RMT_2408_ES Alejandro S. del Solo

index.html

@@ -39,5 +39,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,111 @@
 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.scoreNode = document.querySelector("#score");
+        this.livesNode = 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.scores = 0;
+        this.lives = 3;
+        this.gameIsOver = false;
+        this.gameIntervalId = null;
+        this.gameLoopFrequency = 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 = "block";
+        this.gameIntervalId = setInterval(() => {this.gameLoop()}, this.gameLoopFrequency)
+    };
+    gameLoop(){
+        // console.log("in the game loop");
+
+        this.update();
+        if (this.gameIsOver) {
+            clearInterval(this.gameIntervalId)
+        }
+    };
+
+    checkCollisions(){
+        for (let i = 0; i < this.obstacles.length; i++) {
+        const obstacle = this.obstacles[i];
+        obstacle.move(); // esto no entiendo muy bien por que se encuentra aqui.
+
+        if (this.player.didCollide(obstacle)) {
+            obstacle.element.remove();
+            this.obstacles.splice(i, 1);
+            this.lives--;
+            this.livesNode.innerText = this.lives;
+            i--;
+        }
+        else if (obstacle.top > this.height) {
+            this.scores++;
+            this.scoreNode.innerText = this.scores;
+            obstacle.element.remove();
+            this.obstacles.splice(i, 1);
+            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;
+
+        // Hide game screen
+        this.gameScreen.style.display = "none";
+        // Show end game screen
+        this.gameEndScreen.style.display = "block";
+      }
+
+    update(){
+        this.player.move();
+        this.checkCollisions();
+    };
+}
+
+
+// ==============    TERRENO DE PRUEBAS    ==============
+// let lista = [1, 3, 2, 4, 2, 1, 2, 5]
+// let index = []
+// for(let i = 0; i < lista.length; i++){
+//     if  (lista[i] % 2 === 0){
+//         index.push(i)
+//     }
+// }
+// index.forEach((index)=>{
+//     lista.splice(index, 1)
+// })
+// console.log(lista);
+
+// // ------------- SOLUCION ESTABLE -------------
+// is (lista.length > 0){
+//     for(let i = lista.length - 1; i >= 0; i--){
+//         if  (lista[i] % 2 === 0){
+//             lista.splice(i, 1);
+//         }
+//     }
+// }
+// console.log(lista);

js/obstacle.js

@@ -0,0 +1,29 @@
+class Obstacle{
+    constructor(gameScreen){
+        this.screenGame = gameScreen;
+        this.left = Math.floor(Math.random()* 300 + 70);
+        this.top = -150;
+        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.screenGame.appendChild(this.element);
+    }
+
+    move(){
+        this.top += 3;
+        this.updatePosition();
+    };
+
+    updatePosition(){
+        this.element.style.left = `${this.left}px`;
+        this.element.style.top = `${this.top}px`;
+    };
+}

js/player.js

@@ -0,0 +1,62 @@
+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";
+        // Set up the default element's property values
+        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);
+    }
+    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,54 @@
 window.onload = function () {
+
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
-
+  let game;
+
   startButton.addEventListener("click", function () {
     startGame();
+
+  });
+
+  restartButton.addEventListener("click", function () {
+    // Call the restartGame function when the button is clicked
+    restartGame();
   });
 
   function startGame() {
-    console.log("start game");
+    game = new Game();
+    game.start();
+  }
+
+  function restartGame() {
+    location.reload();
+  }
+
+  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;
+      }
+    }
   }
+  window.addEventListener("keydown", handleKeydown);
 };