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.

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

set str_squareColor = white
for each row 1 to 9
    if int_rows < 9 then
        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

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.

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

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