|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Autonomous Pong</title> |
|
|
<style> |
|
|
canvas { |
|
|
border: 1px solid white; |
|
|
background: black; |
|
|
margin: 20px auto; |
|
|
display: block; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="gameCanvas" width="800" height="400"></canvas> |
|
|
|
|
|
<script> |
|
|
const canvas = document.getElementById('gameCanvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
|
|
|
const ball = { |
|
|
x: canvas.width / 2, |
|
|
y: canvas.height / 2, |
|
|
radius: 10, |
|
|
speedX: 5, |
|
|
speedY: 5 |
|
|
}; |
|
|
|
|
|
const paddleWidth = 10; |
|
|
const paddleHeight = 60; |
|
|
|
|
|
const leftPaddle = { |
|
|
x: 50, |
|
|
y: canvas.height / 2 - paddleHeight / 2, |
|
|
speed: 4 |
|
|
}; |
|
|
|
|
|
const rightPaddle = { |
|
|
x: canvas.width - 50 - paddleWidth, |
|
|
y: canvas.height / 2 - paddleHeight / 2, |
|
|
speed: 4 |
|
|
}; |
|
|
|
|
|
|
|
|
function gameLoop() { |
|
|
update(); |
|
|
draw(); |
|
|
requestAnimationFrame(gameLoop); |
|
|
} |
|
|
|
|
|
|
|
|
function update() { |
|
|
|
|
|
ball.x += ball.speedX; |
|
|
ball.y += ball.speedY; |
|
|
|
|
|
|
|
|
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) { |
|
|
ball.speedY = -ball.speedY; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (ball.y > leftPaddle.y + paddleHeight / 2) { |
|
|
leftPaddle.y += leftPaddle.speed; |
|
|
} else { |
|
|
leftPaddle.y -= leftPaddle.speed; |
|
|
} |
|
|
|
|
|
|
|
|
if (ball.y > rightPaddle.y + paddleHeight / 2) { |
|
|
rightPaddle.y += rightPaddle.speed; |
|
|
} else { |
|
|
rightPaddle.y -= rightPaddle.speed; |
|
|
} |
|
|
|
|
|
|
|
|
leftPaddle.y = Math.max(0, Math.min(canvas.height - paddleHeight, leftPaddle.y)); |
|
|
rightPaddle.y = Math.max(0, Math.min(canvas.height - paddleHeight, rightPaddle.y)); |
|
|
|
|
|
|
|
|
if ( |
|
|
(ball.x - ball.radius < leftPaddle.x + paddleWidth && |
|
|
ball.y > leftPaddle.y && |
|
|
ball.y < leftPaddle.y + paddleHeight) || |
|
|
(ball.x + ball.radius > rightPaddle.x && |
|
|
ball.y > rightPaddle.y && |
|
|
ball.y < rightPaddle.y + paddleHeight) |
|
|
) { |
|
|
ball.speedX = -ball.speedX; |
|
|
|
|
|
ball.speedY += (Math.random() - 0.5) * 2; |
|
|
} |
|
|
|
|
|
|
|
|
if (ball.x < 0 || ball.x > canvas.width) { |
|
|
ball.x = canvas.width / 2; |
|
|
ball.y = canvas.height / 2; |
|
|
ball.speedX = -ball.speedX; |
|
|
ball.speedY = (Math.random() - 0.5) * 10; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function draw() { |
|
|
|
|
|
ctx.fillStyle = 'black'; |
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); |
|
|
ctx.fillStyle = 'white'; |
|
|
ctx.fill(); |
|
|
ctx.closePath(); |
|
|
|
|
|
|
|
|
ctx.fillStyle = 'white'; |
|
|
ctx.fillRect(leftPaddle.x, leftPaddle.y, paddleWidth, paddleHeight); |
|
|
ctx.fillRect(rightPaddle.x, rightPaddle.y, paddleWidth, paddleHeight); |
|
|
|
|
|
|
|
|
ctx.beginPath(); |
|
|
ctx.setLineDash([5, 15]); |
|
|
ctx.moveTo(canvas.width / 2, 0); |
|
|
ctx.lineTo(canvas.width / 2, canvas.height); |
|
|
ctx.strokeStyle = 'white'; |
|
|
ctx.stroke(); |
|
|
ctx.setLineDash([]); |
|
|
} |
|
|
|
|
|
|
|
|
gameLoop(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
