Submit lab

index.html

@@ -19,10 +19,24 @@
       </div>
 
       <div id="game-container">
-        <div>
+        <div id="game-stats">
           <h2>Stats</h2>
-          <p>Score: <span id="score">0</span></p>
-          <p>Lives: <span id="lives">3</span></p>
+          <div class="speed">
+            <div>Score:</div>
+            <span id="score">0</span>
+          </div>
+          <div class="speed">
+            <div>Lives:</div>
+            <span id="lives">0</span>
+          </div>
+          <div class="speed">
+            <div>speed X:</div>
+            <span id="speed-x">0</span>
+          </div>
+          <div class="speed">
+            <div>Speed Y:</div>
+            <span id="speed-y">0</span>
+          </div>
         </div>
         <!-- #game-screen is initially hidden using CSS style display: none -->
         <div id="game-screen"></div>
@@ -37,6 +51,9 @@ <h1>Game Over</h1>
       </div>
     </main>
 
+    <script type="text/javascript" src="js/component.js"></script>
+    <script type="text/javascript" src="js/obstacle.js"></script>
+    <script type="text/javascript" src="js/player.js"></script>
     <script type="text/javascript" src="js/game.js"></script>
     <script type="text/javascript" src="js/script.js"></script>
   </body>

js/component.js

@@ -0,0 +1,25 @@
+class Component {
+    constructor(gameScreen, x, y, width, height, imgSrc, speed) {
+        this.gameScreen = gameScreen;
+        this.x = x;
+        this.y = y;
+        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 = this.width + "px";
+        this.element.style.height = this.height + "px";
+        this.element.style.left = this.x + "px";
+        this.element.style.top = this.y + "px";
+        this.gameScreen.appendChild(this.element);
+        this.speed = speed;
+    }
+
+    updatePosition() {
+        this.element.style.left = this.x + "px";
+        this.element.style.top = this.y + "px";
+    }
+}

js/game.js

@@ -1,3 +1,149 @@
 class Game {
-    // code to be added
+    constructor() {
+        this.startScreen = document.getElementById("game-intro");
+        this.gameScreen = document.getElementById("game-screen");
+        this.endScreen = document.getElementById("game-end");
+        this.livesLabel = document.getElementById("lives");
+        this.scoreLabel = document.getElementById("score");
+        this.speedXLabel = document.getElementById("speed-x");
+        this.speedYLabel = document.getElementById("speed-y");
+        this.player = null;
+        this.height = 600;
+        this.width = 500;
+        this.obstacles = [];
+        this.score = 0;
+        this.lives = 3;
+        this.gameIsOver = false;
+        this.gameIntervalId;
+        this.gameLoopFrecuency = 1000 / 60;
+    }
+
+    start() {
+        this.player = new Player(this.gameScreen, 200, 500, 100, 150, "./images/car.png", 2);
+        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.bind(this), this.gameLoopFrecuency);
+    }
+
+    endGame() {
+        this.player.element.remove();
+        this.obstacles.forEach((obstacle) => obstacle.element.remove());
+
+        this.gameIsOver = true;
+
+        this.gameScreen.style.display = "none";
+        this.endScreen.style.display = "block";
+    }
+
+    update() {
+        this.player.move();
+
+        if (this.spawnObstacleCheck()) {
+            let speed = 3;
+            this.generateObstacle(speed);
+        }
+
+        this.collissionCheck();
+
+        this.setLabels();
+
+        const drag = 0.01;
+        this.player.directionX -= drag * Math.sign(this.player.directionX);
+        this.player.directionY -= drag * Math.sign(this.player.directionY);
+
+        if (this.lives == 0) {
+            this.endGame();
+        }
+    }
+
+    gameLoop() {
+        this.update();
+        if (this.gameIsOver) {
+            clearInterval(this.gameIntervalId);
+        }
+    }
+
+    spawnObstacleCheck() {
+        if (this.obstacles.length > 1) {
+            return false;
+        }
+        return Math.random() < 0.05;
+    }
+
+    generateObstacle(speed) {
+        const width = 100;
+        const height = 150;
+        const x = Math.random() * this.width - width * 0.5;
+        const y = -height;
+        const obstacle = new Obstacle(this.gameScreen, x, y, width, height, "./images/redCar.png", speed);
+        this.obstacles.push(obstacle);
+    }
+
+    collissionCheck() {
+        for (let i = this.obstacles.length - 1; i >= 0; i--) {
+            const obstacle = this.obstacles[i];
+
+            obstacle.move()
+            let deleteObstacle = false;
+            if (this.player.didCollide(obstacle)) {
+                this.lives--;
+                deleteObstacle = true;
+            }
+            else if (obstacle.y > this.height + obstacle.height) {
+                this.score++;
+                deleteObstacle = true;
+            }
+            if (deleteObstacle) {
+                obstacle.element.remove();
+                this.obstacles.splice(i, 1);
+            }
+        }
+    }
+
+    setLabels() {
+        this.livesLabel.innerText = this.lives;
+        this.scoreLabel.innerText = this.score;
+        this.speedXLabel.innerText = this.player.directionX.toFixed(2);
+        this.speedYLabel.innerText = this.player.directionY.toFixed(2);
+    }
+
+    handleKeydown(e) {
+        if (this.gameIsOver) {
+            return;
+        }
+
+        const key = e.key;
+        const possibleKeys = [
+            "ArrowLeft",
+            "ArrowUp",
+            "ArrowRight",
+            "ArrowDown",
+            "w", "a", "s", "d",
+        ];
+
+        if (possibleKeys.includes(key)) {
+            e.preventDefault();
+
+            switch (key) {
+                case "ArrowLeft":
+                case "a":
+                    this.player.directionX = -1;
+                    break;
+                case "ArrowRight":
+                case "d":
+                    this.player.directionX = 1;
+                    break;
+                case "ArrowUp":
+                case "w":
+                    this.player.directionY = -1;
+                    break;
+                case "ArrowDown":
+                case "s":
+                    this.player.directionY = 1;
+                    break;
+            }
+        }
+    }
 }

js/obstacle.js

@@ -0,0 +1,11 @@
+class Obstacle extends Component {
+    constructor(gameScreen, x, y, width, height, imgSrc, speed) {
+        super(gameScreen, x, y, width, height, imgSrc, speed);
+
+    }
+
+    move() {
+        this.y += this.speed;
+        this.updatePosition();
+    }
+}

js/player.js

@@ -0,0 +1,27 @@
+class Player extends Component {
+    constructor(gameScreen, x, y, width, height, imgSrc, speed) {
+        super(gameScreen, x, y, width, height, imgSrc, speed);
+    }
+
+    move() {
+        this.x += this.directionX * this.speed;
+        this.y += this.directionY * this.speed;
+        this.x = clamp(this.x, 10, this.gameScreen.offsetWidth - this.width - 10);
+        this.y = clamp(this.y, 10, this.gameScreen.offsetHeight - this.height - 10);
+        this.updatePosition();
+    }
+
+    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;
+        }
+        return false;
+    }
+}

js/script.js

@@ -1,12 +1,20 @@
 window.onload = function () {
-  const startButton = document.getElementById("start-button");
-  const restartButton = document.getElementById("restart-button");
+    const startButton = document.getElementById("start-button");
+    const restartButton = document.getElementById("restart-button");
 
-  startButton.addEventListener("click", function () {
-    startGame();
-  });
+    startButton.addEventListener("click", function () {
+        startGame();
+    });
+    restartButton.addEventListener("click", () => location.reload());
 
-  function startGame() {
-    console.log("start game");
-  }
+    function startGame() {
+        console.log("start game");
+        const game = new Game();
+        window.addEventListener("keydown", (e) => game.handleKeydown(e));
+        game.start();
+    }
 };
+
+function clamp(number, min, max) {
+    return Math.max(min, Math.min(number, max));
+}

styles/style.css

@@ -14,6 +14,22 @@ body {
   justify-content: center;
 }
 
+#game-stats
+{
+  font-family: Consolas, monaco, monospace;
+  padding-right: 50px;
+  width: 200px;
+  text-align: left;
+}
+
+.speed
+{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 150px;
+}
+
 #game-screen {
   display: none;
   align-content: center;