|
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 < 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
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.
|
 |
|
