finally, now multiplayer

common/game_basic.js

@@ -1,3 +1,5 @@
+import Player from "./player.js";
+
 class GameBasic {
     constructor() {
         let player = new Player(false,true);
@@ -22,3 +24,5 @@ class GameBasic {
         setInterval(function () { that.main() }, 1000 / 60);
     }
 }
+
+export default GameBasic;

common/player.js

@@ -9,7 +9,7 @@ function uuidv4() {
 }
 
 function Player(you, isPlayer) {
-    let pos = { x: Math.random() * 5000 - 50, y: Math.random() * 5000 - 50 };
+    let pos = { x: Math.random() * 1000 - 50, y: Math.random() * 1000 - 50 };
     let camera = { x: -pos.x, y: -pos.y };
     let vel = { x: 0, y: 0 };
 
@@ -85,3 +85,5 @@ Player.prototype.handleTick = function (game) {
         }
     }
 }
+
+export default Player;

game.js

@@ -3,19 +3,30 @@ import GameBasic from "./common/game_basic.js";
 class Game extends GameBasic {
     constructor() {
         super();
-    }
-    createPlayer(user) {
-        
+        this.ws = [];
     }
     sync() {
+        let { entities } = this;
+        let entList = [];
+        for (let entity of entities) {
+            let { pos, vel, rot, dir, health, headCount, you, camera } = entity;
+            entList.push({ pos, vel, rot, dir, health, headCount, you, camera });
+        }
 
+        if (entList.length == 0) return;
+
+        for (let client of this.ws) {
+            if (!client.active) continue;
+            client.send(JSON.stringify(entList));
+        }
     }
     init() {
         super.init();
 
         let that = this;
+        that.entities = [];
 
-        setInterval(function () { that.sync() }, 1000 / 10);
+        setInterval(function () { that.sync() }, 1000 / 20);
     }
 }
 

index.js

@@ -1,17 +1,44 @@
 import express from "express";
 import expressW from "express-ws";
+import Game from "./game.js";
+import Player from "./common/player.js";
 
 var app = express();
 expressW(app);
 
+var game = new Game();
+
+game.init();
 
 app.use('/js', express.static('./common'));
 app.use(express.static('./static'));
 
 app.ws('/', function (ws, req) {
-    ws.on('message', function (msg) {
-        console.log(msg);
-    });
+    game.ws.push(ws);
+    let player = new Player();
+    let playerI = game.entities.length;
+    game.entities[playerI] = player;
+
+    ws.active = true;
+
+    ws.on('message', function message(msg) {
+        let data = {};
+        try {
+            data = JSON.parse(msg);
+        } catch (err) {
+            console.log(err);
+            data = {};
+        }
+        let { vel, dir, you } = data;
+        let data2 = { vel, dir, you };
+        game.entities[playerI] = Object.assign(game.entities[playerI], data2);
+    })
+
+    ws.on('close', function () {
+        ws.active = false;
+        player.health = -1;
+    })
+
     console.log('socket', req.testing);
 });
 

static/index.html

@@ -17,9 +17,7 @@
 			<canvas id='canvas'></canvas>
 		</div>
 	</section>
-	<script src='js/player.js'></script>
-	<script src='js/game_basic.js'></script>
-	<script src='js/index.js'></script>
+	<script src='js/index.js' type="module"></script>
 </body>
 
 </html>

static/js/index.js

@@ -1,3 +1,6 @@
+import Player from "./player.js";
+import GameBasic from "./game_basic.js";
+
 const cs = 1024;
 const assets = [
     'assets/player.svg',
@@ -52,7 +55,7 @@ class Game extends GameBasic {
             ctx.textBaseline = "bottom";
             ctx.font = "bold 16px sans-serif";
 
-            let args = [`HP: ${ent.health} KO: ${ent.headCount}`, ent.pos.x, ent.pos.y - 64 / 2];
+            let args = [`HP: ${ent.health} KO: ${ent.headCount} XY: ${Math.round(ent.pos.x)}, ${Math.round(ent.pos.y)}`, ent.pos.x, ent.pos.y - 64 / 2];
 
             ctx.strokeText(...args);
             ctx.fillText(...args);
@@ -74,18 +77,49 @@ class Game extends GameBasic {
         let { player } = this;
 
         if (player.health <= 0) {
+            this.ws = new WebSocket(window.location.href);
             this.player = new Player(false, true);
             this.entities.push(this.player);
         } else {
             player.bump();
         }
     }
+    sync() {
+        let { player } = this;
+
+        let {  vel, dir, you } = player;
+
+        this.ws.send(JSON.stringify({ vel, dir, you }));
+    }
+    recv({data}) {
+        let {player} = this;
+        let you = player.you;
+
+        let entList = JSON.parse(data);
+        entList = entList.map(x => {
+            x.handleTick = Player.prototype.handleTick;
+            return x;
+        })
+        
+        let matchingPlayer = entList.filter(x => x.you == you)
+
+        this.player = Object.assign(this.player || new Player(false,false),matchingPlayer[0]);
+
+        this.entities = entList;
+
+        if (this.entities.length == 0) this.entities = [this.player];
+    }
     init() {
         super.init();
 
         let that = this;
 
+        this.ws = new WebSocket(window.location.href);
+
+        this.ws.addEventListener('message',function(e) { that.recv(e) });
+
         setInterval(function () { that.render() }, 1000 / 60);
+        setInterval(function () { that.sync() }, 1000 / 20);
 
         game.canvas.onclick = () => that.click();
     }