const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') const ball = { x: canvas.width / 2, y: canvas.height / 2, dx: 5, dy: 5, size: 10 } const player1 = { x: 0, y: canvas.height / 2 - 40, score: 0, height: 80, width: 10 } const player2 = { x: canvas.width - 10, y: canvas.height / 2 - 40, score: 0, height: 80, width: 10 } const powerUp = { x: 0, y: 0, dx: 0, dy: 0, size: 10, active: false } document.addEventListener('keydown', movePlayer) function movePlayer(event) { if (event.code === 'ArrowUp' && player1.y > 0) { player1.y -= 20 } else if (event.code === 'ArrowDown' && player1.y < canvas.height - player1.height) { player1.y += 20 } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height) drawBall() drawPlayer(player1) drawPlayer(player2) drawScore() drawPowerUp() moveBall() movePowerUp() checkCollision() checkPowerUpCollision() checkWin() } function drawBall() { ctx.beginPath() ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2) ctx.fillStyle = 'white' ctx.fill() } function drawPlayer(player) { ctx.fillStyle = 'white' ctx.fillRect(player.x, player.y, player.width, player.height) } function drawScore() { ctx.font = '30px Arial' ctx.fillText(player1.score, canvas.width / 4, 50) ctx.fillText(player2.score, canvas.width / 4 * 3, 50) } function drawPowerUp() { if (powerUp.active) { ctx.beginPath() ctx.arc(powerUp.x, powerUp.y, powerUp.size, 0, Math.PI * 2) ctx.fillStyle = 'red' ctx.fill() } } function moveBall() { ball.x += ball.dx ball.y += ball.dy if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) { ball.dy *= -1 } if (ball.x + ball.size > canvas.width) { player1.score++ resetBall() } else if (ball.x - ball.size < 0) { player2.score++ resetBall() } } function movePowerUp() { if (powerUp.active) { powerUp.x += powerUp.dx powerUp.y += powerUp.dy if (powerUp.x + powerUp.size > canvas.width || powerUp.x - powerUp.size < 0) { powerUp.dx *= -1 } if (powerUp.y + powerUp.size > canvas.height || powerUp.y - powerUp.size < 0) { powerUp.dy *= -1 } } else { const random = Math.floor(Math.random() * 500) if (random === 0) { powerUp.active = true powerUp.x = Math.floor(Math.random() * (canvas.width - powerUp.size * 2)) + powerUp.size powerUp.y = Math.floor(Math.random() * (canvas.height - powerUp.size * 2)) + powerUp.size powerUp.dx = Math.floor(Math.random() * 5) + 2 powerUp.dy = Math.floor(Math.random() * 5) + 2 } } } function checkCollision() { if (ball.x - ball.size < player2.x + player2.width && ball.y + ball.size > player2.y && ball.y - ball.size < player2.y + player2.height) { ball.dx *= -1 if (powerUp.active) { player2.height -= 20 powerUp.active = false } } else if (ball.x + ball.size > player1.x && ball.y + ball.size > player1.y && ball.y - ball.size < player1.y + player1.height) { ball.dx *= -1 if (powerUp.active) { player1.height -= 20 powerUp.active = false } } } function checkPowerUpCollision() { if (powerUp.active && ball.x - ball.size < powerUp.x + powerUp.size && ball.x + ball.size > powerUp.x - powerUp.size && ball.y - ball.size < powerUp.y + powerUp.size && ball.y + ball.size > powerUp.y - powerUp.size) { powerUp.active = false const random = Math.floor(Math.random() * 2) if (random === 0) { player1.height += 20 } else { player2.height += 20 } } } function checkWin() { if (player1.score === 5) { alert('Player 1 wins!') document.location.reload() } else if (player2.score === 5) { alert('Player 2 wins!') document.location.reload() } } function resetBall() { ball.x = canvas.width / 2 ball.y = canvas.height / 2 ball.dx *= -1 ball.dy *= -1 } setInterval(draw, 16.67)

GPTgame

Sign up for free tokens!

Pong with power ups

GPTgame