const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let ballX = 200; let ballY = 200; let ballSpeedX = 5; let ballSpeedY = 7; let ball2X = 100; let ball2Y = 100; let ball2SpeedX = 3; let ball2SpeedY = 5; let ball3X = 300; let ball3Y = 300; let ball3SpeedX = 2; let ball3SpeedY = 4; const paddleWidth = 100; const paddleHeight = 10; let paddleX = 150; function draw() { // clear canvas ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw ball 1 ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(ballX, ballY, 10, 0, Math.PI * 2); ctx.fill(); // draw ball 2 ctx.fillStyle = 'red'; ctx.beginPath(); ctx.arc(ball2X, ball2Y, 10, 0, Math.PI * 2); ctx.fill(); // draw ball 3 ctx.fillStyle = 'green'; ctx.beginPath(); ctx.arc(ball3X, ball3Y, 10, 0, Math.PI * 2); ctx.fill(); // draw paddle ctx.fillStyle = 'white'; ctx.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); // move ball 1 ballX += ballSpeedX; ballY += ballSpeedY; if (ballX < 10 || ballX > canvas.width - 10) { ballSpeedX = -ballSpeedX; } if (ballY < 10 || ballY > canvas.height - 10) { ballSpeedY = -ballSpeedY; } // move ball 2 ball2X += ball2SpeedX; ball2Y += ball2SpeedY; if (ball2X < 10 || ball2X > canvas.width - 10) { ball2SpeedX = -ball2SpeedX; } if (ball2Y < 10 || ball2Y > canvas.height - 10) { ball2SpeedY = -ball2SpeedY; } // move ball 3 ball3X += ball3SpeedX; ball3Y += ball3SpeedY; if (ball3X < 10 || ball3X > canvas.width - 10) { ball3SpeedX = -ball3SpeedX; } if (ball3Y < 10 || ball3Y > canvas.height - 10) { ball3SpeedY = -ball3SpeedY; } // move paddle if (rightPressed && paddleX < canvas.width - paddleWidth) { paddleX += 7; } else if (leftPressed && paddleX > 0) { paddleX -= 7; } // check collision with paddle if (ballY > canvas.height - paddleHeight - 10 && ballX > paddleX && ballX < paddleX + paddleWidth) { ballSpeedY = -ballSpeedY; } if (ball2Y > canvas.height - paddleHeight - 10 && ball2X > paddleX && ball2X < paddleX + paddleWidth) { ball2SpeedY = -ball2SpeedY; } if (ball3Y > canvas.height - paddleHeight - 10 && ball3X > paddleX && ball3X < paddleX + paddleWidth) { ball3SpeedY = -ball3SpeedY; } } let rightPressed = false; let leftPressed = false; document.addEventListener('keydown', (event) => { if (event.key === 'ArrowRight') { rightPressed = true; } else if (event.key === 'ArrowLeft') { leftPressed = true; } }); document.addEventListener('keyup', (event) => { if (event.key === 'ArrowRight') { rightPressed = false; } else if (event.key === 'ArrowLeft') { leftPressed = false; } }); setInterval(draw, 16

GPTgame

Sign up for free tokens!

Pong với 3 quả bóng

GPTgame