const canvas = document.
getElementById("gameCanvas");
const ctx = [Link]("2d");
const PADDLE_WIDTH = 15, PADDLE_HEIGHT = 100;
const BALL_RADIUS = 10;
const PADDLE_SPEED = 10;
let ballVelocityX = 5, ballVelocityY = 5;
let player1Y = [Link] / 2 - PADDLE_HEIGHT / 2;
let player2Y = [Link] / 2 - PADDLE_HEIGHT / 2;
let ballX = [Link] / 2 - BALL_RADIUS;
let ballY = [Link] / 2 - BALL_RADIUS;
let scorePlayer1 = 0;
let scorePlayer2 = 0;
// Update the score display
function updateScore() {
[Link]('scorePlayer1').innerText = `Player 1: $
{scorePlayer1}`;
[Link]('scorePlayer2').innerText = `Player 2: $
{scorePlayer2}`;
}
// Draw the paddles, ball, and game screen
function draw() {
[Link](0, 0, [Link], [Link]);
// Draw paddles
[Link] = 'white';
[Link](50, player1Y, PADDLE_WIDTH, PADDLE_HEIGHT); // Player 1 Paddle
[Link]([Link] - 50 - PADDLE_WIDTH, player2Y, PADDLE_WIDTH,
PADDLE_HEIGHT); // Player 2 Paddle
// Draw ball
[Link]();
[Link](ballX, ballY, BALL_RADIUS, 0, [Link] * 2);
[Link]();
}
// Move paddles based on key input
function movePaddles() {
// Player 1 (Left Paddle) controls: W and S
if (keys['w'] && player1Y > 0) {
player1Y -= PADDLE_SPEED;
}
if (keys['s'] && player1Y + PADDLE_HEIGHT < [Link]) {
player1Y += PADDLE_SPEED;
}
// Player 2 (Right Paddle) controls: Up and Down arrows
if (keys['ArrowUp'] && player2Y > 0) {
player2Y -= PADDLE_SPEED;
}
if (keys['ArrowDown'] && player2Y + PADDLE_HEIGHT < [Link]) {
player2Y += PADDLE_SPEED;
}
}
// Move the ball and check for collisions
function moveBall() {
ballX += ballVelocityX;
ballY += ballVelocityY;
// Ball collision with top or bottom walls
if (ballY <= 0 || ballY >= [Link]) {
ballVelocityY *= -1;
}
// Ball collision with paddles
if (ballX <= 50 + PADDLE_WIDTH && ballY >= player1Y && ballY <= player1Y +
PADDLE_HEIGHT) {
ballVelocityX *= -1;
}
if (ballX >= [Link] - 50 - PADDLE_WIDTH - BALL_RADIUS * 2 && ballY >=
player2Y && ballY <= player2Y + PADDLE_HEIGHT) {
ballVelocityX *= -1;
}
// Ball out of bounds (Left or Right)
if (ballX <= 0) {
scorePlayer2++;
resetBall();
}
if (ballX >= [Link]) {
scorePlayer1++;
resetBall();
}
}
// Reset ball to center after scoring
function resetBall() {
ballX = [Link] / 2 - BALL_RADIUS;
ballY = [Link] / 2 - BALL_RADIUS;
ballVelocityX *= -1; // Randomize direction
}
// Listen for keydown and keyup events
let keys = {};
[Link]('keydown', (e) => {
keys[[Link]] = true;
// Fullscreen toggle with F11
if ([Link] === 'F11') {
[Link](); // Prevent the default F11 action
toggleFullScreen();
}
// Exit full-screen with Esc key
if ([Link] === 'Escape') {
if ([Link]) {
[Link]();
}
}
});
[Link]('keyup', (e) => {
keys[[Link]] = false;
});
// Function to toggle full-screen mode
function toggleFullScreen() {
if (![Link]) {
// Enter full-screen
if ([Link]) {
[Link]();
} else if ([Link]) { // Firefox
[Link]();
} else if ([Link]) { // Chrome, Safari and Opera
[Link]();
} else if ([Link]) { // IE/Edge
[Link]();
}
} else {
// Exit full-screen
if ([Link]) {
[Link]();
} else if ([Link]) { // Firefox
[Link]();
} else if ([Link]) { // Chrome, Safari and Opera
[Link]();
} else if ([Link]) { // IE/Edge
[Link]();
}
}
}
// Game loop function
function gameLoop() {
movePaddles();
moveBall();
draw();
updateScore();
requestAnimationFrame(gameLoop); // Continue the loop
}
// Start the game loop
gameLoop();
