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;
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`));
this.keys = keys;
this.mouse = mouse;
this.remote = remote;
this.children = [];
// Define body
@ -17,7 +18,6 @@ class Tank extends TileSpriteXML {
};
this.rotation = 0;
// TODO: Do not allow movement when this.locked = true
this.locked = false;
// Define barrel
@ -33,47 +33,49 @@ class Tank extends TileSpriteXML {
update(dt, t) {
super.update(dt,t);
// Make this.barrel follow the mouse
var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x;
var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y;
var tan = dy / dx;
var atan = Math.atan(tan);
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;
if (!this.remote && this.locked == false) {
// Make this.barrel follow the mouse
var dx = (this.pos.x + this.barrel.pos.x) - this.mouse.pos.x;
var dy = (this.pos.y + this.barrel.pos.y) - this.mouse.pos.y;
var tan = dy / dx;
var atan = Math.atan(tan);
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;
// 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
if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) {
this.rotation = 0;
}
if (this.rotation < 0) {
this.rotation = (2 * Math.PI) - this.rotation;
}
// 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
if (this.rotation >= (2 * Math.PI) || this.rotation <= -(2 * Math.PI)) {
this.rotation = 0;
}
if (this.rotation < 0) {
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
// Rotate clockwise
if (this.keys.x == 1) {
this.rotation += dt * 2;
}
// Rotate anti-clockwise
if (this.keys.x == -1) {
this.rotation -= dt * 2;
}
// 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
if (this.keys.x == 1) {
this.rotation += dt * 2;
}
// Rotate anti-clockwise
if (this.keys.x == -1) {
this.rotation -= dt * 2;
}
// TODO: Make it easier to see what end of the tank is forward
// Move
if (this.keys.y == 1) {
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);
}
if (this.keys.y == -1) {
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);
// TODO: Make it easier to see what end of the tank is forward
// Move
if (this.keys.y == 1) {
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);
}
if (this.keys.y == -1) {
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);
}
}
}
}

5
src/index.js
View File

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

40
src/screens/game.js
View File

@ -38,8 +38,7 @@ class GameScreen extends Container {
this.socket.on("identify", () => {
this.socket.emit("identification", {
name: "Arn",
gamemode: 2,
controls: JSON.stringify(this.controls)
gamemode: 2
});
console.log(`Connected to server as ${this.socket.id}`);
});
@ -52,33 +51,37 @@ class GameScreen extends Container {
// 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);
this.dataBuffer = JSON.stringify({
pos: this.player.pos,
rotation: {
body: this.player.rotation,
barrel: this.player.children[0].rotation
}
});
// Handle player logins
this.socket.on("roomUpdate", (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.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length], true);
this.add(this.players[id]);
}
}
console.log(this.players);
// TODO: Remove players who left
});
// Handle player updates
this.socket.on("update", (data) => {
// TODO: Fix barrel rotation
// TODO: Fix crashing related caused by this function
const player = this.players[data.uuid];
player.pos = data.player.pos;
player.rotation = data.player.rotation.body;
player.barrel.rotation = data.player.rotation.barrel;
player.pos = data.player.pos;
});
// TODO: Lock player untill game starts
@ -91,16 +94,19 @@ class GameScreen extends Container {
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");
this.socket.emit("update", {
rotation: {
body: this.player.rotation,
barrel: this.player.barrel.rotation
},
pos: this.player.pos
});
this.socket.emit("update", data);
this.dataBuffer = JSON.stringify(data);
}
}
}