Snake Movement Handler Setup

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
         }

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;

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,
             }
         });

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;

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

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