I will try to document and discuss every small detail of the implementation so that a reader will not have any difficulty in writing his/her own chess playing program after reading this. At the same time, I don’t want to go into the details of the game itself.
At the end of this exercise, we hope to have at least:
- A chess UI with which the user can interact with
- A chess AI against with the user can play
Note: I don’t have a completed source code for this article series (even though I have previous experience in chess programming). I am writing the code as I go. What this means is that I will make a lot of mistakes in the code and as well as in the decisions I make on how to go about structuring the whole application. If you find something wrong, let me know in the comments.
Okay now, lets dive in.
Displaying the board
First, let us draw a chess board on the screen. At the start of the game, a chess board consists of 64 squares and 32 chess pieces arranged in a predefined manner. We are going to do two things here:
- Find a way to represent the board and the chess pieces in our program.
- Write a function to display the current board on the screen.
Here is our initial take on the HTML file:
We need a way to represent the chess board and the chess pieces. We will represent the board as a two-dimensional array. This way we can refer to a piece in any row/column (also called rank/file). We have to think about this design decision for some time because there may be performance implications for this decision. For performance reasons, we may later decide to use bit-boards to represent the board and the pieces, so we should take to write code in such a way that it will be easy to switch between the array representation and bit-board representation.
So let us start by defining the different pieces in chess. We are just enumerating the possible pieces here:
The pieces are given values based on their relative importance. The Pawn is given a value of 10 and then each other piece is given a value based on how valuable the piece is compared to a Pawn. Think – how many Pawns do we need to make up for a Queen?
You can see more discussion about it here. Normally the value of a Pawn is considered as 1 and the relative values of other pieces are calculated based on that. Here we are using a base value of 10 for Pawn, Just so that the relative values of the Bishop and the Knight can be different at the same time whole numbers. More about this later.
The value of the King is not important because there is no move in chess where you consider sacrificing your King. So you can use any value of the King. We are using 100 here. You can as well use 1.
As you can see, the values given for the black pieces are just the negative values of the values given for the same pieces in white. This is because later in the game when we evaluate board positions, we can just add up all the numbers and see who has an advantage.
Now we have the pieces and what we need is a board to place the pieces:
As we already discussed, the board is an 8×8 array. The values represent pieces. A zero value in a cell means that the square in the board is empty. As you can see, the whole board is empty at this point. Let us add the pieces to the board so that it resembles the starting position of a standard chess game:
I hope it is not difficult to guess what happened here. We are just placing the pieces we already defined on the chess board according to the rules of the game.
Now that looks awesome doesn’t it?
No. It does not.
We need to show this board in a better way so that people will be able to see the pieces rather than cryptic notations on the screen.
So we define a drawBoard() function which will draw the board to the screen.
Here I am constructing an HTML string that will paint the board and then append that HTML string to the board div that we have in our index.html file.
In the first loop (row loop) we are creating a row and in the inner loop (column loop) we are inserting 8 columns to the row.
To understand the code inside the inner loop better, let us see an example output of a single iteration of the inner loop:
In this example, the outer div has two classes associated with it. One is column, which is generic and it just means that this is a column. The second one is dark which denotes that this is a dark square. As you already know, a chess board contains two different types of squares, dark and light. We use this class to give a dark background color to this square. Similarly, lighter cells will have a light class and will be styled accordingly. To alternate between the dark and light squares, we use the test
(i + j) % 2 === 0 and it is easy to understand why if you work it out using pen and paper.
The inner div also has a class. This time the class says WHITE_KNIGHT. This denotes the piece which is present in that square in the board. We use this class to show the corresponding piece on the screen:
Similarly we style all the classes so that the icons for the pieces will be loaded whenever the class for corresponding piece is present.
Okay so how did we get this class value as WHITE_KNIGHT ? It is done by this piece of code:
What does it do? It gets the value of the piece at the board position [i,j] and then passes this value to a function called getPieceName(). What does getPieceName() do? Well it just returns the name of the piece in string format:
Pretty straight forward. Ain’t it?
Now that we have all the classes ready, we need to style these so that all the icons come up on the board. Let us take a look at the complete style.css file:
Even though the style.css file is ready, we don’t have images/icons of the pieces ready yet. So our next task is to get hold of a few images of the chess pieces. You can probably take it from Wikipedia page for chess pieces:
Save these as separate image files. Name them as given in the css file.
We are almost done with Part 1 of this tutorial !!!
The last piece of the puzzle is to call the drawBoard() function on the page load. This is done using the jQuery ready function:
So we are ready to see the output of our great program. Go to your favorite web browser (Google Chrome) and then open the index.html file. You will see the following beautiful chess board:
Congratulations. You have completed the first part of this series. It may not seem like much, but in a few small steps like these, you will be ready to write your own little chess program!
Next – Part 2: The 0×88 board representation
Let me know if you are following this so that I can gauge the interest in these type of articles.