From 966ca87b0070e8a2269a956501db9a71ea3518e4 Mon Sep 17 00:00:00 2001
From: maria magdalena <neumariamagdalena@gmail.com>
Date: Wed, 19 Jun 2024 16:29:16 +0200
Subject: [PATCH] make score appear on screen on all times, update its content,
 clean it on gameover

---
 index.html | 2 ++
 js/game.js | 7 ++++++-
 styles.css | 5 ++++-
 3 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index d519e34..8f65cc6 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
   </head>
   <body>
     <div class="container">
+      <div id="score">Your Score = 0 </div>
+
       <section id="start-screen">
         <nav>
           <button id="record-log">local record-log</button>
diff --git a/js/game.js b/js/game.js
index 402c0e4..d4c3d0e 100644
--- a/js/game.js
+++ b/js/game.js
@@ -76,7 +76,10 @@ class Game {
         if (this.player.didCollideFood(currentFood)) {
           //increase score
 
-          this.score++;
+          const score = document.querySelector("#score");
+          this.score = this.score + 20;
+          score.innerHTML = `Your Score = ${this.score}`;
+
           console.log(this.score);
 
           //make food dissapear (remove from array & dom)
@@ -96,6 +99,8 @@ class Game {
         this.foods.forEach((currentFood, index) => {
           currentFood.destroy();
           this.foods.splice(index, 1);
+          const score = document.querySelector("#score");
+          score.innerHTML = `Your Score = 0`;
         });
       }
     }, 200);
diff --git a/styles.css b/styles.css
index 989f1c7..b81cfc1 100644
--- a/styles.css
+++ b/styles.css
@@ -49,8 +49,11 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+}
+#score {
+  padding: 10px 5px;
 }
-
 .all-buttons {
   display: flex;
   flex-direction: column;
