Scribd
Upload
8 views4 pages

MEGAPONG

The document is an HTML file that implements a simple Pong game using JavaScript and the HTML5 canvas element. It defines two paddles controlled by the player and an AI paddle, along with a ball that bounces off the paddles and walls. The game features keyboard controls for the left paddle and continuously updates the game state in a loop.

Uploaded by

ghearn1012
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
8 views4 pages

MEGAPONG

The document is an HTML file that implements a simple Pong game using JavaScript and the HTML5 canvas element. It defines two paddles controlled by the player and an AI paddle, along with a ball that bounces off the paddles and walls. The game features keyboard controls for the left paddle and continuously updates the game state in a loop.

Uploaded by

ghearn1012
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/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elite Pong</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
border: 2px solid white;
}
</style>
</head>
<body>
<canvas id="pong" width="800" height="600"></canvas>

<script>
const canvas = document.getElementById('pong');
const ctx = canvas.getContext('2d');

// Game constants
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
const PADDLE_WIDTH = 15;
const PADDLE_HEIGHT = 100;
const BALL_RADIUS = 10;

// Paddle object
function Paddle(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.speed = 6;
this.dy = 0;

this.update = function() {
this.y += this.dy;
};

this.draw = function() {
ctx.fillStyle = '#FFF';
ctx.fillRect(this.x, this.y, this.width, this.height);
};

this.moveUp = function() {
if (this.y > 0) {
this.dy = -this.speed;
}
};

this.moveDown = function() {
if (this.y + this.height < HEIGHT) {
this.dy = this.speed;
}
};

this.stop = function() {
this.dy = 0;
};
}

// Ball object
function Ball(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
this.dx = 4 * (Math.random() > 0.5 ? 1 : -1);
this.dy = 4 * (Math.random() > 0.5 ? 1 : -1);
this.speed = 5;

this.update = function() {
this.x += this.dx;
this.y += this.dy;
};

this.draw = function() {
ctx.fillStyle = '#FFF';
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
};

this.reset = function() {
this.x = WIDTH / 2;
this.y = HEIGHT / 2;
this.dx = 4 * (Math.random() > 0.5 ? 1 : -1);
this.dy = 4 * (Math.random() > 0.5 ? 1 : -1);
this.speed = 5;
};
}

// Create game objects


const leftPaddle = new Paddle(20, HEIGHT / 2 - PADDLE_HEIGHT / 2, PADDLE_WIDTH,
PADDLE_HEIGHT);
const rightPaddle = new Paddle(WIDTH - 40, HEIGHT / 2 - PADDLE_HEIGHT / 2,
PADDLE_WIDTH, PADDLE_HEIGHT);
const ball = new Ball(WIDTH / 2, HEIGHT / 2, BALL_RADIUS);

// AI for the right paddle


function aiMove() {
const aiSpeed = 7; // Increased speed for AI
const ballFuturePosition = ball.y + ball.dy * (WIDTH / ball.speed);

if (ballFuturePosition < rightPaddle.y + rightPaddle.height / 2) {


rightPaddle.dy = -aiSpeed;
} else if (ballFuturePosition > rightPaddle.y + rightPaddle.height / 2) {
rightPaddle.dy = aiSpeed;
} else {
rightPaddle.stop();
}
}

// Handle keyboard input for left paddle


document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
leftPaddle.moveUp();
} else if (event.key === 'ArrowDown') {
leftPaddle.moveDown();
}
});

document.addEventListener('keyup', (event) => {


if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
leftPaddle.stop();
}
});

// Update and draw the game


function gameLoop() {
// Clear canvas
ctx.clearRect(0, 0, WIDTH, HEIGHT);

// Update positions
leftPaddle.update();
rightPaddle.update();
ball.update();

// Ball collision with top and bottom


if (ball.y - ball.radius <= 0 || ball.y + ball.radius >= HEIGHT) {
ball.dy *= -1;
}

// Ball collision with paddles


if (
(ball.x - ball.radius <= leftPaddle.x + leftPaddle.width && ball.y >=
leftPaddle.y && ball.y <= leftPaddle.y + leftPaddle.height) ||
(ball.x + ball.radius >= rightPaddle.x && ball.y >= rightPaddle.y && ball.y
<= rightPaddle.y + rightPaddle.height)
) {
ball.dx *= -1;
ball.speed += 0.2; // Increase ball speed after each hit
}

// Ball out of bounds (left or right side)


if (ball.x - ball.radius <= 0 || ball.x + ball.radius >= WIDTH) {
ball.reset();
}

// Move AI paddle
aiMove();

// Draw everything
leftPaddle.draw();
rightPaddle.draw();
ball.draw();

// Request next frame


requestAnimationFrame(gameLoop);
}
// Start the game loop
gameLoop();
</script>
</body>
</html>

You might also like