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.
Now you try. Add two more moves to the game: White moves their bishop from f1 to c4 (the Italian Game), and Black responds with f8 to c5!
Type your code here:
See your results here:
The code has ???? for the 4th move. Replace ???? with "g1-f3", then click Run to watch the moves animate across the board!
1. Notice how White's pawn advances from e2 to e4.
2. Notice how Black responds with e7-e5, followed by the knight moves.
3. Click Step Backward (◀) or ⏮ to replay the sequence step by step!
Share your code
Show a friend, family member, or teacher what you've done!