html head meta charset UTF 8 title Pong Game title style gameboard width 600px height 400px border 1px solid black position relative paddle1 width 10px height 60px background color black position absolute top 170px left 10px paddle2 width 10px height 60px background color black position absolute top 170px right 10px ball width 20px height 20px background color black position absolute top 190px left 290px style head body div id gameboard div id paddle1 div div id paddle2 div div id ball div div script Constants const GAMEBOARD_WIDTH 600 const GAMEBOARD_HEIGHT 400 const PADDLE_WIDTH 10 const PADDLE_HEIGHT 60 const BALL_SIZE 20 const BALL_SPEED 3 Variables let paddle1Y 170 let paddle2Y 170 let ballX 290 let ballY 190 let ballSpeedX BALL_SPEED let ballSpeedY BALL_SPEED Functions function update Update ball position ballX ballSpeedX ballY ballSpeedY Check for collision with walls if ballY 0 ballY GAMEBOARD_HEIGHT BALL_SIZE ballSpeedY ballSpeedY Check for collision with paddles if ballX PADDLE_WIDTH ballY BALL_SIZE paddle1Y ballY paddle1Y PADDLE_HEIGHT ballSpeedX BALL_SPEED if ballX BALL_SIZE GAMEBOARD_WIDTH PADDLE_WIDTH ballY BALL_SIZE paddle2Y ballY paddle2Y PADDLE_HEIGHT ballSpeedX BALL_SPEED Check for scoring if ballX 0 ballX BALL_SIZE GAMEBOARD_WIDTH ballX 290 ballY 190 ballSpeedX ballSpeedX function render Update paddle positions document getElementById paddle1 style top paddle1Y px document getElementById paddle2 style top paddle2Y px Update ball position document getElementById ball style left ballX px document getElementById ball style top ballY px function loop update render requestAnimationFrame loop Event listeners document addEventListener keydown function event if event code KeyW paddle1Y 0 paddle1Y 10 if event code KeyS paddle1Y PADDLE_HEIGHT GAMEBOARD_HEIGHT paddle1Y 10 if event code ArrowUp paddle2Y 0 paddle2Y 10 if event code ArrowDown paddle2Y PADDLE_HEIGHT GAMEBOARD_HEIGHT paddle2Y 10 Start the game loop requestAnimationFrame loop script body html
or collision with paddles if ballX PADDLE_WIDTH ballY BALL_SIZE paddle1Y ballY paddle1Y PADDLE_HEIGHT ballSpeedX BALL_SPEED if ballX BALL_SIZE GAMEBOARD_WIDTH PADDLE_WIDTH ballY BALL_SIZE paddle2Y ballY paddle2Y PADDLE_HEIGHT ballSpeedX BALL_SPEED Check for scoring if ballX 0 ballX BALL_SIZE GAMEBOARD_WIDTH ballX 290 ballY 190 ballSpeedX ballSpeedX function render Update paddle positions document getElementById paddle1 style top paddle1Y px document getElementById paddle2 style top paddle2Y px Update ball position document getElementById ball style left ballX px document getElementById ball style top ballY px function loop update render requestAnimationFrame loop Event listeners document addEventListener keydown function event if event code KeyW paddle1Y 0 paddle1Y 10 if event code KeyS paddle1Y PADDLE_HEIGHT GAMEBOARD_HEIGHT paddle1Y 10 if event code ArrowUp paddle2Y 0 paddle2Y 10 if event code ArrowDown paddle2Y PADDLE_HEIGHT GAMEBOARD_HEIGHT paddle2Y 10 Start the game loop requestAnimationFrame loop script body html