From 76392172b5ee4391dc0a341e99393301c0afe6cf Mon Sep 17 00:00:00 2001 From: Jonas Date: Mon, 28 Apr 2025 14:59:18 +0200 Subject: [PATCH] fix: correct collision message and improve asset loading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix typo in collision message from "Ihr seit koolidiert!" to "Es gab eine Kollision!" - Reorder TODO comment in endGame method - Rename "Früchte" folder to "Fruits" for consistency - Add TileLoader class to preload and cache game assets - Refactor Overlay class to use TileLoader for improved image handling --- .../GameManager/Game/Classes/Snake/Snake.js | 2 +- backend/src/SocketIO/GameManager/Game/Game.js | 5 ++-- .../assets/{Früchte => Fruits}/All_Fruits.png | Bin .../game/assets/{Früchte => Fruits}/Apfel.png | Bin .../assets/{Früchte => Fruits}/Blaubeere.png | Bin .../game/scripts/Game/Elements/Overlay.js | 11 +++++--- .../game/scripts/Game/Elements/Playground.js | 5 ++-- .../game/scripts/Game/Elements/TileLoader.js | 26 ++++++++++++++++++ frontend/game/scripts/Game/Loop.js | 10 +++++-- 9 files changed, 47 insertions(+), 12 deletions(-) rename frontend/game/assets/{Früchte => Fruits}/All_Fruits.png (100%) rename frontend/game/assets/{Früchte => Fruits}/Apfel.png (100%) rename frontend/game/assets/{Früchte => Fruits}/Blaubeere.png (100%) create mode 100644 frontend/game/scripts/Game/Elements/TileLoader.js diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js index 4420f6c..8676fe6 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js +++ b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js @@ -192,7 +192,7 @@ class Snake{ } if(exsitingtile?.class === "Snake"){ // Eng Game weil schon belegt mit anderer oder eigender Schlange - this.game.endGame(`Ihr seit koolidiert!`) + this.game.endGame(`Es gab eine Kollision!`) } this.playground.setTile(tile.x, tile.y, tile); diff --git a/backend/src/SocketIO/GameManager/Game/Game.js b/backend/src/SocketIO/GameManager/Game/Game.js index 5eca24e..9bfd8b9 100644 --- a/backend/src/SocketIO/GameManager/Game/Game.js +++ b/backend/src/SocketIO/GameManager/Game/Game.js @@ -55,12 +55,13 @@ class Game{ } endGame(msg){ + // TODO: Spielende in die Datenbank eintragen + + this.io.to(`game-${this.code}`).emit("gameEnd", { msg: msg, score: this.score, }); - - // TODO: Spielende in die Datenbank eintragen } waitingForPlayers(changeTime = false){ diff --git a/frontend/game/assets/Früchte/All_Fruits.png b/frontend/game/assets/Fruits/All_Fruits.png similarity index 100% rename from frontend/game/assets/Früchte/All_Fruits.png rename to frontend/game/assets/Fruits/All_Fruits.png diff --git a/frontend/game/assets/Früchte/Apfel.png b/frontend/game/assets/Fruits/Apfel.png similarity index 100% rename from frontend/game/assets/Früchte/Apfel.png rename to frontend/game/assets/Fruits/Apfel.png diff --git a/frontend/game/assets/Früchte/Blaubeere.png b/frontend/game/assets/Fruits/Blaubeere.png similarity index 100% rename from frontend/game/assets/Früchte/Blaubeere.png rename to frontend/game/assets/Fruits/Blaubeere.png diff --git a/frontend/game/scripts/Game/Elements/Overlay.js b/frontend/game/scripts/Game/Elements/Overlay.js index c46f321..4037672 100644 --- a/frontend/game/scripts/Game/Elements/Overlay.js +++ b/frontend/game/scripts/Game/Elements/Overlay.js @@ -1,11 +1,14 @@ +import TileLoader from "./TileLoader.js"; + class Overlay{ - constructor(src = null, deg = 0){ - this.src = src; + /** @param {TileLoader} tileLoader */ + constructor(tileLoader, imgSrc = null, deg = 0){ + this.tileLoader = tileLoader; this.deg = deg; + this.src = imgSrc; if(!this.src) return; - this.image = new Image(); - this.image.src = src; + this.image = this.tileLoader.tileMap.get(this.src); } } diff --git a/frontend/game/scripts/Game/Elements/Playground.js b/frontend/game/scripts/Game/Elements/Playground.js index 38d5edc..17aadba 100644 --- a/frontend/game/scripts/Game/Elements/Playground.js +++ b/frontend/game/scripts/Game/Elements/Playground.js @@ -56,9 +56,9 @@ class Playground{ // Falls overlay vorhanden darauf rendern const overlay = this.overlays[y][x]; if(!overlay.src) continue; - this.ctx.save(); - + // Rotation anwenden | Bisschen Komplexes Mathe Funzt :) + this.ctx.save(); const centerX = posX + this.tileSize / 2; const centerY = posY + this.tileSize / 2; this.ctx.translate(centerX, centerY); @@ -74,6 +74,7 @@ class Playground{ this.overlays.forEach(row => { row.forEach(overlay => { overlay.src = null; + overlay.image = null; overlay.deg = 0; }) }) diff --git a/frontend/game/scripts/Game/Elements/TileLoader.js b/frontend/game/scripts/Game/Elements/TileLoader.js new file mode 100644 index 0000000..2a63b85 --- /dev/null +++ b/frontend/game/scripts/Game/Elements/TileLoader.js @@ -0,0 +1,26 @@ +class TileLoader{ + constructor(){ + this.allSrc = [ + "Fruits/Apfel.png", + "Fruits/Blaubeere.png", + "Snakes/blue/End.png", + "Snakes/blue/Head.png", + "Snakes/blue/Straight.png", + "Snakes/blue/Turn.png", + "Snakes/red/End.png", + "Snakes/red/Head.png", + "Snakes/red/Straight.png", + "Snakes/red/Turn.png", + ]; + + this.tileMap = new Map(); + + this.allSrc.forEach(src => { + const img = new Image(); + img.src = `./assets/${src}`; + this.tileMap.set(src, img); + }) + } +} + +export default TileLoader; \ No newline at end of file diff --git a/frontend/game/scripts/Game/Loop.js b/frontend/game/scripts/Game/Loop.js index ebd4c36..59275d9 100644 --- a/frontend/game/scripts/Game/Loop.js +++ b/frontend/game/scripts/Game/Loop.js @@ -1,4 +1,5 @@ import Overlay from "./Elements/Overlay.js"; +import TileLoader from "./Elements/TileLoader.js"; import Game from "./Game.js" class Loop{ @@ -6,6 +7,7 @@ class Loop{ constructor(socket, game){ this.socket = socket; this.game = game; + this.tileLoader = new TileLoader(); this.socket.on("loop", (data) => { this.loop(data) }); } @@ -14,13 +16,14 @@ class Loop{ this.game.playGround.resetOverlay(); const tiles = data.playground.tiles; - // Spielfeld Zeichenen TODO: Image Laden Bug Fixen + // Spielfeld Zeichenen tiles.forEach((row, x) => { row.forEach((tile, y) => { if(!tile) return; if(tile.class === "Snake"){ const overlay = new Overlay( - `./assets/Snakes/${tile.color}/${tile.type}.png`, + this.tileLoader, + `Snakes/${tile.color}/${tile.type}.png`, tile.deg ) @@ -28,7 +31,8 @@ class Loop{ } else if(tile.class === "Fruit"){ const overlay = new Overlay( - `./assets/Früchte/${tile.type}.png` + this.tileLoader, + `Fruits/${tile.type}.png` ) this.game.playGround.setOverlay(x, y, overlay);