HTML and CSS Reference
In-Depth Information
through all the pieces in the
board
array. Inside the
for:next
loops, the first thing we do is
find the top-left corner
x
and
y
points of the current piece pointed to by
board[c][r]
. We
calculate those values and put them into the
placeX
and
placeY
variables:
var
var
selectedList
=
new
new
Array
();
for
for
(
var
var
c
=
0
;
c
<
cols
;
c
++
) {
for
for
(
var
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
semi-complicated
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
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
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:
iif
( (
mouseY
>=
pieceY
)
&&
(
mouseY
<=
pieceY
+
partHeight
)
&&
(
mouseX
>=
pieceX
)
&&
(
mouseX
<=
pieceX
+
partWidth
) ) {
Ifalltheseconditionsaretrue,wesettheselectedpropertyofthepieceobjectto
true
ifitwas
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:
iif
(
board
[
c
][
r
].
selected
) {
board
[
c
][
r
].
selected
=
false
false
;
}
else
else
{
board
[
c
][
r
].
selected
=
true
true
;
