JavaScript Chess Simulator: Part 2 | WebReference

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;
}

}
// is it a capture
str_moveType=str_theMove.charAt(2);
if (str_moveType=='x')
{
    capture=true;
}
else
{
    capture=false;
}

// get the from location
str_fromLoc=str_theMove.substring(0,2);

// get the to location
str_toLoc=str_theMove.substr(3,2)

At the end of this the variables have the following values:

str_theMove="e2-e4"
str_moveType="x"
capture=false
check=true
str_fromLoc="e2"
str_toLoc="e4"

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.


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

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