Game feature 2 goodie movement

assets/css/game.css

@@ -53,6 +53,54 @@ body {
   }
 }
 
+#goodie {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 60px;
+  left: 550px;
+  background-image: url("https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png");
+  background-size: cover;
+}
+
+.goodie-animation {
+  animation: goodie1 3.33s infinite;
+}
+
+@keyframes goodie1 {
+  0% {
+    left: 550px;
+  }
+
+  100% {
+    left: -50px;
+  }
+}
+
+@keyframes goodie2 {
+  0% {
+    left: 550px;
+    top: 100px;
+  }
+
+  100% {
+    left: -50px;
+    top: 20px;
+  }
+}
+
+@keyframes goodie3 {
+  0% {
+    left: 550px;
+    top: 100px;
+  }
+
+  100% {
+    left: -50px;
+    top: 0px;
+  }
+}
+
 .jump-animation {
   animation: jump 0.5s;
 }

assets/js/game.js

@@ -1,5 +1,7 @@
 const dino = document.getElementById("dino")
 const rock = document.getElementById("rock")
+const goodie = document.getElementById("goodie")
+const goodiesCollected = document.getElementById("goodies-value")
 const score = document.getElementById("score")
 const highscore = document.getElementById("highscore-value")
 const gameContainer = document.getElementById("game")
@@ -13,6 +15,7 @@ const startGame = () => {
   gameOver.style.display = "none";
   background.classList.add("bg-animation")
   rock.classList.add("rock-animation")
+  goodie.classList.add("goodie-animation")
   startScreen.style.display = "none"
   resetScore()
   startGameLoop()
@@ -22,6 +25,7 @@ const startGame = () => {
 
 const resetScore = () => {
   score.innerText = 0
+  goodiesCollected.innerText = 0
 }
 
 const jump = () => {
@@ -62,25 +66,54 @@ const stopGame = async () => {
   }
   background.classList.remove("bg-animation")
   rock.classList.remove("rock-animation")
+  goodie.classList.remove("goodie-animation")
+
   startScreen.style.display = "block"
   gameLoopInterval = clearInterval(gameLoopInterval)
 }
 
+const randomizeGoodieAnimation = (goodieLeft) => {
+  const max = 3;
+  const min = 1;
+  const random = Math.floor(Math.random() * (max - min + 1) + min);
+  if (goodieLeft === 550) {
+    goodie.style.animationName = "goodie" + random;
+  }
+};
+
+
 const startGameLoop = () => {
   gameLoopInterval = window.setInterval(() => {
     const dinoTop = parseInt(window.getComputedStyle(dino)
       .getPropertyValue('top'))
     const rockLeft = parseInt(window.getComputedStyle(rock)
       .getPropertyValue('left'))
+    const goodieLeft = parseInt(window.getComputedStyle(goodie)
+      .getPropertyValue('left'))
+    const goodieTop = parseInt(window.getComputedStyle(goodie)
+      .getPropertyValue('top'))
 
     score.innerText = Number(score.innerText) + 1
 
+    randomizeGoodieAnimation(goodieLeft)
+
     if (rockLeft < 0) {
       rock.style.display = 'none'
     } else {
       rock.style.display = ''
     }
 
+    if (goodieLeft < 0) {
+      goodie.style.display = 'none'
+    } else {
+      goodie.style.display = ''
+    }
+
+    if (goodieLeft < 50 && dinoTop < (goodieTop + 50)) {
+      goodie.style.display = 'none'
+      goodiesCollected.innerText = Number(goodiesCollected.innerText) + 1
+    }
+
     if (rockLeft < 50 && rockLeft > 0 && dinoTop > 150) {
       stopGame()
     }

game.html

@@ -63,17 +63,20 @@
       <div id="background"></div>
       <div id="dino"></div>
       <div id="rock"></div>
+      <div id="goodie"></div>
     </div>
 
 
     <div class="gameRow score" id="score">0</div>
     <div class="gameRow highscore">
+
       Highscore <span id="highscore-value">0</span>
-    </div>
+    </div> 
+    <div class="gameRow">Goodies <span id="goodies-value">0</span> </div>
 
     <div class="gameRow gameOver" id="gameOver">
-      Glückwunsch, Sie haben einen neuen Highscore erzielt!<br>
-      Besuchen Sie unseren <a href="./shop.html">Shop</a> und lösen Sie ihren Gewinn ein.
+      Glückwunsch...!<br>
+
     </div>