addid the ping pog game

2026-01-22 15:04:14 +00:00
parent 05bb2c01c5
commit 5971ba30be
4 changed files with 182 additions and 3 deletions
@@ -1 +1,19 @@
-this is a test
+# Ping Pong Game
+
+A basic HTML5 ping pong game implemented using HTML, CSS, and JavaScript.
+
+## Files
+
+- `index.html`: The main HTML file that sets up the game canvas and includes the CSS and JavaScript files.
+- `style.css`: Contains the styling for the game, including the canvas border and score display.
+- `script.js`: The JavaScript file that handles the game logic, drawing, and user input.
+
+## How to Play
+
+- Use the up and down arrow keys to move your paddle.
+- The goal is to hit the ball past the computer's paddle to score points.
+- The computer has a simple AI to move its paddle.
+
+## Running the Game
+
+Open `index.html` in a web browser to start playing.
@@ -1,3 +1,16 @@
-<html>
-<p>this is so i now now this is working with git </p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ping Pong Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <canvas id="game-canvas" width="800" height="400"></canvas>
+        <div id="score">Player: 0 | Computer: 0</div>
+    </div>
+    <script src="script.js"></script>
+</body>
 </html>
@@ -0,0 +1,124 @@
+const canvas = document.getElementById('game-canvas');
+const ctx = canvas.getContext('2d');
+const scoreElement = document.getElementById('score');
+
+const paddleWidth = 10;
+const paddleHeight = 80;
+const ballSize = 10;
+
+let playerPaddle = {
+    x: 10,
+    y: canvas.height / 2 - paddleHeight / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    dy: 0
+};
+
+let computerPaddle = {
+    x: canvas.width - 20,
+    y: canvas.height / 2 - paddleHeight / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    dy: 0
+};
+
+let ball = {
+    x: canvas.width / 2,
+    y: canvas.height / 2,
+    dx: 5,
+    dy: 5,
+    size: ballSize
+};
+
+let playerScore = 0;
+let computerScore = 0;
+
+function drawPaddle(paddle) {
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+}
+
+function drawBall() {
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(ball.x, ball.y, ball.size, ball.size);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawPaddle(playerPaddle);
+    drawPaddle(computerPaddle);
+    drawBall();
+    scoreElement.textContent = `Player: ${playerScore} | Computer: ${computerScore}`;
+}
+
+function update() {
+    // Move player paddle
+    playerPaddle.y += playerPaddle.dy;
+    if (playerPaddle.y < 0) playerPaddle.y = 0;
+    if (playerPaddle.y > canvas.height - paddleHeight) playerPaddle.y = canvas.height - paddleHeight;
+
+    // Move computer paddle (simple AI)
+    if (ball.y < computerPaddle.y + paddleHeight / 2) {
+        computerPaddle.y -= 3;
+    } else if (ball.y > computerPaddle.y + paddleHeight / 2) {
+        computerPaddle.y += 3;
+    }
+    if (computerPaddle.y < 0) computerPaddle.y = 0;
+    if (computerPaddle.y > canvas.height - paddleHeight) computerPaddle.y = canvas.height - paddleHeight;
+
+    // Move ball
+    ball.x += ball.dx;
+    ball.y += ball.dy;
+
+    // Ball collision with top and bottom
+    if (ball.y <= 0 || ball.y >= canvas.height - ball.size) {
+        ball.dy = -ball.dy;
+    }
+
+    // Ball collision with paddles
+    if (ball.x <= playerPaddle.x + paddleWidth && ball.y >= playerPaddle.y && ball.y <= playerPaddle.y + paddleHeight) {
+        ball.dx = -ball.dx;
+    }
+    if (ball.x >= computerPaddle.x - ball.size && ball.y >= computerPaddle.y && ball.y <= computerPaddle.y + paddleHeight) {
+        ball.dx = -ball.dx;
+    }
+
+    // Score
+    if (ball.x < 0) {
+        computerScore++;
+        resetBall();
+    }
+    if (ball.x > canvas.width) {
+        playerScore++;
+        resetBall();
+    }
+}
+
+function resetBall() {
+    ball.x = canvas.width / 2;
+    ball.y = canvas.height / 2;
+    ball.dx = -ball.dx;
+}
+
+function gameLoop() {
+    update();
+    draw();
+    requestAnimationFrame(gameLoop);
+}
+
+// Controls
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowUp') {
+        playerPaddle.dy = -5;
+    } else if (e.key === 'ArrowDown') {
+        playerPaddle.dy = 5;
+    }
+});
+
+document.addEventListener('keyup', (e) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        playerPaddle.dy = 0;
+    }
+});
+
+gameLoop();
@@ -0,0 +1,24 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #000;
+    font-family: Arial, sans-serif;
+}
+
+#game-container {
+    text-align: center;
+}
+
+#game-canvas {
+    border: 2px solid #fff;
+    background-color: #000;
+}
+
+#score {
+    color: #fff;
+    font-size: 24px;
+    margin-top: 20px;
+}