JavaScript Chess Simulator: Part 2 | 2

JavaScript Chess Simulator: Chapter 2

Making a Move

In the last chapter, we created a Chess board, which provided not only the playing board, but also some grid lines to assist us when working with the notation of the Move List. Each move boils down to a from and a to location on this 'grid.' As each square on the grid is a transparent image with an attribute - name - representing the coordinates of the square, we can write a simple algorithm to handle a move:

Get image at current location
Set image at new location equal to the image at the current location
Set the image at the current location equal to the 'spacer' image

From this, we can create a short Javascript function to handle the basic movement of a piece on our Chess board. The function will take two parameters, each a location on the board, the first indicating the start position of the piece and the second indicating its end position. We will convert this into a reference to the images on the board and then swap the images over, which can be seen in this demonstration, and can be coded as follows:

function makeMove(moveFrom,moveTo)
{
    var obj_fromPos; // From object
    var obj_toPos; // To object
 
    // create the objects
    obj_fromPos=eval("document." + moveFrom);
    obj_toPos=eval("document." + moveTo);
 
    // make the move by changing the images
    obj_toPos.src=obj_fromPos.src;
    obj_fromPos.src=url_graphicbin + "spacer.gif";
}

To allow us to get each move in turn during a game, we will require the current move number of each color, which we can then turn into a pointer - or index - to the move arrays we created earlier. We shall use two variables to store the current move number for each color - int_cmw and int_cmb. Later on, we'll look at populating the information box with the value of these variables once a move has been made.

Special Moves

This basic function works for both the normal movement of a piece and the capture of one piece by another. However, it won't work as easily for some of the special moves such as Castling, Pawn Promotion and en Passant that could occur during a game.

Let's take a look at each of these in turn, firstly Castling, which is scored as 0-0 for Kingside or 0-0-0 for Queenside. Castling is simply a set of two moves made as a single move. Thus, we can simply call the function twice passing in the two sets of coordinates to represent the move; all we need to know is which color is making the move and which type of Castling it is. To help us identify which color is the color whose move it is, we'll use a global variable called bol_white2move. Then, we'll use this in conjunction with the move itself to provide the correct parameters to the makeMove function. The resulting Pseudo Code is:

if bol_white2move is true then
    if move is 0-0-0 (Queenside) then
        makeMove('e1','c1')
        makeMove('a1','d1')
    else (Kingside)
        makeMove('e1','g1')
        makeMove('h1','f1')
    end if
else (Black's move)
    if move is 0-0-0 (Queenside) then
        makeMove('e8','c8')
        makeMove('a8','d8')
    else (Kingside)
        makeMove('e8','g8')
        makeMove('h8','f8')
    end if
end if

We can convert this into a Javascript function shown in this Listing, which results in this demonstration.

The next 'special' move is Pawn Promotion. This takes place when a pawn of either color reaches the opposite end of the board; it is then 'promoted' to any other piece except a King. For our purposes, we will provide the move - in its two components - and a parameter to identify the Piece that the pawn is being promoted to, so our Pseudo Code would look something like this:

Get piece pawn is promoted to
If bol_white2move is true, then the pawn is white,
Else the pawn is black
Create an image object for that piece
Make the move as normal
Swap the pawn at its new position for the new piece

From this, we can create our function which will use a Javascript Case statement to create the promoted piece and then we call the makeMove function as normal to move the pawn from the seventh to the eighth rank. Next, we'll perform a simple image swap to swap the image of the Pawn on the eighth rank for the correct piece. The reason for providing both the current and the final position of the Pawn is because the Pawn may have either moved forward one square (e.g. a7-a8(Q)) or captured a piece on an adjacent square (e.g. a7xb8(Q)), so we need to make the move as normal and then swap the image afterwards. The code for this function can be found in the Listings and a demonstration is also available.

That leaves us with just one special move 'en Passant'; a good description of which can be found on the ChessClub.com website. Following our approach to the previous 'special moves', we can handle en Passant using the following Pseudo Code:

Make the move as a normal take (e.g. a5xb6)
Swap the image of the captured pawn for our spacer image

This results in a function that could look like this Listing, the results of which can be seen in this demonstration.

Tying the move handlers together

We have now created functions to handle the following types of movement within the universe of our Chess application:

  • Standard movement or capture
  • Castling
  • Pawn Promotion
  • en Passant
Each of the latter three functions use the first to actually make the moves themselves, so how do we tie them all together and ensure that we use the correct function for each move? We'll create a parent function that will take the current move, process it and then call the appropriate move event for that move. The Pseudo Code for this 'controller' function could look something like this:

Get the current move from the Move List
Seperate out the components of the move
If the move is Castling then call the Castling function
Else if the move is a Pawn Promotion then call the Promotion function
Else if the move is en Passant then call the en Passant function
Else call the standard move function
Update the correct Move counter

Translating this into Javascript, we end up with a function similar to this listing; which can be seen in this demonstration.

Created: March 27, 2003
Revised: June 10, 2003

URL: URL: http://webreference.com/programming/javascript/javachess/chap2