Scribd
Upload
71 views4 pages

Pong

Uploaded by

monteiro logan
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
71 views4 pages

Pong

Uploaded by

monteiro logan
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">
<title>Pong Game for Two Players</title>
<style>
body,
html {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}

canvas {
border: 1px solid white;
}
</style>
</head>

<body>
<canvas id="pongCanvas"></canvas>
<script>
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 400;

let gameStarted = false;

const player1 = {
x: 10,
y: canvas.height / 2 - 40,
width: 10,
height: 80,
dy: 0,
score: 0
};

const player2 = {
x: canvas.width - 20,
y: canvas.height / 2 - 40,
width: 10,
height: 80,
dy: 0,
score: 0
};

const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 7,
speed: 5,
dx: 5,
dy: 5
};

function drawRect(x, y, w, h, color) {


ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}

function drawCircle(x, y, r, color) {


ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}

function drawNet() {
for (let i = 0; i <= canvas.height; i += 20) {
drawRect(canvas.width / 2 - 1, i, 2, 10, 'WHITE');
}
}

function draw() {
drawRect(0, 0, canvas.width, canvas.height, 'BLACK'); // background
drawNet();
drawRect(player1.x, player1.y, player1.width, player1.height, 'WHITE'); //
player1
drawRect(player2.x, player2.y, player2.width, player2.height, 'WHITE'); //
player2
drawCircle(ball.x, ball.y, ball.radius, 'WHITE'); // ball
}

function collision(player, ball) {


player.top = player.y;
player.bottom = player.y + player.height;
player.left = player.x;
player.right = player.x + player.width;

ball.top = ball.y - ball.radius;


ball.bottom = ball.y + ball.radius;
ball.left = ball.x - ball.radius;
ball.right = ball.x + ball.radius;

return player.left < ball.right && player.top < ball.bottom && player.right >
ball.left && player.bottom > ball.top;
}

function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = -ball.dx;
ball.speed = 5;
}

function update() {
if (gameStarted) {
ball.x += ball.dx;
ball.y += ball.dy;

// Simple control player2 (the right paddle)


let player = (ball.x < canvas.width / 2) ? player1 : player2;
if (collision(player, ball)) {
let collidePoint = ball.y - (player.y + player.height / 2);
collidePoint = collidePoint / (player.height / 2);
let angleRad = (Math.PI / 4) * collidePoint;
let direction = (ball.x < canvas.width / 2) ? 1 : -1;
ball.dx = direction * ball.speed * Math.cos(angleRad);
ball.dy = ball.speed * Math.sin(angleRad);
ball.speed = ball.speed * 1.1;
//ball.speed += 0.1;
}

if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {


ball.dy = -ball.dy;
}

if (ball.x - ball.radius < 0) {


player2.score++; // Player 2 scores
resetBall();
} else if (ball.x + ball.radius > canvas.width) {
player1.score++; // Player 1 scores
resetBall();
}

player1.y += player1.dy;
if (player1.y < 0) player1.y = 0;
else if (player1.y + player1.height > canvas.height) player1.y =
canvas.height - player1.height;

player2.y += player2.dy;
if (player2.y < 0) player2.y = 0;
else if (player2.y + player2.height > canvas.height) player2.y =
canvas.height - player2.height;
}
}

function drawScore() {
context.font = '35px Arial';
context.fillStyle = 'white';
context.fillText(player1.score, canvas.width / 4, 50);
context.fillText(player2.score, 3 * canvas.width / 4, 50);
}

function restartGame() {
// Resetar as pontuações
player1.score = 0;
player2.score = 0;
// Atualizar a exibição das pontuações, se aplicável
// Esta é uma função hipotética para atualizar as pontuações na tela

// Posicionar a bola no centro da tela


ball.x = canvas.width / 2;
ball.y = canvas.height / 2;

// Resetar a velocidade e direção da bola para os valores iniciais


ball.velocityX = 5; // Ajuste conforme a velocidade inicial desejada
ball.velocityY = 5; // Ajuste conforme a velocidade inicial desejada
ball.speed = 7; // Ajuste conforme a velocidade inicial desejada
// Marcar o jogo como não iniciado, requerendo uma ação para começar
gameStarted = false;
}

function gameLoop() {
draw();
update();
if (player1.score === 10) {
alert("Player 1 wins!");
document.location.reload();
restartGame();
} else if (player2.score === 10) {
alert("Player 2 wins!");
document.location.reload();
restartGame();
}
requestAnimationFrame(gameLoop);
}

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


if (event.key === 'w') player1.dy = -10;
else if (event.key === 's') player1.dy = 10;
if (event.key === 'ArrowUp') player2.dy = -10;
else if (event.key === 'ArrowDown') player2.dy = 10;

// Start the game with any key


if (!gameStarted) {
gameStarted = true;
gameLoop();
}
});

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


if (event.key === 'w' || event.key === 's') player1.dy = 0;
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') player2.dy = 0;
});

draw(); // Initial draw to show the starting state


</script>
</body>

</html>

You might also like