diff --git a/README.md b/README.md index a8a9406..f164830 100644 --- a/README.md +++ b/README.md @@ -1 +1,19 @@ -this is a test \ No newline at end of file +# 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. \ No newline at end of file diff --git a/index.html b/index.html index 27a45c6..ebcb801 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,16 @@ - -

this is so i now now this is working with git

+ + + + + + Ping Pong Game + + + +
+ +
Player: 0 | Computer: 0
+
+ + \ No newline at end of file diff --git a/script.js b/script.js index e69de29..3335f3f 100644 --- a/script.js +++ b/script.js @@ -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(); \ No newline at end of file diff --git a/style.css b/style.css index e69de29..15b1b98 100644 --- a/style.css +++ b/style.css @@ -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; +} \ No newline at end of file