Spaces:

ahmadreza13
/

Ping-pong

Running

App Files Files Community

ahmadreza13 commited on 27 days ago

Commit

1e02ade

verified ·

1 Parent(s): 6856c9a

Update index.html

Browse files

Files changed (1) hide show

index.html +162 -166

index.html CHANGED Viewed

@@ -1,169 +1,165 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pong Game</title>
-    <style>
-        body {
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            background-color: #000;
         }
-        canvas {
-            border: 2px solid #fff;
         }
-    </style>
-</head>
-<body>
-    <canvas id="pongCanvas"></canvas>
-    <script>
-        const canvas = document.getElementById('pongCanvas');
-        const ctx = canvas.getContext('2d');
-        // Set canvas dimensions
-        canvas.width = 800;
-        canvas.height = 600;
-        // Ball properties
-        const ball = {
-            x: canvas.width / 2,
-            y: canvas.height / 2,
-            radius: 10,
-            speed: 7,
-            dx: 4,
-            dy: -4
-        };
-        // Paddle properties
-        const paddleWidth = 10;
-        const paddleHeight = 100;
-        const leftPaddle = {
-            x: 0,
-            y: (canvas.height - paddleHeight) / 2,
-            width: paddleWidth,
-            height: paddleHeight,
-            speed: 8
-        };
-        const rightPaddle = {
-            x: canvas.width - paddleWidth,
-            y: (canvas.height - paddleHeight) / 2,
-            width: paddleWidth,
-            height: paddleHeight,
-            speed: 8
-        };
-        // Player scores
-        let leftScore = 0;
-        let rightScore = 0;
-        // Draw functions
-        function drawBall() {
-            ctx.beginPath();
-            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
-            ctx.fillStyle = '#fff';
-            ctx.fill();
-            ctx.closePath();
         }
-        function drawPaddle(paddle) {
-            ctx.beginPath();
-            ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
-            ctx.fillStyle = '#fff';
-            ctx.fill();
-            ctx.closePath();
-        }
-        function drawScores() {
-            ctx.font = '30px Arial';
-            ctx.fillStyle = '#fff';
-            ctx.fillText(leftScore, canvas.width / 4, 50);
-            ctx.fillText(rightScore, 3 * canvas.width / 4, 50);
-        }
-        // Update game state
-        function update() {
-            // Move ball
-            ball.x += ball.dx;
-            ball.y += ball.dy;
-            // Bounce ball off top and bottom walls
-            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
-                ball.dy = -ball.dy;
-            }
-            // Bounce ball off paddles
-            if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
-                ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {
-                ball.dx = -ball.dx;
-            }
-            if (ball.x + ball.radius > rightPaddle.x &&
-                ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {
-                ball.dx = -ball.dx;
-            }
-            // Score points
-            if (ball.x - ball.radius < 0) {
-                rightScore++;
-                resetBall();
-            }
-            if (ball.x + ball.radius > canvas.width) {
-                leftScore++;
-                resetBall();
-            }
-            // Move paddles
-            if (keys['ArrowUp'] && rightPaddle.y > 0) {
-                rightPaddle.y -= rightPaddle.speed;
-            }
-            if (keys['ArrowDown'] && rightPaddle.y < canvas.height - rightPaddle.height) {
-                rightPaddle.y += rightPaddle.speed;
-            }
-            if (keys['w'] && leftPaddle.y > 0) {
-                leftPaddle.y -= leftPaddle.speed;
-            }
-            if (keys['s'] && leftPaddle.y < canvas.height - leftPaddle.height) {
-                leftPaddle.y += leftPaddle.speed;
-            }
-        }
-        // Reset ball position
-        function resetBall() {
-            ball.x = canvas.width / 2;
-            ball.y = canvas.height / 2;
-            ball.dx = -ball.dx;
-        }
-        // Draw everything
-        function draw() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            drawBall();
-            drawPaddle(leftPaddle);
-            drawPaddle(rightPaddle);
-            drawScores();
-        }
-        // Game loop
-        function gameLoop() {
-            update();
-            draw();
-            requestAnimationFrame(gameLoop);
-        }
-        // Key handling
-        const keys = {};
-        document.addEventListener('keydown', function(e) {
-            keys[e.key] = true;
-        });
-        document.addEventListener('keyup', function(e) {
-            delete keys[e.key];
-        });
-        // Start the game
-        gameLoop();
-    </script>
-</body>
-</html>

+const canvas = document.getElementById('pongCanvas');
+const ctx = canvas.getContext('2d');
+// Set canvas dimensions
+canvas.width = 800;
+canvas.height = 600;
+// Ball properties
+const ball = {
+    x: canvas.width / 2,
+    y: canvas.height / 2,
+    radius: 10,
+    speed: 7,
+    dx: 4,
+    dy: -4
+};
+// Paddle properties
+const paddleWidth = 10;
+const paddleHeight = 100;
+const leftPaddle = {
+    x: 0,
+    y: (canvas.height - paddleHeight) / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    speed: 8
+};
+const rightPaddle = {
+    x: canvas.width - paddleWidth,
+    y: (canvas.height - paddleHeight) / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    speed: 8
+};
+// Player scores
+let leftScore = 0;
+let rightScore = 0;
+// Game mode
+let isPlayerVsAI = false;
+// Draw functions
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+    ctx.fillStyle = '#fff';
+    ctx.fill();
+    ctx.closePath();
+}
+function drawPaddle(paddle) {
+    ctx.beginPath();
+    ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
+    ctx.fillStyle = '#fff';
+    ctx.fill();
+    ctx.closePath();
+}
+function drawScores() {
+    ctx.font = '30px Arial';
+    ctx.fillStyle = '#fff';
+    ctx.fillText(leftScore, canvas.width / 4, 50);
+    ctx.fillText(rightScore, 3 * canvas.width / 4, 50);
+}
+// Update game state
+function update() {
+    // Move ball
+    ball.x += ball.dx;
+    ball.y += ball.dy;
+    // Bounce ball off top and bottom walls
+    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
+        ball.dy = -ball.dy;
+    }
+    // Bounce ball off paddles
+    if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
+        ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {
+        ball.dx = -ball.dx;
+    }
+    if (ball.x + ball.radius > rightPaddle.x &&
+        ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {
+        ball.dx = -ball.dx;
+    }
+    // Score points
+    if (ball.x - ball.radius < 0) {
+        rightScore++;
+        resetBall();
+    }
+    if (ball.x + ball.radius > canvas.width) {
+        leftScore++;
+        resetBall();
+    }
+    // Move paddles
+    if (!isPlayerVsAI) {
+        if (keys['ArrowUp'] && rightPaddle.y > 0) {
+            rightPaddle.y -= rightPaddle.speed;
         }
+        if (keys['ArrowDown'] && rightPaddle.y < canvas.height - rightPaddle.height) {
+            rightPaddle.y += rightPaddle.speed;
         }
+    } else {
+        // AI logic
+        if (rightPaddle.y + rightPaddle.height / 2 < ball.y) {
+            rightPaddle.y += rightPaddle.speed;
+        } else if (rightPaddle.y + rightPaddle.height / 2 > ball.y) {
+            rightPaddle.y -= rightPaddle.speed;
         }
+    }
+    if (keys['w'] && leftPaddle.y > 0) {
+        leftPaddle.y -= leftPaddle.speed;
+    }
+    if (keys['s'] && leftPaddle.y < canvas.height - leftPaddle.height) {
+        leftPaddle.y += leftPaddle.speed;
+    }
+}
+// Reset ball position
+function resetBall() {
+    ball.x = canvas.width / 2;
+    ball.y = canvas.height / 2;
+    ball.dx = -ball.dx;
+}
+// Draw everything
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    drawPaddle(leftPaddle);
+    drawPaddle(rightPaddle);
+    drawScores();
+}
+// Game loop
+function gameLoop() {
+    update();
+    draw();
+    requestAnimationFrame(gameLoop);
+}
+// Key handling
+const keys = {};
+document.addEventListener('keydown', function(e) {
+    keys[e.key] = true;
+});
+document.addEventListener('keyup', function(e) {
+    delete keys[e.key];
+});
+// Button event listeners
+document.getElementById('playerVsPlayer').addEventListener('click', function() {
+    isPlayerVsAI = false;
+});
+document.getElementById('playerVsAI').addEventListener('click', function() {
+    isPlayerVsAI = true;
+});
+// Start the game
+gameLoop();