Left Paddle
Additional Settings
Speed Multipler: 1
Color Guide:
White: Player Controlled
Yellow: Centering Mode
Green: Direct Follow
Right Paddle
Learning React 
This little pong game was created because I wanted to learn more about react and typescript. And creating a game is my favorite way ;) If your intrested keep reading or just go back up and enjoy.
Implementing the math
My first step was building the physics system by creating a custom Vector2 and Collider for basic math operations. I visualized these using styled divs, without worrying about how the game was rendered—just mapping Vectors 1–100 to the screen size. This approach made implementation much easier, as rendering size could be completely ignored when developing the AI systems.
1 <div2 className={`${PongStyle.paddle} ${PongStyle.leftPaddle}`}3 style={{4 insetBlockStart: `${leftPaddle.current.collider.GetTop()}vh`,5 backgroundColor: `${leftAi.current.GetModeColor()}`,6 }}7 />
Drawing Lines
To make debugging easier, I added a feature that draws visual debug lines to display Vector2 positions. This greatly simplified troubleshooting throughout the project. You can still enable these lines under Additional Settings. They’re rendered using standard HTML <svg> elements.
1 export function drawLine(start: Vector2, end: Vector2, color: string = 'white', width: number = 4)2 {3 return (4 <svg className=LineStyle.lineSVG width='100%' height='100%' preserveAspectRatio='none'>5 <line6 x1={start.x} y1={start.y} x2={end.x} y2={end.y} stroke={color} stroke-width={width} />7 </svg>8 )
Implementing some AI
To keep the AI simple, I created a basic paddle class and a small state pattern. I considered making a more advanced AI but decided to keep it lightweight for a quick weekend project. The system is still flexible enough to add new states or AIs with different behaviors later on. After that, I ran into a common problem—the AI was simply too good. To fix this, I added a randomized skill level for each AI at the start of every round. Higher skill levels make the AI move more accurately and slightly faster (up to the player’s speed). This creates a nice balance, making some rounds more challenging while others feel fairer. This all being extremly lightweight meaning it can play at incredible speeds with no trouble as can be seen in this video