e

hu8813 · Apr 3, 2024 · e6574af · e6574af
1 parent af4c37a
commit e6574af
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 20 deletions.
diff --git a/frontend/css/PongEhab.css b/frontend/css/PongEhab.css
@@ -1,4 +1,3 @@
-
 #pongEhabGameCanvas {
     background-color: #111;
 }

diff --git a/frontend/css/PongGame.css b/frontend/css/PongGame.css
@@ -0,0 +1,31 @@
+#pongGameCanvas {
+    background-color: #111;
+}
+
+.pong-game-over-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #222;
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    display: none; /* Versteckt das Modal standardmäßig */
+}
+
+.pong-game-over-modal button {
+    background-color: #555;
+    border: none;
+    padding: 10px 20px;
+    text-transform: uppercase;
+    color: white;
+    cursor: pointer;
+    margin-top: 20px;
+    border-radius: 5px;
+}
+
+.pong-game-over-modal button:hover {
+    background-color: #777;
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -18,6 +18,8 @@
   <link rel="stylesheet" href="./css/Profile.css" />
   <link rel="stylesheet" href="./css/Register.css" />
   <link rel="stylesheet" href="./css/Navbar.css" />
+  <link rel="stylesheet" href="./css/PongEhab.css" />
+  <link rel="stylesheet" href="./css/PongGame.css" />
   <script
   src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

diff --git a/frontend/js/PongEhab.js b/frontend/js/PongEhab.js
@@ -36,13 +36,27 @@ function showPongEhabPage() {
             color: "#FFF"
         };
 
-        document.addEventListener('keydown', function(event) {
+/*         document.addEventListener('keydown', function(event) {
             switch(event.key) {
                 case 'w': player1.y -= 20; break;
                 case 's': player1.y += 20; break;
                 case 'ArrowUp': player2.y -= 20; break;
                 case 'ArrowDown': player2.y += 20; break;
             }
+        }); */
+
+        document.addEventListener('keydown', function(event) {
+            const moveAmount = 30; // Erhöht von 20 auf 30 für schnellere Bewegung
+            switch(event.key) {
+                case 'w': player1.y -= moveAmount; break;
+                case 's': player1.y += moveAmount; break;
+                case 'ArrowUp': player2.y -= moveAmount; break;
+                case 'ArrowDown': player2.y += moveAmount; break;
+            }
+
+            // Verhindere, dass die Schläger über den Bildschirm hinaus bewegt werden
+            player1.y = Math.max(Math.min(player1.y, canvas.height - player1.height), 0);
+            player2.y = Math.max(Math.min(player2.y, canvas.height - player2.height), 0);
         });
 
         function drawBall() {
@@ -66,21 +80,27 @@ function showPongEhabPage() {
         }
 
         function collisionDetection(ball, player) {
-            if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
-                if (ball.y > player.y && ball.y < player.y + player.height) {
-                    ball.velocityX = -ball.velocityX;
-                } else {
-                    if (ball.x - ball.radius < 0) player2.score++;
-                    else player1.score++;
-
-                    if (player1.score === 7 || player2.score === 7) {
-                        gameOver = true;
-                        winner = player1.score === 7 ? 'Player 1' : 'Player 2';
-                        generateConfetti();
-                    }
-
-                    resetBall();
+            // Kollisionsüberprüfung für den linken und rechten Schläger
+            if (ball.x - ball.radius < player1.x + player1.width && ball.x + ball.radius > player1.x &&
+                ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height ||
+                ball.x - ball.radius < player2.x + player2.width && ball.x + ball.radius > player2.x &&
+                ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height) {
+
+                // Kollision detektiert, Ballrichtung umkehren
+                ball.velocityX = -ball.velocityX * 1.1; // Erhöht zusätzlich die Geschwindigkeit des Balls bei jedem Schlag
+                ball.velocityY += 0.1 * (Math.random() > 0.5 ? 1 : -1); // Fügt eine kleine zufällige Y-Verschiebung hinzu
+            } else if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
+                // Überprüft, ob der Ball einen der horizontalen Ränder ohne Kollision mit den Schlägern erreicht hat
+                if (ball.x < canvas.width / 2) player2.score++; // Punkt für Spieler 2
+                else player1.score++; // Punkt für Spieler 1
+
+                if (player1.score === 7 || player2.score === 7) {
+                    gameOver = true;
+                    winner = player1.score === 7 ? 'Player 1' : 'Player 2';
+                    generateConfetti();
                 }
+
+                resetBall();
             }
         }
 
@@ -164,6 +184,4 @@ function showPongEhabPage() {
 
             updateConfetti();
         }
-
-
 };
diff --git a/frontend/views/playerai1.html b/frontend/views/playerai1.html
@@ -1,5 +1,5 @@
 <canvas id="playerAiCanvas"></canvas>
     <div id="playerAiModal" class="modal hidden">
         <h1 id="playerAiWinner"></h1>
-        <button id="playerAiRestart">Neu starten</button>
+        <button id="playerAiRestart">New Game</button>
     </div>
diff --git a/frontend/views/pongehab.html b/frontend/views/pongehab.html
@@ -2,6 +2,6 @@
     <canvas id="pongEhabGameCanvas"></canvas>
     <div id="pongEhabGameOverModal" class="pongEhab-hidden">
         <h1 id="pongEhabWinnerText"></h1>
-        <button id="pongEhabRestartButton">Neu starten</button>
+        <button id="pongEhabRestartButton">New Game</button>
     </div>
 </div>