const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let ballX = 150, ballY = 150, ballSpeedX = 2, ballSpeedY = 2; let paddleWidth = 10, paddleHeight = 50; let leftPaddleY = 125, rightPaddleY = 125, topPaddleX = 125, bottomPaddleX = 125; let upPressed = false, downPressed = false, leftPressed = false, rightPressed = false; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'black'; ctx.fillRect(0, leftPaddleY, paddleWidth, paddleHeight); ctx.fillRect(canvas.width - paddleWidth, rightPaddleY, paddleWidth, paddleHeight); ctx.fillRect(topPaddleX, 0, paddleHeight, paddleWidth); ctx.fillRect(bottomPaddleX, canvas.height - paddleWidth, paddleHeight, paddleWidth); ctx.beginPath(); ctx.arc(ballX, ballY, 5, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); } function update() { ballX += ballSpeedX; ballY += ballSpeedY; if (ballY < 0 || ballY > canvas.height) ballSpeedY = -ballSpeedY; if (ballX < 0 || ballX > canvas.width) ballSpeedX = -ballSpeedX; if (ballX < paddleWidth && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight) ballSpeedX = -ballSpeedX; if (ballX > canvas.width - paddleWidth && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) ballSpeedX = -ballSpeedX; if (ballY < paddleWidth && ballX > topPaddleX && ballX < topPaddleX + paddleHeight) ballSpeedY = -ballSpeedY; if (ballY > canvas.height - paddleWidth && ballX > bottomPaddleX && ballX < bottomPaddleX + paddleHeight) ballSpeedY = -ballSpeedY; if (upPressed && leftPaddleY > 0) leftPaddleY -= 2; if (downPressed && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += 2; if (upPressed && rightPaddleY > 0) rightPaddleY -= 2; if (downPressed && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += 2; if (leftPressed && topPaddleX > 0) topPaddleX -= 2; if (rightPressed && topPaddleX < canvas.width - paddleHeight) topPaddleX += 2; if (leftPressed && bottomPaddleX > 0) bottomPaddleX -= 2; if (rightPressed && bottomPaddleX < canvas.width - paddleHeight) bottomPaddleX += 2; } function gameLoop() { draw(); update(); requestAnimationFrame(gameLoop); } document.addEventListener('keydown', function(e) { if (e.key === 'ArrowUp') upPressed = true; if (e.key === 'ArrowDown') downPressed = true; if (e.key === 'ArrowLeft') leftPressed = true; if (e.key === 'ArrowRight') rightPressed = true; }); document.addEventListener('keyup', function(e) { if (e.key === 'ArrowUp') upPressed = false; if (e.key === 'ArrowDown') downPressed = false; if (e.key === 'ArrowLeft') leftPressed = false; if (e.key === 'ArrowRight') rightPressed = false; }); game

GPTgame

Sign up for free tokens!

pong but there is four paddles on each corner of the screen

GPTgame