Schlangen werden angezeigt aber sind noch nicht bewegbar

backend/src/SocketIO/GameManager/Game/Classes/Playground/Playground.js

@@ -5,21 +5,20 @@ class Playground {
         this.height = 20;
 
         /** @type {Array<Array>} */
-        this.tiles = this.createPlayground();
+        this.tiles = [];
+
+        this.resetPlayground();
     }
 
-    createPlayground(){
-        const tilesArray = [];
-        
+    resetPlayground(){
+        this.tiles = [];
         for (let i = 0; i < this.width; i++) {
             const column = [];
             for (let j = 0; j < this.height; j++) {
                 column.push(null);
             }
-            tilesArray.push(column);
+            this.tiles.push(column);
         }
-
-        return tilesArray;
     }
 
     getTile(x, y){

backend/src/SocketIO/GameManager/Game/Classes/Snake/Snake.js

@@ -3,19 +3,77 @@ const Playground = require("../Playground/Playground");
 
 class Snake{
     /** @param {SocketUser} player @param {Playground} playground */
-    constructor(player, playground, color, startTiles) {
+    constructor(player, playground, color, startTiles, startMovement) {
         this.player = player;
         this.playground = playground;
         this.color = color;
         
         this.tiles = [];
-        this.nextMovement = null;
+        this.nextMovement = startMovement;
+
+        this.directionDegree = new Map([
+            ["right", 0],
+            ["down", 90],
+            ["left", 180],
+            ["up", 270]
+        ]);
 
         this.player.socket.on("movement", (data) => { this.updateNextMovement(data) })
+
+        this.setup(startTiles);
+    }
+
+    setup(startTiles){
+        this.player.socket.emit("color", this.color);
+
+        const headX = startTiles.x;
+        const headY = startTiles.y;
+
+        let dx = 0;
+        let dy = 0;
+        switch (this.nextMovement) {
+            case "up": dy = 1; break;
+            case "down": dy = -1; break;
+            case "left": dx = 1; break;
+            case "right": dx = -1; break;
+        }
+
+        for (let i = 0; i < 3; i++) {
+            let type = null;
+            switch(i){
+                case 0: 
+                    type = "Head"; 
+                    break;
+                case 2: 
+                    type = "End"; 
+                    break;
+                default: 
+                    type = "Straight";
+                    break;
+            }
+            this.tiles.push({
+                class: "Snake",
+                type: type,
+                color: this.color,
+                deg: this.directionDegree.get(this.nextMovement),
+                x: headX + i * dx,
+                y: headY + i * dy
+            });
+        }
+
+        this.drawTiles();
+
+        console.log(this.tiles);
+    }
+
+    drawTiles(){
+        this.tiles.forEach(tile => {
+            this.playground.setTile(tile.x, tile.y, tile);
+        })
     }
 
     updateNextMovement(data){
-
+        console.log(`${this.player.username} | ${this.nextMovement}`);
     }
 }
 

backend/src/SocketIO/GameManager/Game/Game.js

@@ -2,6 +2,7 @@ const socketIO = require("socket.io");
 const SocketUser = require("../../Classes/SocketUser");
 const GameManager = require("../GameManager");
 const GameLoop = require("./GameLoop");
+const Snake = require("./Classes/Snake/Snake");
 
 class Game{
     /** @param {socketIO.Server} io @param {GameManager} gameManager @param {number} code */
@@ -13,6 +14,8 @@ class Game{
         this.waitingSeconds = 5;
         this.gameStarted = false;
 
+        this.snakeColors = ["red", "blue"];
+
         /**@type {Array<SocketUser>} */
         this.players = [];
 
@@ -27,6 +30,24 @@ class Game{
             height: this.gameLoop.playground.height
         });
         this.gameStarted = true;
+
+        // 2 Schlangen für die Spieler Instazieren
+        this.players.forEach((player, i) => {
+            const start = (10 * i + 5) - 1;
+            const snake = new Snake(
+                player,
+                this.gameLoop.playground,
+                this.snakeColors[i],
+                {
+                    x: start,
+                    y: start
+                },
+                i == 0 ? "right" : "left"
+            );
+
+            this.gameLoop.snakes.push(snake);
+        });
+
         this.gameLoop.loop();
     }
 

backend/src/SocketIO/GameManager/Game/GameLoop.js

@@ -1,6 +1,7 @@
 const socketIO = require("socket.io");
 const Playground = require("./Classes/Playground/Playground");
 const Game = require("./Game");
+const Snake = require("./Classes/Snake/Snake");
 
 class GameLoop{
     /** @param {socketIO.Server} io @param {Game} game */
@@ -9,22 +10,29 @@ class GameLoop{
         this.game = game;
 
         this.playground = new Playground();
+        
+        /** @type {Array<Snake>} */
+        this.snakes = [];
     }
 
     loop(){
-        this.io.to(`game-${this.game.code}`).emit("loop", {
-            code: this.game.code,
-            playground: {
-                // height: this.playground.height,
-                // width: this.playground.width,
-                tiles: this.playground.tiles,
-            }
-        });
+        //this.snakes.forEach()
+
+        this.sendUpdate();
 
         setTimeout(() => {
             this.loop();
         }, 250);
     }
+
+    sendUpdate(){
+        this.io.to(`game-${this.game.code}`).emit("loop", {
+            code: this.game.code,
+            playground: {
+                tiles: this.playground.tiles,
+            }
+        });
+    }
 }
 
 module.exports = GameLoop;