Pong-Pygame / index.html
Nymbo's picture
Update index.html
20032bf verified
raw
history blame
No virus
4.86 kB
<!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 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
canvas {
border: 2px solid #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="500"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game variables
const screenWidth = 800;
const screenHeight = 500;
let playerScore = 0;
let opponentScore = 0;
// Ball
const ball = {
x: screenWidth / 2,
y: screenHeight / 2,
width: 30,
height: 30,
speedX: 7,
speedY: 7
};
// Paddles
const paddleWidth = 10;
const paddleHeight = 140;
const player = {
x: screenWidth - 20,
y: screenHeight / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 0
};
const opponent = {
x: 10,
y: screenHeight / 2 - paddleHeight / 2,
width: paddleWidth,
height: paddleHeight,
speed: 0
};
function ballAnimation() {
ball.x += ball.speedX;
ball.y += ball.speedY;
if (ball.y <= 0 || ball.y + ball.height >= screenHeight) {
ball.speedY *= -1;
}
if (ball.x + ball.width >= screenWidth) {
opponentScore++;
ballRestart();
} else if (ball.x <= 0) {
playerScore++;
ballRestart();
}
if (
(ball.x <= opponent.x + opponent.width &&
ball.y + ball.height >= opponent.y &&
ball.y <= opponent.y + opponent.height) ||
(ball.x + ball.width >= player.x &&
ball.y + ball.height >= player.y &&
ball.y <= player.y + player.height)
) {
ball.speedX *= -1;
}
}
function playerAnimation() {
player.y = Math.max(0, Math.min(screenHeight - player.height, player.y + player.speed));
}
function opponentAnimation() {
opponent.y = Math.max(0, Math.min(screenHeight - opponent.height, opponent.y + opponent.speed));
}
function ballRestart() {
ball.x = screenWidth / 2;
ball.y = screenHeight / 2;
ball.speedX *= -1;
}
function draw() {
// Clear canvas
ctx.fillStyle = 'rgb(30, 30, 30)';
ctx.fillRect(0, 0, screenWidth, screenHeight);
// Draw middle line
ctx.strokeStyle = 'rgb(200, 200, 200)';
ctx.beginPath();
ctx.moveTo(screenWidth / 2, 0);
ctx.lineTo(screenWidth / 2, screenHeight);
ctx.stroke();
// Draw paddles
ctx.fillStyle = 'rgb(200, 200, 200)';
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);
// Draw ball
ctx.beginPath();
ctx.arc(ball.x + ball.width / 2, ball.y + ball.height / 2, ball.width / 2, 0, Math.PI * 2);
ctx.fill();
// Draw scores
ctx.font = '32px Arial';
ctx.fillText(playerScore, 420, 40);
ctx.fillText(opponentScore, 360, 40);
}
function gameLoop() {
ballAnimation();
playerAnimation();
opponentAnimation();
draw();
requestAnimationFrame(gameLoop);
}
// Keyboard controls
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
player.speed = -7;
} else if (event.key === 'ArrowDown') {
player.speed = 7;
} else if (event.key === 'w') {
opponent.speed = -7;
} else if (event.key === 's') {
opponent.speed = 7;
}
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
player.speed = 0;
} else if (event.key === 'w' || event.key === 's') {
opponent.speed = 0;
}
});
// Start the game
gameLoop();
</script>
</body>
</html>