Arkanoid

TypeScriptCanvasCollision handlingPaddle controls

Control the paddle, keep the ball in play, and clear the brick field with precise bounces. The game uses a 60 FPS canvas loop, clamped delta-time, and paddle hit positions to keep movement stable while still making edge shots feel sharper.

Built in TypeScript. Explore more projects on Projects

How it works

A canvas Arkanoid implementation focused on smooth paddle movement, stable ball physics, brick collisions, and bounce angles based on paddle hit position.

Implementation notes

The game runs at 60 FPS and clamps delta-time so ball and paddle movement stay stable after slow frames.

Paddle, ball, and brick state live in refs, keeping animation updates out of the React render path.

The ball bounces off vertical walls, the top wall, the paddle, and visible bricks; falling below the paddle restarts the round.

Paddle impact position maps to a bounce angle with a 75-degree maximum, giving edge hits sharper returns.

Controls

MoveArrowLeft / ArrowRightA / D
TouchLeft / right buttons