arne/TanksJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Limited the amount of data being sent

Browse Source
This commit is contained in:
Arne van Iterson 2020-04-24 22:52:45 +02:00
parent 684108a405
commit 23c43fde6f
3 changed files with 70 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/entities/Tank.js
View File

@ -3,10 +3,11 @@ var asdf = require("asdf-games");
const { Container, TileSpriteXML, math } = asdf; const { Container, TileSpriteXML, math } = asdf;
class Tank extends TileSpriteXML { class Tank extends TileSpriteXML {
constructor(keys, mouse, texture, xml, colour) { constructor(keys, mouse, texture, xml, colour, remote = false) {
super(texture, xml, xml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`)); super(texture, xml, xml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`));
this.keys = keys; this.keys = keys;
this.mouse = mouse; this.mouse = mouse;
this.remote = remote;
this.children = []; this.children = [];
// Define body // Define body
@ -17,7 +18,6 @@ class Tank extends TileSpriteXML {
}; };
this.rotation = 0; this.rotation = 0;
// TODO: Do not allow movement when this.locked = true
this.locked = false; this.locked = false;
// Define barrel // Define barrel
@ -33,47 +33,49 @@ class Tank extends TileSpriteXML {
update(dt, t) { update(dt, t) {
super.update(dt,t); super.update(dt,t);
// Make this.barrel follow the mouse if (!this.remote && this.locked == false) {
var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x; // Make this.barrel follow the mouse
var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y; var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x;
var tan = dy / dx; var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y;
var atan = Math.atan(tan); var tan = dy / dx;
if (dy > 0 && dx > 0) { var atan = Math.atan(tan);
atan += Math.PI; if (dy > 0 && dx > 0) {
} atan += Math.PI;
else if (dy < 0 && dx > 0) { }
atan -= Math.PI; else if (dy < 0 && dx > 0) {
} atan -= Math.PI;
this.barrel.rotation = atan + (0.5 * Math.PI) - this.rotation; }
this.barrel.rotation = atan + (0.5 * Math.PI) - this.rotation;
// Set rotation back to zero if higher than 2 * Pi (same angle) // Set rotation back to zero if higher than 2 * Pi (same angle)
// TODO: Fix rotation, the barrel glitches a bit on 0 and 180 degreessa // TODO: Fix rotation, the barrel glitches a bit on 0 and 180 degreessa
if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) { if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) {
this.rotation = 0; this.rotation = 0;
} }
if (this.rotation < 0) { if (this.rotation < 0) {
this.rotation = (2 * Math.PI) - this.rotation; this.rotation = (2 * Math.PI) - this.rotation;
} }
// TODO: If the angle is 90 or 270 degrees, allow the tank to move in that direction if 'a' or 's' is pressed // TODO: If the angle is 90 or 270 degrees, allow the tank to move in that direction if 'a' or 's' is pressed
// Rotate clockwise // Rotate clockwise
if (this.keys.x == 1) { if (this.keys.x == 1) {
this.rotation += dt * 2; this.rotation += dt * 2;
} }
// Rotate anti-clockwise // Rotate anti-clockwise
if (this.keys.x == -1) { if (this.keys.x == -1) {
this.rotation -= dt * 2; this.rotation -= dt * 2;
} }
// TODO: Make it easier to see what end of the tank is forward // TODO: Make it easier to see what end of the tank is forward
// Move // Move
if (this.keys.y == 1) { if (this.keys.y == 1) {
this.pos.x += this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); this.pos.x += this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI);
this.pos.y += this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); this.pos.y += this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI);
} }
if (this.keys.y == -1) { if (this.keys.y == -1) {
this.pos.x -= this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI); this.pos.x -= this.speed.move * Math.cos(this.rotation + 0.5 * Math.PI);
this.pos.y -= this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI); this.pos.y -= this.speed.move * Math.sin(this.rotation + 0.5 * Math.PI);
}
} }
} }
} }

5
src/index.js
View File

@ -1,3 +1,4 @@
// eslint-disable-next-line no-unused-vars
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
var asdf = require("asdf-games"); var asdf = require("asdf-games");
@ -16,7 +17,9 @@ const
const window = { w: 740, h: 480 }; const window = { w: 740, h: 480 };
var game = new Game(window.w, window.h, true); var game = new Game(window.w, window.h, true);
ipcRenderer.send("resize", window);
// TODO: Enable resize on release
// ipcRenderer.send("resize", window);
const controls = { const controls = {
keys: new KeyControls(), keys: new KeyControls(),

42
src/screens/game.js
View File

@ -38,8 +38,7 @@ class GameScreen extends Container {
this.socket.on("identify", () => { this.socket.on("identify", () => {
this.socket.emit("identification", { this.socket.emit("identification", {
name: "Arn", name: "Arn",
gamemode: 2, gamemode: 2
controls: JSON.stringify(this.controls)
}); });
console.log(`Connected to server as ${this.socket.id}`); console.log(`Connected to server as ${this.socket.id}`);
}); });
@ -52,33 +51,37 @@ class GameScreen extends Container {
// Define local player // Define local player
this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml, colours[Object.keys(this.players).length]); this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml, colours[Object.keys(this.players).length]);
this.player.uuid = this.socket.id; this.player.uuid = this.socket.id;
console.log(this.player);
this.add(this.player); this.add(this.player);
// Store current state of controls for comparing // Store current state of controls for comparing
this.controlsBuffer = JSON.stringify(this.controls); this.dataBuffer = JSON.stringify({
pos: this.player.pos,
rotation: {
body: this.player.rotation,
barrel: this.player.children[0].rotation
}
});
// Handle player logins // Handle player logins
this.socket.on("roomUpdate", (data) => { this.socket.on("roomUpdate", (data) => {
// Add any player that is not the local player and is not already added // Add any player that is not the local player and is not already added
for (const id in data) { for (const id in data) {
if (id != this.socket.id && !(this.players[id])) { 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.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length], true);
this.add(this.players[id]); this.add(this.players[id]);
} }
} }
console.log(this.players); console.log(this.players);
// TODO: Remove players who left // TODO: Remove players who left
}); });
// Handle player updates // Handle player updates
this.socket.on("update", (data) => { this.socket.on("update", (data) => {
// TODO: Fix barrel rotation // TODO: Fix crashing related caused by this function
const player = this.players[data.uuid]; const player = this.players[data.uuid];
player.pos = data.player.pos;
player.rotation = data.player.rotation.body; player.rotation = data.player.rotation.body;
player.barrel.rotation = data.player.rotation.barrel; player.barrel.rotation = data.player.rotation.barrel;
player.pos = data.player.pos;
}); });
// TODO: Lock player untill game starts // TODO: Lock player untill game starts
@ -91,17 +94,20 @@ class GameScreen extends Container {
update(dt, t) { update(dt, t) {
super.update(dt, t); super.update(dt, t);
// TODO: Only send when controls are updated and minify data sent
if (JSON.stringify(this.controls) != this.controlsBuffer) { // Only send when controls are updated and minify data sent
var data = {
pos: this.player.pos,
rotation: {
body: this.player.rotation,
barrel: this.player.children[0].rotation
}
};
if (JSON.stringify(data) != this.dataBuffer) {
console.log("Sending updates"); console.log("Sending updates");
this.socket.emit("update", { this.socket.emit("update", data);
rotation: { this.dataBuffer = JSON.stringify(data);
body: this.player.rotation, }
barrel: this.player.barrel.rotation
},
pos: this.player.pos
});
}
} }
} }