Chess has been called the royal game, and its geometry is rooted deeply in mathematical Cartesian coordinate systems.

The chessboard is an $8 \times 8$ grid of 64 alternating light and dark squares:

• Files (Columns): Labeled from left to right with letters: a, b, c, d, e, f, g, h (corresponding to $x = 1, 2, \dots, 8$).
• Ranks (Rows): Labeled from bottom to top with numbers: 1, 2, 3, 4, 5, 6, 7, 8 (corresponding to $y = 1, 2, \dots, 8$).

Every single square on the board is uniquely identified by combining its file and rank, such as e4 (file e, rank 4) or a1 (lower-left corner for White).

Moving Pieces with Code

With CodeByMath's interactive chessboard.js engine, you can command pieces across the board using simple commands:

• chess_board() creates and displays the interactive board in the viewport.
• chess_move("e2-e4") or chess_move("e2", "e4") picks up a piece and moves it to a target square!
• You can even use numeric coordinates: chess_move(5, 2, 5, 4) moves from $(5, 2)$ to $(5, 4)$, which is exactly e2-e4!

Move the mouse over a dotted box for more information.

• Interactive Playback: When you execute moves, the board automatically animates each step! Use the Play/Pause, Step Forward (▶), Step Backward (◀), and Jump (⏮ / ⏭) buttons to study each position.
• Flip View: Click Flip (🔄) to view the board from Black's perspective!
• Free Dragging: You can also click and drag pieces with your mouse anywhere on the board.