// Get the canvas and its context
const canvas = document.getElementById("pong");
const ctx = canvas.getContext("2d");
// Create the ball
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
speed: 5,
velocityX: 5,
velocityY: 5,
color: "WHITE"
};
// Create the paddles
const paddleWidth = 10, paddleHeight = 100;
const player = {
x: 0,
y: (canvas.height - paddleHeight) / 2,
width: paddleWidth,
height: paddleHeight,
color: "WHITE",
score: 0
};
const computer = {
x: canvas.width - paddleWidth,
y: (canvas.height - paddleHeight) / 2,
width: paddleWidth,
height: paddleHeight,
color: "WHITE",
score: 0
};
// Draw the ball
function drawBall(x, y, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
// Draw the paddles
function drawPaddle(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// Draw the net in the middle
function drawNet() {
for (let i = 0; i < canvas.height; i += 15) {
ctx.fillStyle = "WHITE";
ctx.fillRect(canvas.width / 2 - 1, i, 2, 10);
}
}
// Move the computer paddle
function moveComputer() {
let computerLevel = 0.1;
computer.y += (ball.y - (computer.y + computer.height / 2)) * computerLevel;
}
// Collision detection
function collision(b, p) {
b.top = b.y - b.radius;
b.bottom = b.y + b.radius;
b.left = b.x - b.radius;
b.right = b.x + b.radius;
p.top = p.y;
p.bottom = p.y + p.height;
p.left = p.x;
p.right = p.x + p.width;
return b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom;
}
// Reset the ball
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.velocityX = -ball.velocityX;
ball.speed = 5;
}
// Update the game state
function update() {
ball.x += ball.velocityX;
ball.y += ball.velocityY;
// Wall collision (top and bottom)
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.velocityY = -ball.velocityY;
}
// Check if the ball hits the player's or computer's paddle
let playerPaddle = (ball.x < canvas.width / 2) ? player : computer;
if (collision(ball, playerPaddle)) {
let collidePoint = (ball.y - (playerPaddle.y + playerPaddle.height / 2));
collidePoint = collidePoint / (playerPaddle.height / 2);
let angleRad = collidePoint * Math.PI / 4;
let direction = (ball.x < canvas.width / 2) ? 1 : -1;
ball.velocityX = direction * ball.speed * Math.cos(angleRad);
ball.velocityY = ball.speed * Math.sin(angleRad);
ball.speed += 0.2;
}
// Point scoring and reset
if (ball.x - ball.radius < 0) {
computer.score++;
resetBall();
} else if (ball.x + ball.radius > canvas.width) {
player.score++;
resetBall();
}
// Move computer paddle
moveComputer();
}
// Draw everything
function render() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the net
drawNet();
// Draw the paddles
drawPaddle(player.x, player.y, player.width, player.height, player.color);
drawPaddle(computer.x, computer.y, computer.width, computer.height, computer.color);
// Draw the ball
drawBall(ball.x, ball.y, ball.radius, ball.color);
// Draw scores
ctx.fillStyle = "WHITE";
ctx.font = "35px Arial";
ctx.fillText(player.score, canvas.width / 4, canvas.height / 5);
ctx.fillText(computer.score, 3 * canvas.width / 4, canvas.height / 5);
}
// Control the player paddle with the mouse
canvas.addEventListener("mousemove", movePaddle);
function movePaddle(event) {
let rect = canvas.getBoundingClientRect();
player.y = event.clientY - rect.top - player.height / 2;
}
// Game loop
function game() {
update();
render();
}
// Frames per second
const framePerSecond = 50;
setInterval(game, 1000 / framePerSecond);
