From 499f960ce7d78699357b11a6fb2e7048c4df1771 Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Thu, 23 Apr 2020 22:35:21 +0200 Subject: [PATCH] Got multiplayer semi working Sending controls over socket.io might not be the way to go There is some lag causing the players to not be lined up on all clients --- launch.json | 9 +++++++ package-lock.json | 6 ++--- package.json | 2 +- src/entities/Tank.js | 17 ++++++------ src/screens/game.js | 62 ++++++++++++++++++++++++++++---------------- 5 files changed, 62 insertions(+), 34 deletions(-) create mode 100644 launch.json diff --git a/launch.json b/launch.json new file mode 100644 index 0000000..0119225 --- /dev/null +++ b/launch.json @@ -0,0 +1,9 @@ +{ + "name": "Launch via npm", + "type": "node", + "request": "launch", + "cwd": "${workspaceFolder}", + "runtimeExecutable": "npm", + "runtimeArgs": ["run-script", "start"], + "port": 9229 +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 996b8b2..f249c1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -377,9 +377,9 @@ "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" }, "asdf-games": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.1.0.tgz", - "integrity": "sha512-GK+rS2vlQmiZG3fadAy+PRtVzTNPqkcr9RoihobQahe765odqLluZpMKEtmUk4y6uN9rDPBRVk3e0X2SjsA8Yw==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.1.1.tgz", + "integrity": "sha512-gw9TNJlwd6WQSIEMnQ6UhLbEjevmXOONC5fi6CiwIxNRmgaMsO4WaGHxxGZMv2tQgadhV80rf/VL2x7d9ZFQhw==" }, "astral-regex": { "version": "1.0.0", diff --git a/package.json b/package.json index 8602bc1..4062cfc 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ }, "license": "ISC", "dependencies": { - "asdf-games": "^1.1.0", + "asdf-games": "^1.1.1", "socket.io": "^2.3.0" }, "devDependencies": { diff --git a/src/entities/Tank.js b/src/entities/Tank.js index 084b7b6..00a0570 100644 --- a/src/entities/Tank.js +++ b/src/entities/Tank.js @@ -5,8 +5,8 @@ const { Container, TileSpriteXML, math } = asdf; const container = new Container(); class Body extends TileSpriteXML { - constructor(keyboard, mouse, tanksTexture, tanksXml) { - super(tanksTexture, tanksXml, tanksXml.findIndex("name", "tankBody_blue.png")); + constructor(keyboard, mouse, tanksTexture, tanksXml, colour) { + super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`)); this.mouse = mouse; this.keyboard = keyboard; this.pos = { x: 250, y: 100 }; @@ -51,8 +51,8 @@ class Body extends TileSpriteXML { } class Barrel extends TileSpriteXML { - constructor(body, mouse, tanksTexture, tanksXml) { - super(tanksTexture, tanksXml, tanksXml.findIndex("name", "tankBlue_barrel2_outline.png")); + constructor(body, mouse, tanksTexture, tanksXml, colour) { + super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tank${colour}_barrel2_outline.png`)); this.mouse = mouse; this.body = body; this.pos = { x: 0, y: 0 }; @@ -82,13 +82,14 @@ class Barrel extends TileSpriteXML { } class Tank extends Container { - constructor(keyboard, mouse, texture, xml) { + constructor(keys, mouse, texture, xml, colour) { super(container); - var body = new Body(keyboard, mouse, texture, xml); - var barrel = new Barrel(body, mouse, texture, xml); + this.keys = keys; + this.mouse = mouse; + var body = new Body(this.keys, this.mouse, texture, xml, colour); + var barrel = new Barrel(body, this.mouse, texture, xml, colour); this.add(body); this.add(barrel); - } } diff --git a/src/screens/game.js b/src/screens/game.js index 6f67ea1..bb7fbbd 100644 --- a/src/screens/game.js +++ b/src/screens/game.js @@ -2,7 +2,7 @@ var io = require("socket.io-client"); const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Container, Camera, Texture, SpriteSheetXML, TileMapXML } = asdf; +const { Container, Camera, Texture, SpriteSheetXML, TileMapXML, KeyControls, MouseControls } = asdf; const texture = new Texture("../res/images/allSprites_default.png"); const xml = new SpriteSheetXML("../res/images/allSprites_default.xml"); @@ -12,7 +12,6 @@ const Tank = require("../entities/Tank.js"); class GameScreen extends Container { constructor(game, controls, onGameOver) { super(); - this.game = game; this.scene = this; this.controls = controls; @@ -20,6 +19,7 @@ class GameScreen extends Container { this.controls.keys.reset(); + // Draw level const level = [ 161, 160, 160, 161, 160, 159, 134, 135, 143, 134, 135, 135, 161, 160, 160, 161, 161, 159, 135, 134, 143, 135, 135, 134, @@ -33,27 +33,57 @@ class GameScreen extends Container { this.add(new TileMapXML(level, Math.ceil(this.game.w / 64), Math.ceil(this.game.h / 64), texture, xml)); - this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml); - this.add(this.player); - + // Connect to TanksJS-Server instance this.socket = io("http://localhost:3000"); this.socket.on("identify", () => { this.socket.emit("identification", { name: "Arn", - gamemode: 2 + gamemode: 2, + controls: JSON.stringify(this.controls) }); console.log(`Connected to server as ${this.socket.id}`); }); - this.players = []; + // Define tank colours + const colours = ["Blue", "Red", "Green", "Yellow"]; + this.players = {}; + + // Define local player + this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml, colours[Object.keys(this.players).length]); + this.player.uuid = this.socket.id; + console.log(this.player); + this.add(this.player); + + // Store current state of controls for comparing this.controlsBuffer = JSON.stringify(this.controls); // Handle player logins this.socket.on("roomUpdate", (data) => { - console.log(data); + // Add any player that is not the local player and is not already added + for (const id in data) { + if (id != this.socket.id && !(this.players[id])) { + this.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length]); + this.add(this.players[id]); + } + } + + console.log(this.players); + // TODO: Remove players who left + }); + + // Handle player updates + this.socket.on("update", (data) => { + var controls = JSON.parse(data.controls); + Object.assign(this.players[data.uuid].mouse, controls.mouse); + Object.assign(this.players[data.uuid].keys, controls.keys); + console.log(this.players[data.uuid]); + }); + + // TODO: Lock player untill game starts + this.socket.on("gameStart", () => { + this.player.locked = false; }); - } @@ -61,24 +91,12 @@ class GameScreen extends Container { update(dt, t) { super.update(dt, t); - // TODO: Lock player untill game starts - this.socket.on("gameStart", () => { - this.player.locked = false; - }); - // Only send when controls are updated and minify data sent if (JSON.stringify(this.controls) != this.controlsBuffer) { console.log("Sending updates"); this.socket.emit("update", JSON.stringify(this.controls)); this.controlsBuffer = JSON.stringify(this.controls); - } - - - // Handle player updates - this.socket.on("update", (data) => { - console.log(data); - }); - + } } }