<!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>
canvas {
border: 1px solid black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="pongCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');
const paddleWidth = 10;
const paddleHeight = 80;
const ballRadius = 8;
const paddleSpeed = 5;
let paddle1Y = canvas.height / 2 - paddleHeight / 2;
let paddle2Y = canvas.height / 2 - paddleHeight / 2;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw paddles
ctx.fillStyle = 'white';
ctx.fillRect(0, paddle1Y, paddleWidth, paddleHeight);
ctx.fillRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);
// Draw ball
ctx.beginPath();
ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
}
function update() {
// Move paddles
if (paddle1Y >= 0 && paddle1Y <= canvas.height - paddleHeight) {
if (upPressed) {
paddle1Y -= paddleSpeed;
}
if (downPressed) {
paddle1Y += paddleSpeed;
}
}
if (paddle2Y >= 0 && paddle2Y <= canvas.height - paddleHeight) {
if (wPressed) {
paddle2Y -= paddleSpeed;
}
if (sPressed) {
paddle2Y += paddleSpeed;
}
}
// Move ball
ballX += ballSpeedX;
ballY += ballSpeedY;
// Ball collision with top and bottom walls
if (ballY + ballRadius >= canvas.height || ballY - ballRadius <= 0) {
ballSpeedY = -ballSpeedY;
}
// Ball collision with paddles
if ((ballX - ballRadius <= paddleWidth && ballY >= paddle1Y && ballY <= paddle1Y + paddleHeight) ||
(ballX + ballRadius >= canvas.width - paddleWidth && ballY >= paddle2Y && ballY <= paddle2Y + paddleHeight)) {
ballSpeedX = -ballSpeedX;
}
// Ball out of bounds
if (ballX + ballRadius >= canvas.width || ballX - ballRadius <= 0) {
// Reset ball position
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
ballSpeedY = 5; // Change this to adjust initial ball speed
}
}
let upPressed = false;
let downPressed = false;
let wPressed = false;
let sPressed = false;
function keyDownHandler(event) {
if (event.key === 'ArrowUp') {
upPressed = true;
} else if (event.key === 'ArrowDown') {
downPressed = true;
} else if (event.key === 'w') {
wPressed = true;
} else if (event.key === 's') {
sPressed = true;
}
}
function keyUpHandler(event) {
if (event.key === 'ArrowUp') {
upPressed = false;
} else if (event.key === 'ArrowDown') {
downPressed = false;
} else if (event.key === 'w') {
wPressed = false;
} else if (event.key === 's') {
sPressed = false;
}
}
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
