Statt Table nun canvas zur rendern im Frontend

backend/src/SocketIO/GameManager/Game/GameLoop.js

@@ -24,7 +24,7 @@ class GameLoop{
 
         setTimeout(() => {
             this.loop();
-        }, 250);
+        }, 125);
     }
 
     sendUpdate(){

frontend/game/scripts/Game/Elements/Overlay.js

@@ -0,0 +1,12 @@
+class Overlay{
+    constructor(src = null, deg = 0){
+        this.src = src;
+        this.deg = deg;
+
+        if(!this.src) return;
+        this.image = new Image();
+        this.image.src = src;
+    }
+}
+
+export default Overlay

frontend/game/scripts/Game/Elements/Playground.js

@@ -1,5 +1,6 @@
 import UIManager from "../UI/UIManager.js";
 import Game from "../Game.js";
+import Overlay from "./Overlay.js";
 
 class Playground{
     /**@param {import(Game} game @param {UIManager} uiManager */
@@ -8,73 +9,79 @@ class Playground{
         this.game = game;
         this.uiManager = uiManager;
   
-        this.tiles = [];
-  
         this.tileSize = Math.floor(window.innerHeight / playgroundSize.height);
 
-        this.setupTiles();
+        // Canvas erstellen
-    }
+        this.canvas = document.createElement("canvas");
+        this.canvas.height = this.playgroundSize.height * this.tileSize;
+        this.canvas.width = this.playgroundSize.width * this.tileSize;
+        this.uiManager.gameCanvasDiv.appendChild(this.canvas);
 
-    setupTiles(){
+        this.ctx = this.canvas.getContext("2d");
-        for(let i = 0; i < this.playgroundSize.width; i++){
-            const row = document.createElement("tr");
-            let rowTiles = [];
-            this.uiManager.gameTable.appendChild(row);
 
-            for(let u = 0; u < this.playgroundSize.height; u++){
+        // Hintergrund Bilder Laden
-                const td = document.createElement("td");
+        this.bgImage1 = new Image();
+        this.bgImage1.src = "./assets/Gras/Gras1.png";
+        this.bgImage2 = new Image();
+        this.bgImage2.src = "./assets/Gras/Gras2.png";
 
-                // Container um Überlappung zu ermöglichen
+        // Overlays Also Schlangen und Früchte erstellen
-                const container = document.createElement("div");
+        /** @type {Array<Array<Overlay>>} */
-                container.style.position = "relative";
+        this.overlays = [];
-                container.style.height = this.tileSize + "px";
-                container.style.width = this.tileSize + "px";
 
-                // Das Gras als Hintergrundbild
+        for(let y = 0; y < this.playgroundSize.height; y++){
-                const bgImage = document.createElement("img");
+            const row = [];
-                bgImage.src = (u % 2 == i % 2) ? "./assets/Gras/Gras1.png" : "./assets/Gras/Gras2.png";
+            for(let x = 0; x < this.playgroundSize.width; x++){
-                bgImage.height = this.tileSize;
+                const overlay = new Overlay();
-                bgImage.width = this.tileSize;
+                row.push(overlay);
-                bgImage.classList.add("backgroundTile");
-
-                // Je nach belieben Overlay-Bild
-                const overlayImage = document.createElement("img")
-                overlayImage.style.display = "none"
-                overlayImage.height = this.tileSize;
-                overlayImage.width = this.tileSize;
-                overlayImage.classList.add("overlayTile");
-
-                container.appendChild(bgImage);
-                container.appendChild(overlayImage);
-                td.appendChild(container);
-                row.appendChild(td);
-
-                rowTiles.push(overlayImage);
             }
-
+            this.overlays.push(row);
-            this.tiles.push(rowTiles);
         }
     }
 
-    getOverlayTile(x, y){
+    draw () {
-        if (
+        // Canvas leeren
-            y >= 0 && y < this.tiles.length &&
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-            x >= 0 && x < this.tiles[y].length
-        ) {
-            return this.tiles[y][x];
-        }
 
-        return null;
+        // Jedes Tile / Overlay durchgehen und erst background dann falls da Overlay rendern
+        for(let y = 0; y < this.playgroundSize.height; y++){
+            for (let x = 0; x < this.playgroundSize.width; x++){
+                const posX = x * this.tileSize;
+                const posY = y * this.tileSize;
+
+                // Hintergrund rendern
+                const bgImage = ((x % 2) === (y % 2)) ? this.bgImage1 : this.bgImage2;
+                this.ctx.drawImage(bgImage, posX, posY, this.tileSize, this.tileSize);
+
+                // Falls overlay vorhanden darauf rendern
+                const overlay = this.overlays[y][x];
+                if(!overlay.src) continue;
+                this.ctx.save();
+
+                // Rotation anwenden | Bisschen Komplexes Mathe Funzt :)
+                const centerX = posX + this.tileSize / 2;
+                const centerY = posY + this.tileSize / 2;
+                this.ctx.translate(centerX, centerY);
+                const rotation = (overlay.deg) * Math.PI / 180;
+                this.ctx.rotate(rotation);
+                this.ctx.drawImage(overlay.image, -this.tileSize / 2, -this.tileSize / 2, this.tileSize, this.tileSize);
+                this.ctx.restore();
+            }
+        }
     }
 
-    resetOverlays(){
+    resetOverlay(){
-        this.tiles.forEach(r => {
+        this.overlays.forEach(row => {
-            r.forEach(e => {
+            row.forEach(overlay => {
-                e.style.display = "none";
+                overlay.src = null;
-                e.src = "";
+                overlay.deg = 0;
             })
         })
     }
+
+    setOverlay(x, y, newOverlay){
+        this.overlays[y][x] = newOverlay;
+    }
 }
 
 export default Playground;

frontend/game/scripts/Game/Loop.js

@@ -1,3 +1,4 @@
+import Overlay from "./Elements/Overlay.js";
 import Game from "./Game.js"
 
 class Loop{
@@ -10,23 +11,24 @@ class Loop{
     }
 
     loop(data){
-        this.game.playGround.resetOverlays();
+        this.game.playGround.resetOverlay();
         const tiles = data.playground.tiles;
 
         tiles.forEach((row, x) => {
             row.forEach((tile, y) => {
                 if(!tile) return;
-                console.log(tile)
                 if(tile.class === "Snake"){
-                    /** @type {HTMLImageElement} */
+                    const overlay = new Overlay(
-                    const tileImg = this.game.playGround.getOverlayTile(x, y);
+                        `./assets/Snakes/${tile.color}/${tile.type}.png`,
+                        tile.deg
+                    )
 
-                    tileImg.src = `./assets/Snakes/${tile.color}/${tile.type}.png`;
+                    this.game.playGround.setOverlay(x, y, overlay);
-                    tileImg.style.display = "block"
-                    tileImg.style.transform = `rotate(${tile.deg}deg)`;
                 }
             })
         });
+
+        this.game.playGround.draw();
     }
 }
 

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

@@ -2,7 +2,7 @@ class UIManager{
     constructor(){
         this.mainDiv = document.getElementById("mainMenu");
 
-        this.gameTable = undefined;
+        this.gameCanvasDiv = undefined;
     }
 
     // Erstellen des Grundgerüstes der UI
@@ -14,9 +14,10 @@ class UIManager{
         body.style.backgroundRepeat = "no-repeat";
         body.style.backgroundColor = "#3b3b3f";
 
-        this.gameTable = document.createElement("table");
+        this.gameCanvasDiv = document.createElement("div");
+        this.gameCanvasDiv.id = "gameCanvasDiv"
 
-        this.mainDiv.appendChild(this.gameTable);
+        this.mainDiv.appendChild(this.gameCanvasDiv);
     }
 
     // Erstellen der Info für welche Schlange man ist