Add image to Life Counter

Bopally · Oct 16, 2024 · 0e9cfdc · 0e9cfdc
1 parent 6f28629
commit 0e9cfdc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/Images/shield.png b/Images/shield.png
diff --git a/index.html b/index.html
@@ -10,7 +10,9 @@
 
   <body>
     <div id="board"></div>
-    <div id="life-counter">Lives:</div>
+    <div id="life-counter">
+      <div id="hearts"></div>
+    </div>
     <div id="time-counter">Time:</div>
     <div id="recipe-display"><ul id="recipe-list"></ul></div>
 

diff --git a/main.js b/main.js
@@ -183,6 +183,23 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 });
 
+// Function LifeCounter
+function updateHearts(lifeCounter) {
+  const heartsContainer = document.getElementById("hearts");
+  if (!heartsContainer) {
+    console.error("Element #hearts not found in the DOM");
+    return;
+  }
+  console.log("Updating hearts, lifeCounter:", lifeCounter);
+  heartsContainer.innerHTML = ""; // Clear existing hearts
+
+  for (let i = 0; i < lifeCounter; i++) {
+    const heart = document.createElement("img");
+    heart.src = "./Images/heart.png";
+    heart.alt = "Life";
+    heartsContainer.appendChild(heart);
+  }
+}
 // Function to start the Cookie Game
 function startGame() {
   const board = document.getElementById("board");
@@ -202,7 +219,9 @@ function startGame() {
   let lifeCounter = 3;
 
   const lifeCounterElement = document.getElementById("life-counter");
-  lifeCounterElement.textContent = `Lives : ${lifeCounter}`;
+  console.log("Starting game, initializing hearts.");
+  updateHearts(lifeCounter);
+  //lifeCounterElement.textContent = `Lives : ${lifeCounter}`;
 
   const timeCounterElement = document.getElementById("time-counter");
   timeCounterElement.textContent = `Time: ${timeLeft}`;
@@ -268,11 +287,10 @@ function startGame() {
       if (!shieldActive && isColliding(player, obstacle)) {
         console.log("Collision detected!");
         lifeCounter--;
+        updateHearts(lifeCounter); // update our lifes counter
         obstacle.domElement.remove();
         obstacleArr.splice(index, 1);
 
-        lifeCounterElement.textContent = `Lives : ${lifeCounter}`;
-
         if (lifeCounter === 0) {
           console.log("Game Over");
           gameOverMessage.style.display = "block";
@@ -334,10 +352,6 @@ function startGame() {
   function resetGame() {
     gameOverMessage.style.display = "none";
     victoryMessage.style.display = "none";
-    timeLeft = 40;
-    lifeCounter = 3;
-    lifeCounterElement.textContent = `Lives : ${lifeCounter}`;
-    timeCounterElement.textContent = `Time: ${timeLeft}`;
 
     obstacleArr.forEach((obstacle, index) => {
       obstacle.domElement.remove();

diff --git a/style/style.css b/style/style.css
@@ -13,7 +13,7 @@ body {
 #board {
   height: 800px;
   width: 800px;
-  border: 2px solid black;
+  border: 5px solid black;
   position: relative;
   overflow: hidden;
 }
@@ -59,6 +59,18 @@ body {
   border-radius: 5px;
   text-align: center;
 }
+
+#hearts {
+  display: flex;
+  align-items: center;
+}
+
+#hearts img {
+  width: 50px;
+  height: 50px;
+  margin-right: 5px;
+}
+
 /* Instructions Style */
 #instructions {
   background: white;
@@ -139,7 +151,7 @@ body {
   border-radius: 10px;
 }
 
-#start-again-button {
+.start-again-button {
   margin-top: 20px;
   padding: 10px 20px;
   font-size: 20px;