From 264c56e704bfe24f145f3ec56161bf798ffa92bf Mon Sep 17 00:00:00 2001 From: Ehab Elasam Date: Thu, 25 Apr 2024 21:08:22 +0200 Subject: [PATCH] e --- srcs/frontend/js/playerai1.js | 13 +++---- srcs/frontend/js/pong3.js | 48 ++++++++----------------- srcs/frontend/js/pong4.js | 66 ++++++++++++----------------------- srcs/frontend/js/pongehab.js | 36 +++++++------------ 4 files changed, 57 insertions(+), 106 deletions(-) diff --git a/srcs/frontend/js/playerai1.js b/srcs/frontend/js/playerai1.js index 60c963b..ec5b92c 100644 --- a/srcs/frontend/js/playerai1.js +++ b/srcs/frontend/js/playerai1.js @@ -149,13 +149,14 @@ function showPlayerAi1Page() { ctx.font = "48px Arial"; ctx.fillText(`${winner} Won!`, canvas.width / 2, canvas.height / 2.5); - - const newGButton2 = document.getElementById('newGButton'); - if (newGButton2) - document.getElementById('newGButton').style.display = 'block'; - newGameButton(); + setTimeout(() => { + const newGButton2 = document.getElementById('newGButton'); + if (newGButton2) + document.getElementById('newGButton').style.display = 'block'; + newGameButton(); + }, 1000); } - + let gameOverMessage = ''; function showGameOver() { diff --git a/srcs/frontend/js/pong3.js b/srcs/frontend/js/pong3.js index dded521..9246a1c 100644 --- a/srcs/frontend/js/pong3.js +++ b/srcs/frontend/js/pong3.js @@ -201,15 +201,17 @@ function showPong3() { let lost = await translateKey("lost"); ctx.fillText(`${loser} `+lost, canvas.width / 2, canvas.height / 4); - const newGButton2 = document.getElementById('newGButton'); - if (newGButton2) - document.getElementById('newGButton').style.display = 'block'; - newGButton(); + setTimeout(() => { + const newGButton2 = document.getElementById('newGButton'); + if (newGButton2) + document.getElementById('newGButton').style.display = 'block'; + newGButton(); + }, 1000); gameOver = true; } - async function update() { + function update() { if (gameOver) return; @@ -230,42 +232,18 @@ function showPong3() { ball.velocityY = -ball.velocityY; } - let player = await translateKey("player"); if (ball.x - ball.radius < 0) { player1.score++; - // if (player1.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 1"); - // } else { - // resetBall(); - // } resetBall(); } else if (ball.x + ball.radius > canvas.width) { player2.score++; - // if (player2.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 2"); - // } else { - // resetBall(); - // } resetBall(); } - - if (ball.y + ball.radius >= canvas.height - 10) { if (ball.x >= player3.x && ball.x <= (player3.x + player3.width)) { - ball.velocityY = -ball.speed; } else { - player3.score++; - // if (player3.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 3"); - // disableControls(); - // } else { - // resetBall(); - // } resetBall(); } } @@ -275,21 +253,23 @@ function showPong3() { if (collisionDetect(player2, ball)) handlePaddleBallCollision(player2, ball); } - function resetBall() { + async function resetBall() { ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.velocityX = (Math.random() > 0.5 ? 1 : -1) * ball.speed; ball.velocityY = (Math.random() * 2 - 1) * ball.speed; ball.speed = 7; - + + let player = await translateKey("player"); + if (player1.score >= 7 || player2.score >= 7 || player3.score >= 7) { setTimeout(() => { if (player1.score >= 7) { - showGameOverModal("Player 1"); + showGameOverModal(player+" 1"); } else if (player2.score >= 7) { - showGameOverModal("Player 2"); + showGameOverModal(player+" 2"); } else if (player3.score >= 7){ - showGameOverModal("Player 3"); + showGameOverModal(player+" 3"); } }, 100); } diff --git a/srcs/frontend/js/pong4.js b/srcs/frontend/js/pong4.js index 23737b4..b4a7bab 100644 --- a/srcs/frontend/js/pong4.js +++ b/srcs/frontend/js/pong4.js @@ -47,6 +47,7 @@ function showPong4() { score: 0 }; + const player4 = { x: canvas.width / 2 - paddleHeight / 2, y: 10, @@ -68,7 +69,7 @@ function showPong4() { document.addEventListener('keydown', keyDownHandler); document.addEventListener('keyup', keyUpHandler); - canvas.addEventListener('mousemove', mouseMoveHandler); + // canvas.addEventListener('mousemove', mouseMoveHandler); document.addEventListener("visibilitychange", function () { if (document.visibilityState === 'hidden') { @@ -140,12 +141,12 @@ function showPong4() { } } - function mouseMoveHandler(event) { - let canvasRect = canvas.getBoundingClientRect(); - let scaleX = canvas.width / canvasRect.width; - let mouseX = (event.clientX - canvasRect.left) * scaleX; - player3.x = Math.max(Math.min(mouseX - (player3.width / 2), canvas.width - player3.width), 0); - } + // function mouseMoveHandler(event) { + // let canvasRect = canvas.getBoundingClientRect(); + // let scaleX = canvas.width / canvasRect.width; + // let mouseX = (event.clientX - canvasRect.left) * scaleX; + // player3.x = Math.max(Math.min(mouseX - (player3.width / 2), canvas.width - player3.width), 0); + // } function collisionDetect(player, ball) { player.top = player.y; @@ -240,14 +241,16 @@ function showPong4() { ctx.textAlign = "center"; let lost = await translateKey("lost"); ctx.fillText(`${loser} `+lost, canvas.width / 2, canvas.height / 2); - const nGButton2 = document.getElementById('nGButton'); - if (nGButton2) - document.getElementById('nGButton').style.display = 'block'; - nGButton(); + setTimeout(() => { + const nGButton2 = document.getElementById('nGButton'); + if (nGButton2) + document.getElementById('nGButton').style.display = 'block'; + nGButton(); + }, 1000); gameOver = true; } - async function update() { + function update() { if (gameOver) return; // Player 1 and Player 2 vertical movement @@ -272,43 +275,18 @@ function showPong4() { if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) { ball.velocityY = -ball.velocityY; } - let player = await translateKey("player"); - // Ball collisions with players and scoring + if (ball.x - ball.radius < 0) { player1.score++; - // if (player1.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 1"); - // } else { - // resetBall(); - // } resetBall(); } else if (ball.x + ball.radius > canvas.width) { player2.score++; - // if (player2.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 2"); - // } else { - // resetBall(); - // } resetBall(); } else if (ball.y + ball.radius >= canvas.height) { player3.score++; - // if (player3.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 3"); - // } else { - // resetBall(); - // } resetBall(); } else if (ball.y - ball.radius <= 0) { player4.score++; - // if (player4.score >= 7) { - // gameOver = true; - // showGameOverModal(player+" 4"); - // } else { - // resetBall(); - // } resetBall(); } @@ -327,23 +305,25 @@ function showPong4() { } } - function resetBall() { + async function resetBall() { ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.velocityX = (Math.random() > 0.5 ? 1 : -1) * ball.speed; ball.velocityY = (Math.random() * 2 - 1) * ball.speed; ball.speed = 7; + + let player = await translateKey("player"); if (player1.score >= 7 || player2.score >= 7 || player3.score >= 7 || player4.score >= 7) { setTimeout(() => { if (player1.score >= 7) { - showGameOverModal("Player 1"); + showGameOverModal(player+" 1"); } else if (player2.score >= 7) { - showGameOverModal("Player 2"); + showGameOverModal(player+" 2"); } else if (player3.score >= 7){ - showGameOverModal("Player 3"); + showGameOverModal(player+" 3"); } else if (player4.score >= 7){ - showGameOverModal("Player 4"); + showGameOverModal(player+" 4"); } }, 100); } diff --git a/srcs/frontend/js/pongehab.js b/srcs/frontend/js/pongehab.js index db7287b..4def9b6 100644 --- a/srcs/frontend/js/pongehab.js +++ b/srcs/frontend/js/pongehab.js @@ -171,14 +171,16 @@ function showPongEhab() { let won = await translateKey("won"); ctx.fillText(`${winner} `+won, canvas.width / 2, canvas.height / 2); - const newGamButton2 = document.getElementById('newGamButton'); - if (newGamButton2) - document.getElementById('newGamButton').style.display = 'block'; - newGamButton(); + setTimeout(() => { + const newGamButton2 = document.getElementById('newGamButton'); + if (newGamButton2) + document.getElementById('newGamButton').style.display = 'block'; + newGamButton(); + }, 1000); gameOver = true; } - async function update() { + function update() { if (gameOver|| isGamePaused) return; if (wPressed && player1.y > 0) player1.y -= 8; @@ -195,26 +197,12 @@ function showPongEhab() { } else if (ball.y + ball.radius > canvas.height) { ball.velocityY = -Math.abs(ball.velocityY); } - - let player = await translateKey("player"); + if (ball.x - ball.radius < 0) { player2.score++; - // if (player2.score === 7) { - // gameOver = true; - // showGameOverModal(player+" 2"); - // } else { - // resetBall(); - // } resetBall(); } else if (ball.x + ball.radius > canvas.width) { player1.score++; - // if (player1.score === 7) { - // gameOver = true; - // showGameOverModal(player+" 1"); - // disableControls(); - // } else { - // resetBall(); - // } resetBall(); } @@ -222,19 +210,21 @@ function showPongEhab() { if (collisionDetect(player2, ball)) handlePaddleBallCollision(player2, ball); } - function resetBall() { + async function resetBall() { ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.velocityX = (Math.random() > 0.5 ? 1 : -1) * ball.speed; ball.velocityY = (Math.random() * 2 - 1) * ball.speed; ball.speed = 7; + let player = await translateKey("player"); + if (player1.score >= 7 || player2.score >= 7) { setTimeout(() => { if (player1.score >= 7) { - showGameOverModal("Player 1"); + showGameOverModal(player+" 1"); } else if (player2.score >= 7) { - showGameOverModal("Player 2"); + showGameOverModal(player+" 2"); } }, 100); }