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