124 lines
3.0 KiB
JavaScript
124 lines
3.0 KiB
JavaScript
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 = '#1100ff';
|
|
ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
|
|
}
|
|
|
|
function drawBall() {
|
|
ctx.fillStyle = '#1aff00';
|
|
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(); |