tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add client side colisions to reduce lag(add debuging, ball is white when client is predicting movement)

Browse Source
This commit is contained in:
tomoron
2024-10-04 00:10:42 +02:00
parent 6484969e4b
commit 975763d20f
5 changed files with 204 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docker-compose/requirements/djangoserver/file/server/server/Game.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# #
# Updated: 2024/10/01 00:46:17 by tomoron ### ########.fr #
# Updated: 2024/10/03 23:54:53 by tomoron ### ########.fr #
# #
# **************************************************************************** #
@ -73,6 +73,7 @@ class Game:
self.end = False
self.left = None
self.winner = None
self.gameStart = 0
self.expSleepTime = 0
self.p1Pos = {"pos":0, "up": False}
@ -121,7 +122,7 @@ class Game:
def genObstacles(self):
for x in Game.wallsPos:
if random.randint(1, 100) < 50:
if random.randint(1, 100) < 70:
self.obstacles.append(x)
i = 0
down = False
@ -217,17 +218,24 @@ class Game:
if(opponent != None):
opponent.sync_send({"type":"game","content":{"action":3, "pos":-pos, "up":up, "is_opponent":True}})
def sendNewBallInfo(self):
def sendNewBallInfo(self, reset = False):
print("send new ball info")
if(reset):
gameTime = 0
self.gameStart = time.time() * 1000
else:
gameTime = (time.time() * 1000) - self.gameStart
if(self.p1):
self.p1.sync_send({"type":"game", "content":{"action":5,
"pos" : [self.ballPos["pos"][0],self.ballPos["pos"][1]],
"velocity":[self.ballVel[0], self.ballVel[1]]
"velocity":[self.ballVel[0], self.ballVel[1]],
"game_time":gameTime
}})
if(self.p2):
self.p2.sync_send({"type":"game","content":{"action":5,
"pos" : [-self.ballPos["pos"][0],-self.ballPos["pos"][1]],
"velocity":[-self.ballVel[0], -self.ballVel[1]]
"velocity":[-self.ballVel[0], -self.ballVel[1]],
"game_time":gameTime
}})
def solve_quadratic(self, a, b, c):
@ -240,7 +248,7 @@ class Game:
def check_jumper_colision(self, jumper):
jpos = (jumper["pos"]["x"], jumper["pos"]["z"])
pos1 = self.ballPos["pos"]
pos2 = self.ballPos["pos"][0] +self.ballVel[0], self.ballPos["pos"][1] + self.ballVel[1]
pos2 = self.ballPos["pos"][0] + self.ballVel[0], self.ballPos["pos"][1] + self.ballVel[1]
slope = 0
if(pos1[0] - pos2[0] == 0):
slope=100000
@ -435,7 +443,7 @@ class Game:
if(self.lastWin == 2):
velZ = -velZ
self.ballVel = (velX, velZ)
self.sendNewBallInfo()
self.sendNewBallInfo(True)
self.lastUpdate = time.time()
async def gameLoop(self):

3
docker-compose/requirements/djangoserver/file/server/server/typeRequests/gameRequest.py
View File

@ -6,7 +6,7 @@
# By: tomoron <tomoron@student.42.fr> +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/09 16:10:26 by tomoron #+# #+# #
# Updated: 2024/09/30 15:35:47 by tomoron ### ########.fr #
# Updated: 2024/10/01 16:35:10 by tomoron ### ########.fr #
# #
# **************************************************************************** #
@ -38,6 +38,7 @@ from .gameActions.ping import ping
# 5 : ball_move : send new directtion/movement to the client
# - pos : [x, z]
# - velocity : [x, z]
# - game_time : ms since start of game
#
# 6 : goal : someone scored a goal
# - is_opponent

184
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
View File

@ -11,6 +11,8 @@
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { map, opponent, player} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'
class Ball
{
@ -18,9 +20,25 @@ class Ball
centerPos = {};
limits = {};
interval = null;
lastTime = 0;
velocity = [0, 0];
lastPos = [0, 0, 0];
start = 0;
srvPos = {
time : 0,
pos : [0, 0, 1],
vel : [0, 0]
}
ballRadius = 0.15
mapLimits = {
left : -3.5 + this.ballRadius,
right : 3.5 - this.ballRadius,
back : -6.25 + this.ballRadius,
front : 6.25 - this.ballRadius
}
wallWidth = 0.1
wallLength = 1
playerLength = 1 + (this.ballRadius * 4)
constructor(scene, map)
{
@ -95,17 +113,161 @@ class Ball
updatePos(content)
{
this.lastTime = new Date().getTime();
this.lastPos = [content.pos[0], this.object.position.y, content.pos[1]];
this.velocity = content.velocity;
if(content.game_time == 0)
this.start = performance.now()
let gameTime = performance.now() - this.start
if(content.game_time > gameTime)
this.start -= content.game_time - gameTime
this.srvPos = {
time : content.game_time,
pos : [content.pos[0], content.pos[1]],
vel : content.velocity
}
}
getBetterPositions()
{
let walls = []
// let jumpers = []
for(let x = 0; x < map.arrObject.length; x++)
{
// if(map.arrObject[x].type == "jumperBottom" || map.arrObject[x].type == "jumperTop")
// {
// let jumper = map.arrObject[x]
// jumpers.push({pos:[jumper.mesh.children[0].position.x,jumper.mesh.children[0].position.z],
// isUp : jumper.type == "jumperTop"})
// }
if(map.arrObject[x].type == "wallObstacle")
{
let wall = map.arrObject[x]
walls.push({pos:[wall.mesh.position.x, wall.mesh.position.z],isUp:wall.isUp})
}
}
return({walls:walls/*,jumpers:jumpers*/})
}
hitPlayer(ballSlope, ballOffset, ballVel)
{
let playerPos = ballVel[0] < 0 ? opponent.object.position.x : player.object.position.x
let limit = this.mapLimits.front
if(ballVel[1] < 0)
limit *= -1
let hitPos = this.lineIntersect(limit, ballSlope, ballOffset)
let relPos = hitPos - playerPos
return(Math.abs(relPos) < this.playerLength / 2)
}
closestTimeMapLimit(ballSlope, ballOffset, ballPos, ballVel)
{
let time = Infinity;
let tmpTime = Infinity;
if(ballVel[0] < 0)
{
let dist = ballPos[0] - this.mapLimits.left
time = dist / Math.abs(ballVel[0])
}
else if(ballVel[0] > 0)
{
let dist = this.mapLimits.right - ballPos[0]
time = dist / Math.abs(ballVel[0])
}
if(ballVel[1] < 0)
{
let dist = ballPos[1] - this.mapLimits.back
tmpTime = dist / Math.abs(ballVel[1])
}
if(ballVel[1] > 0)
{
let dist = this.mapLimits.front - ballPos[1]
tmpTime = dist / Math.abs(ballVel[1])
}
if(tmpTime < time && this.hitPlayer(ballSlope, ballOffset, ballVel))
return([2, tmpTime])
return([1, time])
}
lineIntersect(line, ballSlope, ballOffset)
{
return((line - ballOffset) / ballSlope)
}
getWallHitTime(walls, ballSlope, ballOffset, ballPos, ballVel, ballUp)
{
let wallSide = (this.wallWidth / 2) + this.ballRadius
if(ballVel[1] > 0)
wallSide *= -1
let hitPos = this.lineIntersect(wallSide, ballSlope, ballOffset)
let finalTime = Infinity
for(let i = 0; i < walls.length; i++)
{
if(walls[i].isUp != ballUp)
continue;
let relPos = walls[i].pos[0] - hitPos
if(Math.abs(relPos) < (this.wallLength / 2) + this.ballRadius)
{
let time = (hitPos - ballPos[0]) / ballVel[0]
if(time > 0 && time < finalTime)
finalTime = time
}
}
return(finalTime)
}
getNextPosTime(obstacles, ballPos,ballVel, ballUp)
{
let hitDir;
let time;
let nextPos = [ballPos[0] + ballVel[0], ballPos[1] + ballVel[1]]
let ballSlope = (nextPos[1] - ballPos[1]) / (nextPos[0] - ballPos[0])
let ballOffset = ballPos[1] - (ballSlope * ballPos[0]);
[hitDir, time] = this.closestTimeMapLimit(ballSlope, ballOffset, ballPos, ballVel)
let wallHitTime = this.getWallHitTime(obstacles.walls, ballSlope, ballOffset, ballPos, ballVel, ballUp)
if(wallHitTime > 0 && wallHitTime < time)
[hitDir ,time] = [2, wallHitTime]
ballVel[hitDir - 1] *= -1
return([time, ballVel])
}
calcNewPos(delta,obstacles, ballPos, ballVel, ballUp)
{
//kill me
let iter = 0
if((ballVel[0] == 0 && ballVel[1] == 0) || delta <= 0)
return(ballPos)
while(1)
{
let time;
let nextVel;
[time, nextVel] = this.getNextPosTime(obstacles, ballPos, [...ballVel], ballUp)
if((time * 1000) > delta)
return([ballPos[0] + (ballVel[0] * (delta / 1000)),ballPos[1] + (ballVel[1] * (delta /1000))])
ballPos[0] += ballVel[0] * time
ballPos[1] += ballVel[1] * time
ballVel = nextVel
delta -= time * 1000
this.object.material.color.set(0xffffff)
iter++;
if(iter == 50)
return([0,0])
}
}
update()
{
const deltaTime = ((new Date().getTime()) - this.lastTime) / 1000;
const x = this.lastPos[0] + (deltaTime * this.velocity[0]);
const z = this.lastPos[2] + (deltaTime * this.velocity[1]);
this.object.position.set(x, this.object.position.y, z);
// TODO: m[ae]th
this.object.material.color.set(0xff5555)
let gameTime = performance.now() - this.start
let lastPosDelta = gameTime - this.srvPos.time
let ballPos = [...this.srvPos.pos];
let ballVel = [...this.srvPos.vel];
let ballUp = this.object.position.y > (this.limits.up / 2)
let betterPositions = this.getBetterPositions()
let newPos = this.calcNewPos(lastPosDelta,betterPositions, ballPos, ballVel, ballUp)
this.object.position.set(newPos[0], this.object.position.y, newPos[1]);
}
dispose()
@ -127,4 +289,4 @@ class Ball
}
export { Ball };
export { Ball };

3
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -361,6 +361,7 @@ class Map
meshWallObs.position.set(x, this.playerLimits.up - 0.1, y);
else
meshWallObs.position.set(x, 0.4, y);
this.arrObject.push({mesh : meshWallObs, name:"", type:"wallObstacle", isUp:onTop})
return (meshWallObs);
};
@ -1075,4 +1076,4 @@ function createRing(colorO) {
return new THREE.Mesh(geometry, material);
}
export { Map, createStar, createBox, createRectangle, createRing, colorList };
export { Map, createStar, createBox, createRectangle, createRing, colorList };

12
docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
View File

@ -14,8 +14,20 @@ import { MultiOnlineGamePage, opponent, ball, player, map } from "/static/javasc
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { pageRenderer } from '/static/javascript/main.js'
let stopSrvUpdate = false
document.addEventListener('keypress',(e)=>{
if(e.key == 'q')
{
console.log("stopped server updates")
stopSrvUpdate = true
}
});
function typeGame(content)
{
if(stopSrvUpdate)
return
if (pageRenderer.actualPage == WaitingGamePage)
{
if (content.action == 1)