addid the ping pog game
This commit is contained in:
@@ -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.
|
||||||
+15
-2
@@ -1,3 +1,16 @@
|
|||||||
<html>
|
<!DOCTYPE html>
|
||||||
<p>this is so i now now this is working with git </p>
|
<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>
|
</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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user