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

Endscreen und Verlängerung der Schlange bei einem Score

Browse Source
This commit is contained in:
Jonas Himmelberg
2025-04-25 17:44:32 +02:00
parent 7cafc07bf1
commit f450526375
9 changed files with 153 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ class Fruit{
if(tile === undefined) return;
if(tile?.class === "Snake"){
this.fruitManager.scored(this.index);
this.fruitManager.scored(this.index, tile.color);
return;
}

6
backend/src/SocketIO/GameManager/Game/Classes/Fruits/FruitManager.js
View File

@@ -60,9 +60,13 @@ class FruitManager{
this.fruits.forEach(fruit => fruit.update());
}
scored(fruitIndex){
scored(fruitIndex, snakeColor){
this.game.score += 1;
this.game.gameLoop.snakes.forEach(snake => {
if(snake.color == snakeColor) snake.getBigger();
})
this.fruits.splice(fruitIndex, 1);
this.createFruit();

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

@@ -159,19 +159,41 @@ class Snake{
this.checkAndDrawTiles();
}
getBigger(){
const end = this.tiles[this.tiles.length - 1];
const beforeEnd = this.tiles[this.tiles.length - 2];
// So setzen wir das neue Tile hinter dem Letzen auf der Richtigen Seite
const dx = end.x - beforeEnd.x;
const dy = end.y - beforeEnd.y;
const newEnd = {
class: "Snake",
type: "End",
color: this.color,
deg: end.deg,
x: end.x + dx,
y: end.y + dy
};
end.type = "Straight";
this.tiles.push(newEnd);
}
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!`)
// }
// TODO: Klammert man das ein Kann man alleine Spielen, da es keine Kolisionserkennung gibt
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);
})

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

@@ -55,7 +55,12 @@ class Game{
}
endGame(msg){
this.io.to(`game-${this.code}`).emit("gameEnd", msg);
this.io.to(`game-${this.code}`).emit("gameEnd", {
msg: msg,
score: this.score,
});
// TODO: Spielende in die Datenbank eintragen
}
waitingForPlayers(changeTime = false){
@@ -111,7 +116,7 @@ class Game{
});
if(this.players.length != 2){
this.endGame("gameEnd", "Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
this.endGame("Das Spiel ist zu Ende, da ein Spieler verlassen hat!");
return 1;
}
}

1
frontend/game/index.html
View File

@@ -17,5 +17,6 @@
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script type="module" src="./scripts/index.js"></script>
<script src="../scripts/ButtonManager.js"></script>
</html>

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

@@ -14,7 +14,7 @@ class Loop{
this.game.playGround.resetOverlay();
const tiles = data.playground.tiles;
// Spielfeld Zeichenen
// Spielfeld Zeichenen TODO: Image Laden Bug Fixen
tiles.forEach((row, x) => {
row.forEach((tile, y) => {
if(!tile) return;

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

@@ -79,6 +79,54 @@ class UIManager{
this.mainDiv.appendChild(infoDiv);
}
showEndScreen(data){
const endDivOverlay = document.createElement("div");
endDivOverlay.id = "endDivOverlay";
this.mainDiv.appendChild(endDivOverlay);
const endDiv = document.createElement("div");
endDiv.id = "endDiv";
endDivOverlay.appendChild(endDiv);
const header = document.createElement("h1");
header.innerText = "Spiel Beendet"
endDiv.appendChild(header);
const reason = document.createElement("h2");
reason.id = "reason";
reason.innerText = `Grund: ${data.msg}`;
endDiv.appendChild(reason);
const scoreDiv = document.createElement("div");
scoreDiv.id = "scoreEndDiv"
const scoreSign = document.createElement("h3");
scoreSign.innerText = "Punktestand";
scoreDiv.appendChild(scoreSign)
const score = document.createElement("h2");
score.innerText = data.score;
scoreDiv.appendChild(score);
endDiv.appendChild(scoreDiv);
const dashButton = document.createElement("button");
dashButton.id = "leaveBtn";
dashButton.innerHTML = `
<div class="buttonIcon">
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
fill="#FFFFFF">
<path
d="M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0
56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200 200Z" />
</svg>
</div>
<div class="buttonText">
Verlassen
</div>
`;
dashButton.addEventListener("click", () => { window.location.href = "/dashboard" })
endDiv.appendChild(dashButton);
}
}
export default UIManager;

9
frontend/game/scripts/index.js
View File

@@ -11,7 +11,7 @@ class ServerConnectionManager {
// Socket.on Handler und Routen
this.socket.on("waitingForPlayers", (data) => { this.waitingForPlayers(data) });
this.socket.on("gameEnd", (msg) => { this.gameEnd(msg) });
this.socket.on("gameEnd", (data) => { this.gameEnd(data) });
this.basicSetup();
}
@@ -21,10 +21,11 @@ class ServerConnectionManager {
document.getElementById("wS").innerText = data.waitingSeconds;
}
gameEnd(msg){
gameEnd(data){
// Sonst passiert das unten bei basicSetup und wir werden weitergeleitet
this.socket.off("disconnect");
this.socket.disconnect();
confirm(msg)
window.location.pathname = "/dashboard";
this.game.uiManager.showEndScreen(data);
}
basicSetup() {

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

@@ -47,4 +47,58 @@ img{
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#endDivOverlay{
z-index: 2;
background-color: rgba(0, 0, 0, 0.7);
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
#endDiv{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 25px;
border: 5px solid white;
height: 60vh;
width: 40vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
#endDiv h1{
font-size: 60px;
}
#scoreEndDiv{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 150px;
}
#scoreEndDiv h3{
font-size: 30px;
}
#scoreEndDiv h2{
font-size: 40px;
font-weight: 900;
}
#reason{
color: rgb(197, 46, 46);
font-weight: 700;
}