Spaces:
Running
Running
<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> |