Mixing HTML5 Video and Canvas - HTML5 Canvas - page 301

var selectedList= new Array();
for (var c = 0; c < cols; c++) {
for (var r =0; r < rows; r++) {
pieceX = c*partWidth+c*xPad+startXOffset;
pieceY = r*partHeight+r*yPad+startYOffset;
Next, we use those calculated values to test for a hit test point collision. We do this
with a semicomplicated if:then statement that tests the following four conditions
simultaneously:
mouseY >= pieceY
The mouse pointer lies lower than or equal to the top of the piece.
mouseY <= pieceY+partHeight
The mouse pointer lies above or equal to the bottom of the piece.
mouseX >= pieceX
The mouse pointer lies to the right or equal to the left side of the piece.
mouseX <= pieceX+partWidth
The mouse pointer lies to the left or equal to the right side of the piece.
All of the above conditions must evaluate to true for a hit to be registered on any one
piece on the board:
if ( (mouseY >= pieceY) && (mouseY <= pieceY+partHeight) && (mouseX >= pieceX) &&
(mouseX <= pieceX+partWidth) ) {
If all these conditions are true, we set the selected property of the piece object to true
if it was already false , or we set it to false if it was already true . This allows the user
to “deselect” the selected piece if he has decided not to move it:
if ( board[c][r].selected) {
board[c][r].selected = false;
} else {
board[c][r].selected = true;
}
}
At the end of the nested for:next loop, we make sure to test each piece to see whether
its selected property is true . If so, we push it into the selectedList local array so we
can perform the swap operation on the pieces:
if (board[c][r].selected) {
selectedList.push({col:c,row:r})
}
}
}