diff --git a/Images/shield.png b/Images/shield.png
new file mode 100644
index 0000000..faf3fb0
Binary files /dev/null and b/Images/shield.png differ
diff --git a/index.html b/index.html
index f60475e..eceda09 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,9 @@
- Lives:
+
Time:
diff --git a/main.js b/main.js
index 1df30ba..f9ebcf3 100644
--- 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
index 5e00a84..f53a838 100644
--- 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;