Pong-Pygame

Running

App Files Files Community

Nymbo commited on Aug 7

Commit

a126240

•

1 Parent(s): 91e9681

Update index.html

Browse files

Files changed (1) hide show

index.html +44 -38

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pong Game</title>
     <style>
         body {
             display: flex;
@@ -28,7 +28,7 @@
         const screenWidth = 800;
         const screenHeight = 500;
         let playerScore = 0;
-        let opponentScore = 0;
         // Ball
         const ball = {
@@ -43,19 +43,19 @@
         // Paddles
         const paddleWidth = 10;
         const paddleHeight = 140;
-        const player = {
-            x: screenWidth - 20,
             y: screenHeight / 2 - paddleHeight / 2,
             width: paddleWidth,
             height: paddleHeight,
             speed: 0
         };
-        const opponent = {
-            x: 10,
             y: screenHeight / 2 - paddleHeight / 2,
             width: paddleWidth,
             height: paddleHeight,
-            speed: 0
         };
         function ballAnimation() {
@@ -67,31 +67,40 @@
             }
             if (ball.x + ball.width >= screenWidth) {
-                opponentScore++;
                 ballRestart();
             } else if (ball.x <= 0) {
-                playerScore++;
                 ballRestart();
             }
             if (
-                (ball.x <= opponent.x + opponent.width &&
-                 ball.y + ball.height >= opponent.y &&
-                 ball.y <= opponent.y + opponent.height) ||
-                (ball.x + ball.width >= player.x &&
-                 ball.y + ball.height >= player.y &&
-                 ball.y <= player.y + player.height)
             ) {
                 ball.speedX *= -1;
             }
         }
-        function playerAnimation() {
-            player.y = Math.max(0, Math.min(screenHeight - player.height, player.y + player.speed));
         }
-        function opponentAnimation() {
-            opponent.y = Math.max(0, Math.min(screenHeight - opponent.height, opponent.y + opponent.speed));
         }
         function ballRestart() {
@@ -113,47 +122,44 @@
             ctx.stroke();
             // Draw paddles
-            ctx.fillStyle = 'rgb(200, 200, 200)';
-            ctx.fillRect(player.x, player.y, player.width, player.height);
-            ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);
             // Draw ball
             ctx.beginPath();
             ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
             ctx.fill();
             // Draw scores
             ctx.font = '32px Arial';
-            ctx.fillText(playerScore, 420, 40);
-            ctx.fillText(opponentScore, 360, 40);
         }
         function gameLoop() {
             ballAnimation();
-            playerAnimation();
-            opponentAnimation();
             draw();
             requestAnimationFrame(gameLoop);
         }
         // Keyboard controls
         document.addEventListener('keydown', (event) => {
-            if (event.key === 'ArrowUp') {
-                player.speed = -7;
-            } else if (event.key === 'ArrowDown') {
-                player.speed = 7;
-            } else if (event.key === 'w') {
-                opponent.speed = -7;
-            } else if (event.key === 's') {
-                opponent.speed = 7;
             }
         });
         document.addEventListener('keyup', (event) => {
-            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-                player.speed = 0;
-            } else if (event.key === 'w' || event.key === 's') {
-                opponent.speed = 0;
             }
         });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pong Game (Player vs AI)</title>
     <style>
         body {
             display: flex;
         const screenWidth = 800;
         const screenHeight = 500;
         let playerScore = 0;
+        let aiScore = 0;
         // Ball
         const ball = {
         // Paddles
         const paddleWidth = 10;
         const paddleHeight = 140;
+        const playerPaddle = {
+            x: 10,
             y: screenHeight / 2 - paddleHeight / 2,
             width: paddleWidth,
             height: paddleHeight,
             speed: 0
         };
+        const aiPaddle = {
+            x: screenWidth - 20,
             y: screenHeight / 2 - paddleHeight / 2,
             width: paddleWidth,
             height: paddleHeight,
+            speed: 5
         };
         function ballAnimation() {
             }
             if (ball.x + ball.width >= screenWidth) {
+                playerScore++;
                 ballRestart();
             } else if (ball.x <= 0) {
+                aiScore++;
                 ballRestart();
             }
             if (
+                (ball.x <= playerPaddle.x + playerPaddle.width &&
+                 ball.y + ball.height >= playerPaddle.y &&
+                 ball.y <= playerPaddle.y + playerPaddle.height) ||
+                (ball.x + ball.width >= aiPaddle.x &&
+                 ball.y + ball.height >= aiPaddle.y &&
+                 ball.y <= aiPaddle.y + aiPaddle.height)
             ) {
                 ball.speedX *= -1;
             }
         }
+        function playerPaddleAnimation() {
+            playerPaddle.y = Math.max(0, Math.min(screenHeight - playerPaddle.height, playerPaddle.y + playerPaddle.speed));
         }
+        function aiPaddleAnimation() {
+            const paddleCenter = aiPaddle.y + aiPaddle.height / 2;
+            const ballCenter = ball.y + ball.height / 2;
+            if (paddleCenter < ballCenter - 35) {
+                aiPaddle.y += aiPaddle.speed;
+            } else if (paddleCenter > ballCenter + 35) {
+                aiPaddle.y -= aiPaddle.speed;
+            }
+            aiPaddle.y = Math.max(0, Math.min(screenHeight - aiPaddle.height, aiPaddle.y));
         }
         function ballRestart() {
             ctx.stroke();
             // Draw paddles
+            ctx.fillStyle = 'blue';
+            ctx.fillRect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);
+            ctx.fillStyle = 'red';
+            ctx.fillRect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height);
             // Draw ball
+            ctx.fillStyle = 'white';
             ctx.beginPath();
             ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
             ctx.fill();
             // Draw scores
             ctx.font = '32px Arial';
+            ctx.fillStyle = 'white';
+            ctx.fillText(playerScore, 360, 40);
+            ctx.fillText(aiScore, 420, 40);
         }
         function gameLoop() {
             ballAnimation();
+            playerPaddleAnimation();
+            aiPaddleAnimation();
             draw();
             requestAnimationFrame(gameLoop);
         }
         // Keyboard controls
         document.addEventListener('keydown', (event) => {
+            if (event.key === 'w' || event.key === 'W') {
+                playerPaddle.speed = -7;
+            } else if (event.key === 's' || event.key === 'S') {
+                playerPaddle.speed = 7;
             }
         });
         document.addEventListener('keyup', (event) => {
+            if (event.key === 'w' || event.key === 'W' || event.key === 's' || event.key === 'S') {
+                playerPaddle.speed = 0;
             }
         });