Funktionierender Punktestand durch Äpfel und Blaubeeren

frontend/game/scripts/Game/Loop.js

@@ -14,6 +14,7 @@ class Loop{
         this.game.playGround.resetOverlay();
         const tiles = data.playground.tiles;
 
+        // Spielfeld Zeichenen
         tiles.forEach((row, x) => {
             row.forEach((tile, y) => {
                 if(!tile) return;
@@ -23,11 +24,21 @@ class Loop{
                         tile.deg
                     )
 
+                    this.game.playGround.setOverlay(x, y, overlay);
+                }
+                else if(tile.class === "Fruit"){
+                    const overlay = new Overlay(
+                        `./assets/Früchte/${tile.type}.png`
+                    )
+
                     this.game.playGround.setOverlay(x, y, overlay);
                 }
             })
         });
 
+        // Score Anzeigen
+        this.game.uiManager.score.innerText = `${data.score}`;
+
         this.game.playGround.draw();
     }
 }

frontend/game/scripts/Game/UI/UIManager.js

@@ -1,12 +1,14 @@
 class UIManager{
     constructor(){
         this.mainDiv = document.getElementById("mainMenu");
+        this.score = undefined;
 
         this.gameCanvasDiv = undefined;
     }
 
     // Erstellen des Grundgerüstes der UI
     loadGameContent(){
+        // Spielfeld erstellen
         this.mainDiv.innerHTML = "";
 
         const body = document.body;
@@ -18,15 +20,32 @@ class UIManager{
         this.gameCanvasDiv.id = "gameCanvasDiv"
 
         this.mainDiv.appendChild(this.gameCanvasDiv);
+
+        // Punktestand erstellen
+        const scoreDiv = document.createElement("div");
+        scoreDiv.id = "scoreDiv";
+        scoreDiv.classList.add("gameShow");
+
+        const title = document.createElement("h2");
+        title.innerText = "Punktestand:";
+        scoreDiv.appendChild(title);
+
+        this.score = document.createElement("h1");
+        this.score.id = "scoreText"
+        this.score.innerText = "0";
+        scoreDiv.appendChild(this.score);
+
+        this.mainDiv.appendChild(scoreDiv);
     }
 
     // Erstellen der Info für welche Schlange man ist
     addSnakeColorInfo(color){
         const infoDiv = document.createElement("div");
-        infoDiv.id = "infoDiv"
+        infoDiv.id = "infoDiv";
+        infoDiv.classList.add("gameShow");
 
-        const header = document.createElement("h1")
-        header.innerText = "Deine Schlange:"
+        const header = document.createElement("h1");
+        header.innerText = "Deine Schlange:";
         infoDiv.appendChild(header);
 
         const snakeTable = document.createElement("table");

frontend/game/style/mainStyle.css

@@ -19,15 +19,27 @@ img{
 }
 
 #infoDiv{
+    height: 75vh;
+    width: 15vw;
+    right: 2.5vw;
+}
+
+#scoreDiv{
+    left: 2.5vw;
+    height: 60px;
+    min-width: 230px;
+
+    justify-content: space-around;
+    flex-direction: row;
+}
+
+.gameShow{
     background-color: rgba(0, 0, 0, 0.3);
 
     position: absolute;
-    height: 75vh;
-    width: 15vw;
 
     border: 5px solid rgba(255, 255, 255, 0.678);
     border-radius: 25px;
-    right: 2.5vw;
 
     text-align: center;