Scribd
Upload
14 views

Java

Uploaded by

tasleemafzal84
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Java

Uploaded by

tasleemafzal84
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

const canvas = document.

getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const PADDLE_WIDTH = 15, PADDLE_HEIGHT = 100;


const BALL_RADIUS = 10;
const PADDLE_SPEED = 10;
let ballVelocityX = 5, ballVelocityY = 5;

let player1Y = canvas.height / 2 - PADDLE_HEIGHT / 2;


let player2Y = canvas.height / 2 - PADDLE_HEIGHT / 2;
let ballX = canvas.width / 2 - BALL_RADIUS;
let ballY = canvas.height / 2 - BALL_RADIUS;

let scorePlayer1 = 0;
let scorePlayer2 = 0;

// Update the score display


function updateScore() {
document.getElementById('scorePlayer1').innerText = `Player 1: $
{scorePlayer1}`;
document.getElementById('scorePlayer2').innerText = `Player 2: $
{scorePlayer2}`;
}

// Draw the paddles, ball, and game screen


function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddles
ctx.fillStyle = 'white';
ctx.fillRect(50, player1Y, PADDLE_WIDTH, PADDLE_HEIGHT); // Player 1 Paddle
ctx.fillRect(canvas.width - 50 - PADDLE_WIDTH, player2Y, PADDLE_WIDTH,
PADDLE_HEIGHT); // Player 2 Paddle

// Draw ball
ctx.beginPath();
ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
ctx.fill();
}

// 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 < canvas.height) {
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 < canvas.height) {
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 >= canvas.height) {
ballVelocityY *= -1;
}

// Ball collision with paddles


if (ballX <= 50 + PADDLE_WIDTH && ballY >= player1Y && ballY <= player1Y +
PADDLE_HEIGHT) {
ballVelocityX *= -1;
}
if (ballX >= canvas.width - 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 >= canvas.width) {
scorePlayer1++;
resetBall();
}
}

// Reset ball to center after scoring


function resetBall() {
ballX = canvas.width / 2 - BALL_RADIUS;
ballY = canvas.height / 2 - BALL_RADIUS;
ballVelocityX *= -1; // Randomize direction
}

// Listen for keydown and keyup events


let keys = {};
window.addEventListener('keydown', (e) => {
keys[e.key] = true;

// Fullscreen toggle with F11


if (e.key === 'F11') {
e.preventDefault(); // Prevent the default F11 action
toggleFullScreen();
}

// Exit full-screen with Esc key


if (e.key === 'Escape') {
if (document.fullscreenElement) {
document.exitFullscreen();
}
}
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// Function to toggle full-screen mode
function toggleFullScreen() {
if (!document.fullscreenElement) {
// Enter full-screen
if (canvas.requestFullscreen) {
canvas.requestFullscreen();
} else if (canvas.mozRequestFullScreen) { // Firefox
canvas.mozRequestFullScreen();
} else if (canvas.webkitRequestFullscreen) { // Chrome, Safari and Opera
canvas.webkitRequestFullscreen();
} else if (canvas.msRequestFullscreen) { // IE/Edge
canvas.msRequestFullscreen();
}
} else {
// Exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
}

// Game loop function


function gameLoop() {
movePaddles();
moveBall();
draw();
updateScore();
requestAnimationFrame(gameLoop); // Continue the loop
}

// Start the game loop


gameLoop();

You might also like