Javascript Chess Program

Javascript Chess Simulator

For this article, I'm reworking an existing Javascript Application - a Chess Program. As I recreate this application, I'll detail the inner workings and show Javascript functionality such as Array Handling and Regular Expressions, to be a reusable component in itself as well as some elements of good design practice.

I've defined some standards that I'll use in this application, the main ones are that variable names will have a three digit prefix to indicate the datatype, because although Javascript is 'almost' a typeless language, it can be important for functionality such as adding, subtracting etc. For function names, we'll use the functions role as its name and using capitals to separate out the individual elements, so displaySubTotal for example, is a function to display the subtotal to the user. Since this is a relatively simple application, I'm going to use a shorthand function header rather than a detailed one.

Let's start by looking at how we'll provide top level funtionality. A Chess program will need to be able to perform the following functions, which can be thought of as our User Requirements for this project :

• Display the Chess Board with pieces.
• Display Move List and player information, highlighting the current move.
• Display an information dialog, showing move number, comments etc.
• Move of any piece from A to B.
• Capture of any piece.
• Special Moves, such as Castling, en passant etc.
• The ability to step backwards through moves.
• The option to move to the position at a given move number.
• Use the Algebraic Notation format for the Move List.

Next, we'll look at the creation of the Chess board on which the game is played, and where the functionality will reside. The basic board can be built by using an eight by eight table in HTML by using the following Pseudo Code:

set str_squareColor = white
for each row 1 to 8
    for each column 1 to 8
        create a table cell with the background of str_squareColor
        if str_squareColor=white
            str_squareColor=black
        else
            str_squareColor=white
        end if
    next column
    if str_squareColor=white
        str_squareColor=black
    else
        str_squareColor=white
    end if
next row

This Pseudo Code can be translated into a Javascript function, a version of this is shown in Code Listing 1, and the output of which can be seen in this demonstration. While this provides the basic board, it may be helpful to show something that will allow users to easily find any square on the board, and which won't be obscured by the presence of a piece on that square. Our goal is to create something that looks like the board shown in this demonstration. To accomplish this, we've added an extra iteration to each loop, and added some evaluations to decide whether we are outputting a square on the board or a reference for the user. With these changes, our amended Psuedo Code looks like :

set str_squareColor = white
for each row 1 to 9
    if int_rows         for each column 1 to 9
            if column = 1 then
                add a cell and display in it the row number
            else
                create a table cell with the background of str_squareColor
                if str_squareColor=white
                    str_squareColor=black
                else
                    str_squareColor=white
                end if
            end if
        next column
        if str_squareColor=white
            str_squareColor=black
        else
            str_squareColor=white
        end if
    else
        add a blank cell followed by a cell for each letter A through H
    end if
next row

A sample listing for this type of board presentation can be found in Listing 2.

The next addition to our board is a game display box which we'll place at the foot of the board. Again, we'll use a simple HTML table for this. This display panel will show the players name, current move and move number for both players, space for a comment on the position or move and two buttons to allow us to step one move forwards or backwards from the current position. The Code Listing and working demonstration are available.

The final facet of the Chess board that we need to model is the inital placement of pieces on the board. For this we'll use simple Javascript and DHTML to replace the default image on each appropriate square with the image of the relevent piece. The Code Listing and demonstration of this shows how simple it is.

Thus, we now have the functions required to create and set up the chess board to its initial position. The composite Code Listings and Board Demonstration are also available for reference.

Now that the basic functionality is completed, the only other non-game related section is the Move List. This will display information to the user, and will be similar in layout, design and purpose to a standard Chess scoresheet, containing :

• White Players Name.
• Black Players Name.
• Complete Move List for both players.
• Move Number column for both sets of moves.
• Current move highlighted.

Let's start with the first two requirementswhich can be placed into a simple HTML table at the top of our Move List. The list of moves and move numbers can be displayed in a simple HTML table of four int_columns using the following Pseudo Code :

for each White move
    add table cell showing White Move Number
    add table cell showing White Move
    add table cell showing Black Move
    add table cell showing Black Move Number
next White move

For the Move Number int_columns, we'll create a hyperlink from the number for the 'position at move X' requirement. More on that later on. A Sample Listing is available for this, as well as a demonstration of what it could look like.

In the next section, we'll look at how to move pieces on the board, following a move list provided by the user.

Produced by Greg Griffiths

Created: March 7, 2003
Revised: March 7, 2003

URL: https://webreference.com/programming/professional/javascript/javachess/index.html