Spaces:

ahmadreza13
/

Ping-pong

Running

App Files Files Community

ahmadreza13 commited on 15 days ago

Commit

6856c9a

verified ·

1 Parent(s): bd59e15

Update index.html

Browse files

Files changed (1) hide show

index.html +169 -19

index.html CHANGED Viewed

@@ -1,19 +1,169 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>