Scribd
Upload
14 views

Java

Uploaded by

tasleemafzal84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views

Java

Uploaded by

tasleemafzal84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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