This is a documentation for Board Game Arena: play board games online !
Template:Chessboard
Basic {{chessboard}} template
To insert this chessboard template into a BGA wiki page, simply type {{chessboard}}
when editing the page, or alternatively copy one of the examples below.
Note: Game Help pages (e.g. 'GameHelpChess') also display on BGA's Rules Summary pages e.g. https://boardgamearena.com/gamepanel?game=chess under HOW TO PLAY? > See More > RULES SUMMARY
Empty board template
{{chessboard | a8= | b8= | c8= | d8= | e8= | f8= | g8= | h8= | a7= | b7= | c7= | d7= | e7= | f7= | g7= | h7= | a6= | b6= | c6= | d6= | e6= | f6= | g6= | h6= | a5= | b5= | c5= | d5= | e5= | f5= | g5= | h5= | a4= | b4= | c4= | d4= | e4= | f4= | g4= | h4= | a3= | b3= | c3= | d3= | e3= | f3= | g3= | h3= | a2= | b2= | c2= | d2= | e2= | f2= | g2= | h2= | a1= | b1= | c1= | d1= | e1= | f1= | g1= | h1= }}
Available parameters
Examples
Chess
{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc | a8={{blackRook}} | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}} | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}} | a7={{blackPawn}} | b7={{blackPawn}} | c7={{blackPawn}} | d7={{blackPawn}} | e7={{blackPawn}} | f7={{blackPawn}} | g7={{blackPawn}} | h7={{blackPawn}} | a6= | b6= | c6= | d6= | e6= | f6= | g6= | h6= | a5= | b5= | c5= | d5= | e5= | f5= | g5= | h5= | a4= | b4= | c4= | d4= | e4= | f4= | g4= | h4= | a3= | b3= | c3= | d3= | e3= | f3= | g3= | h3= | a2={{whitePawn}} | b2={{whitePawn}} | c2={{whitePawn}} | d2={{whitePawn}} | e2={{whitePawn}} | f2={{whitePawn}} | g2={{whitePawn}} | h2={{whitePawn}} | a1={{whiteRook}} | b1={{whiteKnight}}| c1={{whiteBishop}}| d1={{whiteQueen}} | e1={{whiteKing}} | f1={{whiteBishop}}| g1={{whiteKnight}}| h1={{whiteRook}} }}
Draughts / Checkers
<div style="display:flex; flex-flow:row wrap; gap:0.5rem;"> {{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5 | d8={{whiteDraughtsKing}} | highlightd8=gold | highlightc7=blue | highlighte7=blue | b4={{whiteDraughtsMan}} | f4={{whiteDraughtsMan}} | c3={{whiteDraughtsMan}} | b6={{blackDraughtsMan}} | d6={{blackDraughtsMan}} | e1={{blackDraughtsKing}} }} {{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5 | e7={{whiteDraughtsKing}} | highlighte7=gold | highlightd6=red | highlightc5=blue | highlightb6=red | highlighta7=blue | b4={{whiteDraughtsMan}} | f4={{whiteDraughtsMan}} | c3={{whiteDraughtsMan}} | b6={{blackDraughtsMan}} | d6={{blackDraughtsMan}} | f2={{blackDraughtsKing}} }} {{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5 | a7={{whiteDraughtsKing}} | highlighte7=gold | highlightd6=red | highlightc5=blue | highlightb6=red | highlighta7=blue | b4={{whiteDraughtsMan}} | f4={{whiteDraughtsMan}} | c3={{whiteDraughtsMan}} | f2={{blackDraughtsKing}} }} </div>
Othello / Reversi
<div style="display:flex; flex-flow:row wrap; gap:0.25rem;"> {{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black | highlightc5=rgba(255,255,255,0.25) | highlightd6=rgba(255,255,255,0.25) | highlighte3=rgba(255,255,255,0.25) | highlightf4=rgba(255,255,255,0.25) | d4={{blackReversiToken}} | e5={{blackReversiToken}} | e4={{whiteReversiToken}} | d5={{whiteReversiToken}} }} {{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black | d4={{blackReversiToken}} | e5={{blackReversiToken}} | e4={{blackReversiToken}} | f4={{blackReversiToken}} | d5={{whiteReversiToken}} }} {{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black | highlightc5=rgba(255,255,255,0.25) | highlightd6=rgba(255,255,255,0.25) | highlighte3=rgba(255,255,255,0.25) | highlightf2=rgba(255,255,255,0.25) | d4={{blackReversiToken}} | e5={{blackReversiToken}} | f4={{blackReversiToken}} | d5={{whiteReversiToken}} | e4={{whiteReversiToken}} | f3={{whiteReversiToken}} }} </div>
Lines of Action (LOA)
A piece may not jump over an enemy piece
White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
A piece may jump over friendly pieces
Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
<div style="display:flex; flex-flow:row wrap; gap:1rem;"> <div style="display:grid; grid:repeat(2,auto)/min-content;"> <div style="padding-left:1.5rem; padding-right:1.5rem;"> <b>A piece may not jump over an enemy piece</b> White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1). </div><div style="align-self:end;"> {{chessboard | lightSquareColour=#b85 | darkSquareColour=#831 | highlighta6=rgba(0,255,0,0.5) | highlightc4=rgba(0,255,0,0.5) | highlightd6=rgba(255,0,0,0.5) | a2={{whiteCylinder}} | a3={{whiteCylinder}} | a4={{whiteCylinder}} | a5={{whiteCylinder}} | c4={{whiteCylinder}} | a7={{whiteCylinder}} | h2={{whiteCylinder}} | h3={{whiteCylinder}} | h4={{whiteCylinder}} | h5={{whiteCylinder}} | h6={{whiteCylinder}} | h7={{whiteCylinder}} | b1={{redCylinder}} | c1={{redCylinder}} | d1={{redCylinder}} | e1={{redCylinder}} | f1={{redCylinder}} | g1={{redCylinder}} | b8={{redCylinder}} | c6={{redCylinder}} | d8={{redCylinder}} | e8={{redCylinder}} | f8={{redCylinder}} | g8={{redCylinder}} }} </div> </div> <div style="display:grid; grid:repeat(2,auto)/min-content;"> <div style="padding-left:1.5rem; padding-right:1.5rem;"> <b>A piece may jump over friendly pieces</b> Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8). </div><div style="align-self:end;"> {{chessboard | lightSquareColour=#b85 | darkSquareColour=#831 | highlighte8=rgba(0,255,0,0.5) | highlightb5=rgba(0,255,0,0.5) | a2={{whiteCylinder}} | a3={{whiteCylinder}} | a4={{whiteCylinder}} | a5={{whiteCylinder}} | c4={{whiteCylinder}} | a7={{whiteCylinder}} | h2={{whiteCylinder}} | h3={{whiteCylinder}} | h4={{whiteCylinder}} | h5={{whiteCylinder}} | h6={{whiteCylinder}} | h7={{whiteCylinder}} | b1={{redCylinder}} | c1={{redCylinder}} | d1={{redCylinder}} | e1={{redCylinder}} | f1={{redCylinder}} | g1={{redCylinder}} | b8={{redCylinder}} | c6={{redCylinder}} | d8={{redCylinder}} | b5={{redCylinder}} | f8={{redCylinder}} | g8={{redCylinder}} }} </div> </div> <div style="display:grid; grid:repeat(2,auto)/min-content;"> <div style="padding-left:1.5rem; padding-right:1.5rem;"> <b>A piece may capture an enemy piece</b> For example, White may play h3-f1, capturing the red piece on f1. </div><div style="align-self:end;"> {{chessboard | lightSquareColour=#b85 | darkSquareColour=#831 | highlighth3=rgba(0,255,0,0.5) | highlightf1=rgba(0,255,0,0.5) | a2={{whiteCylinder}} | a3={{whiteCylinder}} | a4={{whiteCylinder}} | a5={{whiteCylinder}} | c4={{whiteCylinder}} | a7={{whiteCylinder}} | h2={{whiteCylinder}} | f1={{whiteCylinder}} | h4={{whiteCylinder}} | h5={{whiteCylinder}} | h6={{whiteCylinder}} | h7={{whiteCylinder}} | b1={{redCylinder}} | c1={{redCylinder}} | d1={{redCylinder}} | e1={{redCylinder}} | g1={{redCylinder}} | b8={{redCylinder}} | c6={{redCylinder}} | d8={{redCylinder}} | b5={{redCylinder}} | f8={{redCylinder}} | g8={{redCylinder}} }} </div> </div> </div>