From 32681f20ca663bfd620e6680b1cecf5da0731ea5 Mon Sep 17 00:00:00 2001 From: Jonas Date: Thu, 10 Apr 2025 09:24:57 +0200 Subject: [PATCH] Snake Movement Handler Setup --- .../Game/Classes/Playground/Playground.js | 8 ++-- .../GameManager/Game/Classes/Snake/Snake.js | 22 +++++++++ .../src/SocketIO/GameManager/Game/GameLoop.js | 4 +- .../scripts/Game/Elements/MovementHandler.js | 47 +++++++++++++++++++ frontend/game/scripts/Game/Game.js | 3 ++ frontend/game/style/mainStyle.css | 3 ++ 6 files changed, 81 insertions(+), 6 deletions(-) create mode 100644 backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js create mode 100644 frontend/game/scripts/Game/Elements/MovementHandler.js diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js b/backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js index 27f37e5..c97dd28 100644 --- a/backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js +++ b/backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js @@ -1,5 +1,5 @@ class Playground { - constructor() { + constructor(){ // Spielgröße (width * height) Felder this.width = 20; this.height = 20; @@ -8,7 +8,7 @@ class Playground { this.tiles = this.createPlayground(); } - createPlayground() { + createPlayground(){ const tilesArray = []; for (let i = 0; i < this.width; i++) { @@ -22,14 +22,14 @@ class Playground { return tilesArray; } - getTile(x, y) { + getTile(x, y){ if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return null; // Ungültiges feld } return this.tiles[x][y]; } - setTile(x, y, object) { + setTile(x, y, object){ if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return false; // Ungültiges feld } diff --git a/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js new file mode 100644 index 0000000..1e1ca05 --- /dev/null +++ b/backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js @@ -0,0 +1,22 @@ +const SocketUser = require("../../../../Classes/SocketUser"); +const Playground = require("../Playground/Playground"); + +class Snake{ + /** @param {SocketUser} player @param {Playground} playground */ + constructor(player, playground, color, startTiles) { + this.player = player; + this.playground = playground; + this.color = color; + + this.tiles = []; + this.nextMovement = null; + + this.player.socket.on("movement", (data) => { this.updateNextMovement(data) }) + } + + updateNextMovement(data){ + + } +} + +module.exports = Snake; \ No newline at end of file diff --git a/backend/src/SocketIO/GameManager/Game/GameLoop.js b/backend/src/SocketIO/GameManager/Game/GameLoop.js index 6ac3222..598d0c4 100644 --- a/backend/src/SocketIO/GameManager/Game/GameLoop.js +++ b/backend/src/SocketIO/GameManager/Game/GameLoop.js @@ -15,8 +15,8 @@ class GameLoop{ this.io.to(`game-${this.game.code}`).emit("loop", { code: this.game.code, playground: { - height: this.playground.height, - width: this.playground.width, + // height: this.playground.height, + // width: this.playground.width, tiles: this.playground.tiles, } }); diff --git a/frontend/game/scripts/Game/Elements/MovementHandler.js b/frontend/game/scripts/Game/Elements/MovementHandler.js new file mode 100644 index 0000000..3a918ee --- /dev/null +++ b/frontend/game/scripts/Game/Elements/MovementHandler.js @@ -0,0 +1,47 @@ +class MovementHandler{ + /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/ + constructor(socket){ + this.socket = socket; + + this.keys = [ + { + keys: ["w", "W", "ArrowUp"], + name:"up" + }, + { + keys: ["s", "S", "ArrowDown"], + name:"down" + }, + { + keys: ["d", "D", "ArrowRight"], + name:"right" + }, + { + keys: ["a", "A", "ArrowLeft"], + name:"left" + } + ] + + document.addEventListener("keydown", (e) => { this.updateMovement(e) }); + } + + /**@param {KeyboardEvent} e */ + updateMovement(e){ + const key = e.key; + let direction = null; + + this.keys.forEach(e => { + e.keys.forEach(x => { + if(x === key){ + direction = e.name; + } + }) + }); + + if(!direction) return; + + console.log(direction); + } +} + +export default MovementHandler; \ No newline at end of file diff --git a/frontend/game/scripts/Game/Game.js b/frontend/game/scripts/Game/Game.js index 9340ad9..c02b0d8 100644 --- a/frontend/game/scripts/Game/Game.js +++ b/frontend/game/scripts/Game/Game.js @@ -1,6 +1,7 @@ import Loop from "./Loop.js"; import UIManager from "./UI/UIManager.js"; import Playground from "./Elements/Playground.js"; +import MovementHandler from "./Elements/MovementHandler.js"; class Game{ /**@param {import("../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/ @@ -9,6 +10,7 @@ class Game{ this.loop = new Loop(this.socket, this); this.uiManager = new UIManager(); + this.movementHandler = undefined; this.playGround = undefined; this.gameStarted = false; @@ -20,6 +22,7 @@ class Game{ this.gameStarted = true; this.uiManager.loadGameContent(); + this.movementHandler = new MovementHandler(this.socket); this.playGround = new Playground(this, this.uiManager, playgroundSize); } } diff --git a/frontend/game/style/mainStyle.css b/frontend/game/style/mainStyle.css index b408c76..c990c49 100644 --- a/frontend/game/style/mainStyle.css +++ b/frontend/game/style/mainStyle.css @@ -10,4 +10,7 @@ td, tr { td img { vertical-align: top; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; } \ No newline at end of file