Snake Movement Handler Setup

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