From 99b0e9d2ed4b7c4a66857abe360961a2c74a4df4 Mon Sep 17 00:00:00 2001 From: kvebers Date: Sun, 21 Apr 2024 12:17:03 +0200 Subject: [PATCH 1/2] Bug Fix Collision Display Multiplayer --- frontend/src/pages/Games/Multiplayer.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Games/Multiplayer.js b/frontend/src/pages/Games/Multiplayer.js index d4137e22..6938f9d4 100644 --- a/frontend/src/pages/Games/Multiplayer.js +++ b/frontend/src/pages/Games/Multiplayer.js @@ -14,7 +14,7 @@ const GameCanvas = () => { let playerSpeed = 5; const otherPaddleOffset = 3; let resize = true; - const defaultSpeedX = 300; + const defaultSpeedX = 200; const winScore = 10; const defaultSpeedY = 20; const [scoreLeftReact, setScoreLeft] = useState(0); @@ -37,8 +37,8 @@ const GameCanvas = () => { let rightPaddleYSecound = canvasRef.current ? canvasRef.current.height / 2 - paddleHeight / 2 : 0; - let ballX = canvasRef.current ? canvasRef.current.width / 2 : 5; - let ballY = canvasRef.current ? canvasRef.current.height / 2 : 5; + let ballX = canvasRef.current ? canvasRef.current.width / 2 : 500; + let ballY = canvasRef.current ? canvasRef.current.height / 2 : 500; let ballSpeedX = defaultSpeedX; let ballSpeedY = defaultSpeedY; let canvasDefaultWidth = 1920; @@ -94,9 +94,9 @@ const GameCanvas = () => { Math.abs(ballSpeedX); // check for the collision with right paddle } else if ( - ballX < paddleWidth * otherPaddleOffset + ballSize * sizeSpeedRatio && + ballX < paddleWidth * (otherPaddleOffset + 1) + ballSize * sizeSpeedRatio && ballX > - paddleWidth * (otherPaddleOffset - 1) + ballSize * sizeSpeedRatio && + paddleWidth * (otherPaddleOffset) + ballSize * sizeSpeedRatio && ballY > leftPaddleYSecound && ballY < leftPaddleYSecound + paddleHeight ) { @@ -104,7 +104,7 @@ const GameCanvas = () => { const distanceFromCenter = ballY - leftPaddleCenterY; // eslint-disable-next-line no-unused-expressions if (ballSpeedX > 0) paddleWidth * (otherPaddleOffset - 1) - 10; - else ballX = paddleWidth * otherPaddleOffset + 10; + else ballX = paddleWidth * (otherPaddleOffset + 1) + 10; ballSpeedX *= -1; // updates the balls speed in case of collusion with the paddle X speed if (ballSpeedX < 0) ballSpeedX -= ballSpeedIncrease; From 33171fdbfbd55b93603c8bd9eab81915c466f440 Mon Sep 17 00:00:00 2001 From: kvebers Date: Sun, 21 Apr 2024 12:22:43 +0200 Subject: [PATCH 2/2] Auto formatting --- frontend/src/pages/Games/Multiplayer.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/Games/Multiplayer.js b/frontend/src/pages/Games/Multiplayer.js index 6938f9d4..e619bab0 100644 --- a/frontend/src/pages/Games/Multiplayer.js +++ b/frontend/src/pages/Games/Multiplayer.js @@ -94,15 +94,15 @@ const GameCanvas = () => { Math.abs(ballSpeedX); // check for the collision with right paddle } else if ( - ballX < paddleWidth * (otherPaddleOffset + 1) + ballSize * sizeSpeedRatio && - ballX > - paddleWidth * (otherPaddleOffset) + ballSize * sizeSpeedRatio && + ballX < + paddleWidth * (otherPaddleOffset + 1) + ballSize * sizeSpeedRatio && + ballX > paddleWidth * otherPaddleOffset + ballSize * sizeSpeedRatio && ballY > leftPaddleYSecound && ballY < leftPaddleYSecound + paddleHeight ) { const leftPaddleCenterY = leftPaddleYSecound + paddleHeight / 2; const distanceFromCenter = ballY - leftPaddleCenterY; - // eslint-disable-next-line no-unused-expressions + // eslint-disable-next-line no-unused-expressions if (ballSpeedX > 0) paddleWidth * (otherPaddleOffset - 1) - 10; else ballX = paddleWidth * (otherPaddleOffset + 1) + 10; ballSpeedX *= -1; @@ -294,7 +294,7 @@ const GameCanvas = () => { const touchY = event.touches[i].clientY - rect.top - window.scrollY; // Left paddle controls if (touch.clientX < window.innerWidth / 2) { - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps leftPaddleY = touchY - paddleHeight / 2; leftPaddleY = Math.max( 0, @@ -303,7 +303,7 @@ const GameCanvas = () => { } // Right paddle controls else { - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps rightPaddleY = touchY - paddleHeight / 2; rightPaddleY = Math.max( 0,