вторая часть кода
// Now that we have the row and column of the target piece
// as well as the empty piece, we can check to see if anything
// needs to be moved. Remember, we ONLY need to move pieces
// if the target piece and the empty piece share a row
// or a column.
// Check to see if they share the same row.
if (objPiecePos.row == objEmptyPos.row){
// Check to see which direction we are moving in.
if (objPiecePos.col > objEmptyPos.col){
// Move left.
for (intColIndex = objEmptyPos.col ; intColIndex < objPiecePos.col ; intColIndex++){
arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex + 1 ];
}
// Put empty in place.
arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty;
} else {
// Move right.
for (intColIndex = objEmptyPos.col ; intColIndex > objPiecePos.col ; intColIndex--){
arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex - 1 ];
}
// Put empty in place.
arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty;
}
// Update the CSS of the entire row (to make it easy).
for (intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){
if (blnShowAnimation){
// Flag that an animation is about to being.
blnInAnimation = true;
// Animate the CSS move.
arr2DBoard[ objPiecePos.row ][ intColIndex ].animate(
{
left: ((intSize * intColIndex) + "px")
},
200,
function(){
blnInAnimation = false;
}
);
} else {
// Update the CSS for the given piece.
arr2DBoard[ objPiecePos.row ][ intColIndex ].css(
"left",
((intSize * intColIndex) + "px")
);
}
}
// Check to see if we should move vertically.
} else if (objPiecePos.col == objEmptyPos.col){
// Check to see which direction we are moving in.
if (objPiecePos.row > objEmptyPos.row){
// Move up.
for (intRowIndex = objEmptyPos.row ; intRowIndex < objPiecePos.row ; intRowIndex++){
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex + 1 ][ objPiecePos.col ];
}
// Put empty in place.
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty;
} else {
// Move down.
for (intRowIndex = objEmptyPos.row ; intRowIndex > objPiecePos.row ; intRowIndex--){
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex - 1 ][ objPiecePos.col ];
}
// Put empty in place.
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty;
}
// Update the CSS of the entire column (to make it easy).
for (intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){
if (blnShowAnimation){
// Flag that an animation is about to being.
blnInAnimation = true;
// Animate the CSS move.
arr2DBoard[ intRowIndex ][ objPiecePos.col ].animate(
{
top: ((intSize * intRowIndex) + "px")
},
200,
function(){
blnInAnimation = false;
}
);
} else {
// Update the CSS for the given piece.
arr2DBoard[ intRowIndex ][ objPiecePos.col ].css(
"top",
((intSize * intRowIndex) + "px")
);
}
}
}
// Return false so nothing happens.
return( false );
}
// ASSERT: At this point, we have defined all the class
// methods for this plugin instance. Now, we can act on
// the instance properties and call methods.
// Get a jQUery reference to the container.
var jContainer = $( this );
// Get a jQuery reference to the first image
// - this is the one that we will use to make
// the image puzzle.
var jImg = jContainer.find( "img:first" );
// This is the array that will hold the 2-dimentional
// representation of the board.
var arr2DBoard = [];
// The height and width of the puzzle.
var intPuzzleWidth = 0;
var intPuzzleHeight = 0;
// The width / height of each piece. This can be overriden
// by the user when the initialize the puzzle plug-in.
var intSize = intUserSize || 100;
// The number of columns that are in the board.
var intColumns = 0;
// The number of rows that in the board.
var intRows = 0;
// Flag for wether or not to show animation.
var blnShowAnimation = false;
// Flag for wether or not an animation is in the midst. We
// are going to need this to prevent further clicking during
// and anmiation sequence.
var blnInAnimation = false;
// Check check to make sure that the size value is valid.
// Since this can be overridden by the user, we want to
// make sure that it is not crazy.
intSize = Math.floor( intSize );
if ((intSize < 40) || (intSize > 200)){
intSize = 100;
}
// Check to see if the image has complietely
// loaded (for some reason, this does NOT
// work with the attr() function). If the
// image is complete, call Init right away.
// If it has not loaded, then set an onload
// handler for initialization.
if ( jImg[ 0 ].complete ){
// The image has loaded so call Init.
InitPuzzle();
} else {
// The image has not loaded so set an
// onload event handler to call Init.
jImg.load(
function(){
InitPuzzle();
}
);
}
}
);
}