Pong-Pygame

Running

App Files Files Community

Nymbo commited on Aug 7

Commit

20032bf

•

1 Parent(s): 59bd458

Update index.html

Browse files

Files changed (1) hide show

index.html +112 -113

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>Space Invaders</title>
     <style>
         body {
             display: flex;
@@ -19,143 +19,142 @@
     </style>
 </head>
 <body>
-    <canvas id="gameCanvas" width="800" height="600"></canvas>
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
         // Game variables
-        let playerX = 370;
-        let playerY = 480;
-        let playerWidth = 64;
-        let playerHeight = 64;
-        let playerSpeed = 5;
-        let enemies = [];
-        const numEnemies = 6;
-        const enemyWidth = 64;
-        const enemyHeight = 64;
-        let bullet = {
-            x: 0,
-            y: 480,
-            width: 8,
-            height: 20,
-            speed: 10,
-            active: false
         };
-        let score = 0;
-        // Initialize enemies
-        for (let i = 0; i < numEnemies; i++) {
-            enemies.push({
-                x: Math.random() * (canvas.width - enemyWidth),
-                y: Math.random() * 100 + 50,
-                speed: 2,
-                direction: 1
-            });
-        }
-        // Game loop
-        function gameLoop() {
-            update();
-            draw();
-            requestAnimationFrame(gameLoop);
-        }
-        function update() {
-            // Move player
-            if (keys.ArrowLeft && playerX > 0) playerX -= playerSpeed;
-            if (keys.ArrowRight && playerX < canvas.width - playerWidth) playerX += playerSpeed;
-            // Move bullet
-            if (bullet.active) {
-                bullet.y -= bullet.speed;
-                if (bullet.y < 0) bullet.active = false;
             }
-            // Move enemies
-            enemies.forEach(enemy => {
-                enemy.x += enemy.speed * enemy.direction;
-                if (enemy.x <= 0 || enemy.x >= canvas.width - enemyWidth) {
-                    enemy.direction *= -1;
-                    enemy.y += 20;
-                }
-                // Check for collision with bullet
-                if (bullet.active && collision(bullet, enemy)) {
-                    bullet.active = false;
-                    enemy.y = Math.random() * 100 + 50;
-                    enemy.x = Math.random() * (canvas.width - enemyWidth);
-                    score++;
-                }
-                // Check for game over
-                if (enemy.y > playerY - enemyHeight) {
-                    alert('Game Over! Your score: ' + score);
-                    resetGame();
-                }
-            });
         }
-        function draw() {
-            // Clear canvas
-            ctx.fillStyle = 'black';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            // Draw player
-            ctx.fillStyle = 'lime';
-            ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
-            // Draw enemies
-            ctx.fillStyle = 'red';
-            enemies.forEach(enemy => {
-                ctx.fillRect(enemy.x, enemy.y, enemyWidth, enemyHeight);
-            });
-            // Draw bullet
-            if (bullet.active) {
-                ctx.fillStyle = 'white';
-                ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
-            }
-            // Draw score
-            ctx.fillStyle = 'white';
-            ctx.font = '24px Arial';
-            ctx.fillText('Score: ' + score, 10, 30);
         }
-        function collision(rect1, rect2) {
-            return rect1.x < rect2.x + enemyWidth &&
-                   rect1.x + rect1.width > rect2.x &&
-                   rect1.y < rect2.y + enemyHeight &&
-                   rect1.y + rect1.height > rect2.y;
         }
-        function resetGame() {
-            playerX = 370;
-            score = 0;
-            enemies.forEach(enemy => {
-                enemy.y = Math.random() * 100 + 50;
-                enemy.x = Math.random() * (canvas.width - enemyWidth);
-            });
         }
-        // Keyboard input
-        let keys = {};
-        document.addEventListener('keydown', (e) => {
-            keys[e.code] = true;
-            if (e.code === 'Space' && !bullet.active) {
-                bullet.active = true;
-                bullet.x = playerX + playerWidth / 2 - bullet.width / 2;
-                bullet.y = playerY;
             }
         });
-        document.addEventListener('keyup', (e) => {
-            keys[e.code] = false;
         });
         // Start the game

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pong Game</title>
     <style>
         body {
             display: flex;
     </style>
 </head>
 <body>
+    <canvas id="gameCanvas" width="800" height="500"></canvas>
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
         // Game variables
+        const screenWidth = 800;
+        const screenHeight = 500;
+        let playerScore = 0;
+        let opponentScore = 0;
+        // Ball
+        const ball = {
+            x: screenWidth / 2,
+            y: screenHeight / 2,
+            width: 30,
+            height: 30,
+            speedX: 7,
+            speedY: 7
         };
+        // 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() {
+            ball.x += ball.speedX;
+            ball.y += ball.speedY;
+            if (ball.y <= 0 || ball.y + ball.height >= screenHeight) {
+                ball.speedY *= -1;
+            }
+            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() {
+            ball.x = screenWidth / 2;
+            ball.y = screenHeight / 2;
+            ball.speedX *= -1;
         }
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = 'rgb(30, 30, 30)';
+            ctx.fillRect(0, 0, screenWidth, screenHeight);
+            // Draw middle line
+            ctx.strokeStyle = 'rgb(200, 200, 200)';
+            ctx.beginPath();
+            ctx.moveTo(screenWidth / 2, 0);
+            ctx.lineTo(screenWidth / 2, screenHeight);
+            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;
+            }
         });
         // Start the game