jhim/DoubleSnake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Funktionierender Punktestand durch Äpfel und Blaubeeren

Browse Source
This commit is contained in:
Jonas Himmelberg
2025-04-24 18:20:30 +02:00
parent 4f337778df
commit 7cafc07bf1
9 changed files with 193 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
backend/src/SocketIO/GameManager/Game/Classes/Fruits/Classes/Fruit.js Normal file
View File

@@ -0,0 +1,37 @@
const Playground = require("../../Playground/Playground");
const FruitManager = require("../FruitManager");
class Fruit{
/** @param {FruitManager} fruitManager @param {Playground} playground */
constructor(fruitManager, playground, startX, startY, type, index = 0) {
this.fruitManager = fruitManager;
this.playground = playground;
this.index = index;
this.x = startX;
this.y = startY;
this.type = type;
}
update(){
const tile = this.playground.getTile(this.x, this.y);
if(tile === undefined) return;
if(tile?.class === "Snake"){
this.fruitManager.scored(this.index);
return;
}
this.playground.setTile(this.x, this.y, {
class: "Fruit",
type: this.type,
x: this.x,
y: this.y
});
}
}
module.exports = Fruit;

72
backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js Normal file
View File

@@ -0,0 +1,72 @@
const Fruit = require("./Classes/Fruit");
const socketIO = require("socket.io");
const Game = require("../../Game");
const Playground = require("../Playground/Playground");
class FruitManager{
/** @param {socketIO.Server} io @param {Game} game @param {Playground} playground */
constructor(io, game, playground){
this.io = io;
this.game = game;
this.playground = playground;
this.fruitAmount = 5;
/** @type {Array<Fruit>} */
this.fruits = [];
this.setupFruits();
}
setupFruits(){
for(let i = 0; i < this.fruitAmount; i++){
this.createFruit();
}
}
createFruit(){
const pos = this.randomUnusedTile();
const type = Math.random() < 0.5 ? "Apfel" : "Blaubeere";
const newFruit = new Fruit(
this,
this.playground,
pos.x,
pos.y,
type
);
this.fruits.push(newFruit);
this.fruits.forEach((fruit, i) => { fruit.index = i });
}
randomUnusedTile(){
let isUnused = false;
let x = 0;
let y = 0;
do{
x = Math.floor(Math.random() * this.playground.height);
y = Math.floor(Math.random() * this.playground.width);
const tile = this.playground.getTile(x, y);
if(tile === null) isUnused = true;
} while(!isUnused);
return {x, y};
}
updateFruits(){
this.fruits.forEach(fruit => fruit.update());
}
scored(fruitIndex){
this.game.score += 1;
this.fruits.splice(fruitIndex, 1);
this.createFruit();
}
}
module.exports = FruitManager;

2
backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js
View File

@@ -23,7 +23,7 @@ class Playground {
getTile(x, y){
if (x < 0 || x >= this.width || y < 0 || y >= this.height) {
return null; // Ungültiges feld
return undefined; // Ungültiges feld
}
return this.tiles[x][y];
}

24
backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js
View File

@@ -1,11 +1,13 @@
const SocketUser = require("../../../../Classes/SocketUser");
const Game = require("../../Game");
const Playground = require("../Playground/Playground");
class Snake{
/** @param {SocketUser} player @param {Playground} playground */
constructor(player, playground, color, startTiles, startMovement) {
/** @param {SocketUser} player @param {Playground} playground @param {Game} game */
constructor(player, playground, game, color, startTiles, startMovement) {
this.player = player;
this.playground = playground;
this.game = game;
this.color = color;
this.startLength = 5;
@@ -64,7 +66,7 @@ class Snake{
});
}
this.drawTiles();
this.checkAndDrawTiles();
}
movementToAxes(movement){
@@ -154,11 +156,23 @@ class Snake{
else if (dy === 1) end.deg = 270;
else if (dy === -1) end.deg = 90;
this.drawTiles();
this.checkAndDrawTiles();
}
drawTiles(){
checkAndDrawTiles(){
this.tiles.forEach(tile => {
const exsitingtile = this.playground.getTile(tile.x, tile.y);
// TODO: Solang Entfernt kann man alleine Testen
// if(exsitingtile === undefined){
// // End Game weil außerhalb des Spielfeldes
// this.game.endGame(`${this.player.username} hat die Wand berührt!`)
// }
// if(exsitingtile?.class === "Snake"){
// // Eng Game weil schon belegt mit anderer oder eigender Schlange
// this.game.endGame(`Ihr seit koolidiert!`)
// }
this.playground.setTile(tile.x, tile.y, tile);
})
}

16
backend/src/SocketIO/GameManager/Game/Game.js
View File

@@ -11,6 +11,8 @@ class Game{
this.gameManager = gameManager;
this.code = code;
this.score = 0;
this.waitingSeconds = 5;
this.gameStarted = false;
@@ -37,6 +39,7 @@ class Game{
const snake = new Snake(
player,
this.gameLoop.playground,
this,
this.snakeColors[i],
{
x: start,
@@ -51,13 +54,14 @@ class Game{
this.gameLoop.loop();
}
endGame(msg){
this.io.to(`game-${this.code}`).emit("gameEnd", msg);
}
waitingForPlayers(changeTime = false){
if(this.waitingSeconds <= 0){
if(this.players.length < 2) {
this.io.to(`game-${this.code}`).emit(
"gameEnd",
"Das Spiel ist zu Ende, da nicht genug Spieler beigetreten sind!"
);
this.endGame("Das Spiel ist zu Ende, da nicht genug Spieler beigetreten sind!");
this.gameManager.games.delete(this.code);
return;
}
@@ -68,7 +72,7 @@ class Game{
let msg = "";
this.players.forEach(player => {
if(msg === ""){
msg = `Schon beigetreten sind: ${player.username}`;
msg = `Schon beigetreten: ${player.username}`;
}
else{
msg += ` und ${player.username}, es geht Sofort los!`;
@@ -107,7 +111,7 @@ class Game{
});
if(this.players.length != 2){
this.io.to(`game-${this.code}`).emit("gameEnd", "Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
this.endGame("gameEnd", "Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
return 1;
}
}

7
backend/src/SocketIO/GameManager/Game/GameLoop.js
View File

@@ -2,6 +2,7 @@ const socketIO = require("socket.io");
const Playground = require("./Classes/Playground/Playground");
const Game = require("./Game");
const Snake = require("./Classes/Snake/Snake");
const FruitManager = require("./Classes/Fruits/FruitManager");
class GameLoop{
/** @param {socketIO.Server} io @param {Game} game */
@@ -13,12 +14,15 @@ class GameLoop{
/** @type {Array<Snake>} */
this.snakes = [];
this.fruitManager = new FruitManager(this.io, this.game, this.playground);
}
loop(){
this.playground.resetPlayground();
this.snakes.forEach(snake => { snake.move() });
this.snakes.forEach(snake => { snake.move()});
this.fruitManager.updateFruits();
this.sendUpdate();
@@ -30,6 +34,7 @@ class GameLoop{
sendUpdate(){
this.io.to(`game-${this.game.code}`).emit("loop", {
code: this.game.code,
score: this.game.score,
playground: {
tiles: this.playground.tiles,
}

11
frontend/game/scripts/Game/Loop.js
View File

@@ -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();
}
}

25
frontend/game/scripts/Game/UI/UIManager.js
View File

@@ -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");

18
frontend/game/style/mainStyle.css
View File

@@ -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;