<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Pong Game</title><style>canvas{border:1pxsolidblack;display:block;margin:0auto;}</style></head><body><canvasid="pongCanvas"width="800"height="400"></canvas><script>constcanvas=document.getElementById('pongCanvas');constctx=canvas.getContext('2d');constpaddleWidth=10;constpaddleHeight=80;constballRadius=8;constpaddleSpeed=5;letpaddle1Y=canvas.height/2-paddleHeight/2;letpaddle2Y=canvas.height/2-paddleHeight/2;letballX=canvas.width/2;letballY=canvas.height/2;letballSpeedX=5;letballSpeedY=5;functiondraw(){// Clear canvasctx.clearRect(0,0,canvas.width,canvas.height);// Draw paddlesctx.fillStyle='white';ctx.fillRect(0,paddle1Y,paddleWidth,paddleHeight);ctx.fillRect(canvas.width-paddleWidth,paddle2Y,paddleWidth,paddleHeight);// Draw ballctx.beginPath();ctx.arc(ballX,ballY,ballRadius,0,Math.PI*2);ctx.fillStyle='white';ctx.fill();ctx.closePath();}functionupdate(){// Move paddlesif(paddle1Y>=0&&paddle1Y<=canvas.height-paddleHeight){if(upPressed){paddle1Y-=paddleSpeed;}if(downPressed){paddle1Y+=paddleSpeed;}}if(paddle2Y>=0&&paddle2Y<=canvas.height-paddleHeight){if(wPressed){paddle2Y-=paddleSpeed;}if(sPressed){paddle2Y+=paddleSpeed;}}// Move ballballX+=ballSpeedX;ballY+=ballSpeedY;// Ball collision with top and bottom wallsif(ballY+ballRadius>=canvas.height||ballY-ballRadius<=0){ballSpeedY=-ballSpeedY;}// Ball collision with paddlesif((ballX-ballRadius<=paddleWidth&&ballY>=paddle1Y&&ballY<=paddle1Y+paddleHeight)||(ballX+ballRadius>=canvas.width-paddleWidth&&ballY>=paddle2Y&&ballY<=paddle2Y+paddleHeight)){ballSpeedX=-ballSpeedX;}// Ball out of boundsif(ballX+ballRadius>=canvas.width||ballX-ballRadius<=0){// Reset ball positionballX=canvas.width/2;ballY=canvas.height/2;ballSpeedX=-ballSpeedX;ballSpeedY=5;// Change this to adjust initial ball speed}}letupPressed=false;letdownPressed=false;letwPressed=false;letsPressed=false;functionkeyDownHandler(event){if(event.key==='ArrowUp'){upPressed=true;}elseif(event.key==='ArrowDown'){downPressed=true;}elseif(event.key==='w'){wPressed=true;}elseif(event.key==='s'){sPressed=true;}}functionkeyUpHandler(event){if(event.key==='ArrowUp'){upPressed=false;}elseif(event.key==='ArrowDown'){downPressed=false;}elseif(event.key==='w'){wPressed=false;}elseif(event.key==='s'){sPressed=false;}}document.addEventListener('keydown',keyDownHandler,false);document.addEventListener('keyup',keyUpHandler,false);functiongameLoop(){update();draw();requestAnimationFrame(gameLoop);}gameLoop();</script></body></html>
