make score appear on screen on all times, update its content, clean i…

…t on gameover
mariamagneu · Jun 19, 2024 · 966ca87 · 966ca87
1 parent 4ba6946
commit 966ca87
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;