ironhack-labs · Unicorn3737 · Oct 17, 2024 · Oct 17, 2024 · Oct 18, 2024 · Oct 18, 2024
diff --git a/images/Dron.PNG b/images/Dron.PNG
diff --git a/images/Gamer.png b/images/Gamer.png
diff --git a/images/Vera.PNG b/images/Vera.PNG
diff --git a/images/Winner.png b/images/Winner.png
diff --git a/images/backstage.jpg b/images/backstage.jpg
diff --git a/images/flag.PNG b/images/flag.PNG
diff --git a/images/lastBackground.jpg b/images/lastBackground.jpg
diff --git a/images/ork.PNG b/images/ork.PNG
diff --git a/images/ork2.png b/images/ork2.png
diff --git a/images/pirozhok.PNG b/images/pirozhok.PNG
diff --git a/images/power.PNG b/images/power.PNG
diff --git a/index.html b/index.html
@@ -5,38 +5,71 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="./styles/style.css" />
-    <title>Island Racer</title>
+    <title>Be Brave as Ukraine</title>
   </head>
   <body>
     <main>
       <!-- #game-intro is initially shown on the game start screen -->
       <div id="game-intro">
-        <img src="./images/logo.png" alt="" class="logo-img" />
+        <img src="./images/Vera.PNG" alt="" class="Vera" />
         <br />
-        <button id="start-button">Start Game</button>
-        <p>Use the left and right arrow to control the car!</p>
+        <button id="start-button">
+          Support
+          <img
+            src="https://a.slack-edge.com/production-standard-emoji-assets/14.0/google-large/1f1fa-1f1e6.png"
+          />
+        </button>
+        <p>THIS IS VERA!</p>
+        <p>
+          AND SHE IS UKRAINIAN WHICH IS SUPPORT UKRAINE!<img
+            src="./images/power.PNG"
+          />
+        </p>
+        <p>LET'S HELP HER TO MAKE IT</p>
+        <p>
+          Use the left and right arrow to control the gamer and space for
+          shooting!
+        </p>
         <img src="./images/arrows.png" alt="" class="arrows-img" />
       </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>
+          <p>Orks: <span id="orks">0</span></p>
+          <p>Drones: <span id="drones">0</span></p>
+          <p>Chances: <span id="chances">3</span></p>
         </div>
         <!-- #game-screen is initially hidden using CSS style display: none -->
         <div id="game-screen"></div>
       </div>
 
       <!-- #game-end is initially hidden using CSS style display: none -->
       <div id="game-end">
-        <img src="./images/logo.png" alt="" class="logo-img" />
-        <h1>Game Over</h1>
+        <img src="./images/Winner.png" alt="" class="Winner-img" />
+        <h1>Be Brave as Ukraine!</h1>
         <br />
-        <button id="restart-button">Restart</button>
+        <button id="restart-button">Try again</button>
+        <div>
+          <h2>Stats</h2>
+          <p>Orks: <span id="orks/end"></span></p>
+          <p>Drones: <span id="drones/end"></span></p>
+          <p>Chances: <span id="chances">0</span></p>
+        </div>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Londrina+Sketch&family=Sixtyfour+Convergence&display=swap"
+          rel="stylesheet"
+        />
+        <h3>Game creator:</h3>
+        <h4>Turek Anna</h4>
+        <h5>Illustrator:</h5>
+        <h6>Turek Sofia (my daughter)</h6>
       </div>
     </main>
 
+    <script type="text/javascript" src="js/projectile.js"></script>
+    <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>

diff --git a/js/game.js b/js/game.js
@@ -1,3 +1,113 @@
 class Game {
-    // code to be added
-}
+  constructor() {
+    this.startScreen = document.querySelector("#game-intro");
+    this.gameScreen = document.querySelector("#game-screen");
+    this.endScreen = document.querySelector("#game-end");
+    this.gameContainer = document.querySelector("#game-container");
+    this.orksElement = document.getElementById("orks");
+    this.chancesElement = document.getElementById("chances");
+    this.dronesElement = document.getElementById("drones");
+    this.orksElementEnd = document.getElementById("orks/end");
+    this.dronesElementEnd = document.getElementById("drones/end");
+    this.player = new Player(350, 520, 90, 100, "images/Gamer.png");
+    this.height = 600;
+    this.width = 800;
+    this.obstacles = [new Obstacle("images/ork.PNG", "ork")];
+    this.projectiles = [];
+    this.orks = 0;
+    this.drones = 0;
+    this.chances = 3;
+    this.gameIsOver = false;
+    this.gameIntervalId = null;
+    this.gameLoopFrequency = 1000 / 60;
+    this.counter = 0;
+    this.verka = new Audio("sounds/verka.mp3");
+    this.verka.volume = 0.1;
+  }
+  start() {
+    this.verka.play();
+    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() {
+    this.update();
+    if (this.gameIsOver === true) {
+      clearInterval(this.gameIntervalId);
+      console.log("you loos");
+    }
+  }
+  update() {
+    this.counter++;
+    this.player.move();
+
+    for (let i = 0; i < this.projectiles.length; i++) {
+      const currentProjectile = this.projectiles[i];
+      currentProjectile.move();
+      for (let j = 0; j < this.obstacles.length; j++) {
+        const currentObstacleInProjectileLoop = this.obstacles[j];
+        const didCollideWithProjectile = currentProjectile.didCollide(
+          currentObstacleInProjectileLoop
+        );
+        if (didCollideWithProjectile) {
+          currentProjectile.element.remove();
+          currentObstacleInProjectileLoop.element.remove();
+          this.projectiles.splice(i, 1);
+          this.obstacles.splice(j, 1);
+        }
+      }
+    }
+    for (let i = 0; i < this.obstacles.length; i++) {
+      const currentObstacle = this.obstacles[i];
+      currentObstacle.move();
+
+      const didCollide = this.player.didCollide(currentObstacle);
+      console.log("did it collide", currentObstacle);
+      if (didCollide && currentObstacle.type === "ork") {
+        this.obstacles.splice(i, 1);
+        currentObstacle.element.remove();
+        this.chances--;
+        this.chancesElement.innerText = this.chances;
+      }
+      if (didCollide && currentObstacle.type === "Dron") {
+        this.obstacles.splice(i, 1);
+        currentObstacle.element.remove();
+        this.drones++;
+        this.dronesElement.innerText = this.drones;
+      }
+      if (currentObstacle.top > this.height + 100) {
+        this.orks++;
+        this.obstacles.splice(i, 1);
+        this.orksElement.innerText = this.orks;
+        currentObstacle.element.remove();
+        i--;
+      }
+    }
+    //gameIsOver
+    if (this.chances === 0) {
+      console.log("you loos");
+      this.gameIsOver = true;
+      this.player.element.remove();
+      this.verka.pause();
+      this.obstacles.forEach((oneObstacle) => {
+        oneObstacle.element.remove();
+      });
+      this.gameScreen.style.display = "none";
+      this.gameContainer.style.display = "none";
+      this.endScreen.style.display = "block";
+      this.orksElementEnd.innerText = this.orks;
+      this.dronesElementEnd.innerText = this.drones;
+    }
+    if (this.counter % 180 === 0) {
+      this.obstacles.push(new Obstacle("images/ork.PNG", "ork"));
+    }
+    if (this.counter % 250 === 0) {
+      this.obstacles.push(new Obstacle("images/Dron.PNG", "Dron"));
+    }
+  }
+}
diff --git a/js/obstacle.js b/js/obstacle.js
@@ -0,0 +1,28 @@
+class Obstacle {
+  constructor(img, type) {
+    this.gameScreen = document.querySelector("#game-screen");
+    this.positionsX = [120, 550];
+    this.randomIndex = Math.floor(Math.random() * this.positionsX.length);
+    this.left = this.positionsX[this.randomIndex];
+    this.top = -20;
+    this.width = 70;
+    this.height = 70;
+    this.type = type;
+    this.element = document.createElement("img");
+    this.element.style.position = "absolute";
+    this.element.src = img;
+    this.element.style.height = `${this.height}px`;
+    this.element.style.width = `${this.width}px`;
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+    this.gameScreen.appendChild(this.element);
+  }
+  move() {
+    this.top += 3;
+    this.updatePosition();
+  }
+  updatePosition() {
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+  }
+}
diff --git a/js/player.js b/js/player.js
@@ -0,0 +1,48 @@
+class Player {
+  constructor(left, top, width, height, playerImage) {
+    this.gameScreen = document.querySelector("#game-screen");
+    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.position = "absolute";
+    this.element.src = playerImage;
+    this.element.style.height = `${height}px`;
+    this.element.style.width = `${width}px`;
+    this.element.style.top = `${top}px`;
+    this.element.style.left = `${left}px`;
+    this.gameScreen.appendChild(this.element);
+  }
+  move() {
+    if (this.left > 20 && this.left + this.width < 800) {
+      this.left += this.directionX;
+    }
+    if (this.top > 10 && this.top + this.height < 640) {
+      this.top += this.directionY;
+    }
+    this.top += this.directionY;
+    this.updatePosition();
+  }
+  updatePosition() {
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}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;
+    }
+  }
+}
diff --git a/js/projectile.js b/js/projectile.js
@@ -0,0 +1,40 @@
+class Projectile {
+  constructor(left, top) {
+    this.gameScreen = document.querySelector("#game-screen");
+    this.left = left;
+    this.top = top;
+    this.width = 20;
+    this.height = 30;
+    this.element = document.createElement("img");
+    this.element.style.position = "absolute";
+    this.element.src = "images/pirozhok.PNG";
+    this.element.style.height = `${this.height}px`;
+    this.element.style.width = `${this.width}px`;
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+    this.gameScreen.appendChild(this.element);
+  }
+  move() {
+    this.top -= 3;
+    this.updatePosition();
+  }
+  updatePosition() {
+    this.element.style.top = `${this.top}px`;
+    this.element.style.left = `${this.left}px`;
+  }
+  didCollide(obstacle) {
+    const projectileRect = this.element.getBoundingClientRect();
+    const obstacleRect = obstacle.element.getBoundingClientRect();
+
+    if (
+      projectileRect.left < obstacleRect.right &&
+      projectileRect.right > obstacleRect.left &&
+      projectileRect.top < obstacleRect.bottom &&
+      projectileRect.bottom > obstacleRect.top
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
diff --git a/js/script.js b/js/script.js
@@ -1,12 +1,39 @@
 window.onload = function () {
   const startButton = document.getElementById("start-button");
   const restartButton = document.getElementById("restart-button");
-
+  let ourGame;
   startButton.addEventListener("click", function () {
     startGame();
   });
-
+  restartButton.addEventListener("click", () => {
+    window.location.reload();
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.code === "ArrowRight") {
+      ourGame.player.directionX = 3;
+    }
+    if (event.code === "ArrowLeft") {
+      ourGame.player.directionX = -3;
+    }
+    if (event.code === "ArrowUp") {
+      ourGame.player.directionY = -3;
+    }
+    if (event.code === "ArrowDown") {
+      ourGame.player.directionY = 3;
+    }
+    if (event.code === "Space") {
+      ourGame.projectiles.push(
+        new Projectile(ourGame.player.left + 35, ourGame.player.top - 40)
+      );
+    }
+  });
+  document.addEventListener("keyup", () => {
+    ourGame.player.directionX = 0;
+    ourGame.player.directionY = 0;
+  });
   function startGame() {
     console.log("start game");
+    ourGame = new Game();
+    ourGame.start();
   }
 };
diff --git a/sounds/verka.mp3 b/sounds/verka.mp3