const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const paddleWidth = 10; const paddleHeight = 60; const paddleSpeed = 5; const ballRadius = 5; const ballSpeed = 2; let playerScore = 0; let cpuScore = 0; let playerPaddleY = canvas.height / 2 - paddleHeight / 2; let cpuPaddleY = canvas.height / 2 - paddleHeight / 2; let balls = []; for (let i = 0; i < 10; i++) { balls.push({ x: canvas.width / 2, y: canvas.height / 2, dx: (Math.random() > 0.5 ? 1 : -1) * ballSpeed, dy: (Math.random() > 0.5 ? 1 : -1) * ballSpeed }); } document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); function handleKeyDown(event) { if (event.key === 'ArrowUp') { playerPaddleY -= paddleSpeed; } else if (event.key === 'ArrowDown') { playerPaddleY += paddleSpeed; } } function handleKeyUp(event) { if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { playerPaddleY = playerPaddleY; } } function update() { for (let i = 0; i < balls.length; i++) { let ball = balls[i]; ball.x += ball.dx; ball.y += ball.dy; if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) { ball.dy *= -1; } if (ball.x + ballRadius > canvas.width) { playerScore++; resetBall(ball); } else if (ball.x - ballRadius < 0) { cpuScore++; resetBall(ball); } if ( ball.x + ballRadius > canvas.width - paddleWidth && ball.y + ballRadius > cpuPaddleY && ball.y - ballRadius < cpuPaddleY + paddleHeight ) { ball.dx *= -1; } if ( ball.x - ballRadius < paddleWidth && ball.y + ballRadius > playerPaddleY && ball.y - ballRadius < playerPaddleY + paddleHeight ) { ball.dx *= -1; } } if (playerPaddleY < 0) { playerPaddleY = 0; } else if (playerPaddleY + paddleHeight > canvas.height) { playerPaddleY = canvas.height - paddleHeight; } if (cpuPaddleY < 0) { cpuPaddleY = 0; } else if (cpuPaddleY + paddleHeight > canvas.height) { cpuPaddleY = canvas.height - paddleHeight; } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000'; ctx.fillRect(0, playerPaddleY, paddleWidth, paddleHeight); ctx.fillStyle = '#000'; ctx.fillRect(canvas.width - paddleWidth, cpuPaddleY, paddleWidth, paddleHeight); ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText(`Player: ${playerScore}`, 10, 20); ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText(`CPU: ${cpuScore}`, canvas.width - 80, 20); for (let i = 0; i < balls.length; i++) { let ball = balls[i]; ctx.beginPath(); ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = '#000'; ctx.fill(); ctx.closePath(); } } function resetBall(ball) { ball.x = canvas.width / 2; ball.y = canvas.height / 2; ball.dx = (Math.random() > 0.5 ? 1 : -1) * ballSpeed; ball.dy = (Math.random() > 0.5 ? 1 : -1) * ballSpeed; } function gameLoop() { update(); draw(); requestAnimationFrame

GPTgame

Sign up for free tokens!

pong with cpu and 10 balls

GPTgame