Chess

Last update: 02/26/2021 Sharon S. Z.

Chess is a competitive strategy game played between two players that evolved from an anciant game played 2000BC.

It is played on a square chessboard with 64 squares arranged in an eight-by-eight grid.

Each player start with sixteen pieces: one king, one queen, two rooks, two knights, two bishops, and eight pawns.

First player control the white pieces and second player control the black pieces.

The objective of the game is to checkmate the opponent's king.

Game Pieces

White King	♔	HTML Code &#9812
White Queen	♕	HTML Code &#9813
White Rook	♖	HTML Code &#9814
White Bishop	♗	HTML Code &#9815
White Knight	♘	HTML Code &#9816
White Pawn	♙	HTML Code &#9817
Black King	♚	HTML Code &#9818
Black Queen	♛	HTML Code &#9819
Black Rook	♜	HTML Code &#9820
Black Bishop	♝	HTML Code &#9821
Black Knight	♞	HTML Code &#9822
Black Pawn	♟	HTML Code &#9823

How to create a chess pieces with HTML codes?

Lets write html code to display the Black King ♚ for exampl

Now let's make the Black King bigger by setting our font size to 3em ♚

The game board

Chess game board is eight-by-eight grid of white and black.

Eight squares in a row, eight rows make the board where each odd row starts with a white square and each even row starts with a black square create offset of black and white.

How to create a chess game board with css?

We will add style to our html header and create two classes one for the with square and the other for the black square.

Now that we have all chess pieces let's create a table using whiteSquere class and blackSquere class to create a chess game board.

<table>
<tr>
<td> class="whiteSquere"</td>
<td> class="blackSquere"</td>
</tr>
</table>

Starting Position

Now that we have the chess pieces and the chess board we can arrange the chess pieces in their starting position on the board.

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

Piece moves

King Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1		1	2	3
5/1		4	♚	5
6/1		6	7	8
7/1
8/1

On our chessboard the king position is on the fifth row and the fourth column and his optional moves marked with yellow. The king is allow to move one step to each of the following options:

Lets write some java script code to create an array with all allowd moves, we know that there are 6 allowed moved.

kingRowPosition = 5;
kingColumnPosition = 4;
//we will loop on all possibile moves for the king.
for (row = kingRowPosition-1; row<= kingRowPosition+1; row++) {
for (col = kingColumnPosition-1; col <= kingColumnPosition+1; i++) {
if (row!=kingRowPosition && col!=kingColumnPosition) {
// if the row,col is not where king is at we will add this position to allowed array.
}
}
}

Queen Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1
5/1				♛
6/1
7/1
8/1

On our chessboard the queen position is on the fifth row and the fifth column and her optional moves marked with yellow.

The Queen is allow to move as many step as she likes each of the following options:

Knight Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1
5/1				♞
6/1
7/1
8/1

On our chessboard the knight position is on the fifth row and the fifth column and his optional moves marked with yellow.

Rook Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1
5/1
6/1
7/1			♜
8/1

On our chessboard the rook position is on the seventh row and the fourth column. The rook can move any number of squares along his row or column. His optional moves on board marked with yellow.

Lets write some java script code to create an array with all allowd moves, we know that there are 8 squers in a row and 8 squers in a column and on the one joined squere the rook is places so we should have 14 optional squeres allowed in our array.

rookRowPosition = 7;
rookColumnPosition = 4;
//we will loop on all possibile moves for the rook and save them in array.
for (row = 1; row<= 8; row++) {
if (row!=rookRowPosition) {
// add to allowed squeres (row,rookColumnPosition).
}
}
for (col = 1; col<= 8; col++) {
if (col!=rookColumnPosition) {
// add to aallowed squeres (rookRowPosition,col).
}
}

Bishop Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1
5/1
6/1				♝
7/1
8/1

On our chessboard the bishop position is on the sixth row and the fifth column. The bishop can move any number of squares diagonally,his optional moves marked with yellow.

Pawn Moves

1/1	1/2	1/3	1/4	1/5	1/6	1/7	1/8
2/1
3/1
4/1
5/1
6/1
7/1				♟
8/1

On our chessboard the pawn position is on the seventh row and the fifth column and his optional moves marked with yellow.
The pawn is allow to move only one step forwardas on the same column but on its first move it can move two squares forwardas on the same column.

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖

♜	♞	♝	♛	♚	♝	♞	♜
♟	♟	♟	♟	♟	♟	♟	♟




♙	♙	♙	♙	♙	♙	♙	♙
♖	♘	♗	♕	♔	♗	♘	♖