JavaScript Chess Simulator: Part 2

JavaScript Chess Simulator: Chapter 2

In the previous
section, we looked at the key components and requirements of this application,
we created a board populated with pieces and added an information dialog box
to show the key information about the game. In this chapter, we will cover the
basic movement of each piece, the capture of one piece by another, special moves
such as Castling and stepping backwards though the move list.

Recording Moves

For our application, we are going to record our moves using the Algebraic
Notation format, which is probably the most commonly used format for recording
- or scoring - a Chess game. Each line records an individual move (I don't intend
to provide a detailed description on the system in this article, as plenty are
available elsewhere on the
Internet). Most moves are made up of the following components :

Nb1-c3+

N

b1

-

c3

+

[piece identifier]

<start file>
<start rank>

<movetype>

<end file>
<end rank>

[move comments]

e2xd3

e2

x

d3

[piece identifier]

<start file>
<start rank>

<movetype>

<end file>
<end rank>

[move comments]

As you can see from the above examples, the important components for the move
are elements two and four, which are the current location of the piece on the
board as represented by its coordinates (e.g. b1 or e2) and the
coordinates of where it is moving to. We'll have a look at the others later in
this tutorial.

Playing with Strings

The Move List is an array of strings, and since
this chapter focuses on interacting with this list (to produce a move on the
graphical board), we need to work with strings. In this chapter, we'll focus
on the following String object functions :

Function Name

Example

Usage

charAt

str_thePiece=str_theMove.charAt(0)

This function gets the character at the specified location in the string.

indexOf

str_theMove.indexOf('++')

This function gets the characters in the specified portion of the string,
the parameters are the start and end position in the string.

substring

str_thePiece=str_theMove.substring(0,1)

This function gets the characters in the specified portion of the string,
the parameters are the start and end position in the string.

substr

str_moveTo=str_theMove.substr(3,2)

This function gets the characters in the specified portion of the string,
the parameters are the start position and the number of characters to
return.

To illustrate the use of these functions we have the
following example:

// get a move
str_theMove="e2-e4+";

// do we have a check in there ?
if (str_theMove.indexOf('+')>0)
{
check=true;
}
else
{
check=false;
}

Additional information on these functions and their
uses can be found as part of WebMonkey's Advanced Javascript Tutorial, especially
Lesson two: pages two
and three.

In Chapter
3, I'll create a few tweaks to the application that we created in the previous
two sections. Here, we'll focus on validating the Move Lists and we'll create
some enhancements for the User Interface.