HTML and CSS Reference
In-Depth Information
var
var
row
=
Math
.
floor
(
mouseY
/
32
);
var
var
tileId
=
(
row
*
7
)
+
(
col
+
row
);
highlightTile
(
tileId
,
col
*
32
,
row
*
32
)
}
else
else
{
var
var
col
=
Math
.
floor
(
mouseX
/
32
);
var
var
row
=
Math
.
floor
(
mouseY
/
32
);
context
.
putImageData
(
imageData
,
col
*
32
,
row
*
32
);
}
}
Let's take a closer look at the tile sheet click (
mouseY < 128
).
To determine the
tileId
of the tile clicked on the tile sheet, we first need to convert the
x
location of the mouse click to a number from 0‒7, and the
y
location to a number from 0‒3.
We do this by calling the
Math.floor
function on the result of the current
mouseX
or
mouseY
location, divided by the tile width or height (they are both
32
). This will find the
row
and
col
of the clicked tile:
var
var
col
=
Math
.
floor
(
mouseX
/
32
);
var
var
row
=
Math
.
floor
(
mouseY
/
32
)
To find the
tileId
(the 0‒31 tile number of the tile sheet) of this row and column combina-
tion, we need to use the following calculation:
TileId
=
(
row
*
totalRows
-
1
)
+
(
col
+
row
);
The actual calculation, with values for our application, looks like this:
var
var
tileId
=
(
row
*
7
)
+
(
col
+
row
);
For example, if the user clicks on the point where
mouseX = 50
and
mouseY = 15
, the calcu-
lation would work like this:
col
=
Math
.
floor
(
50
/
32
);
// col = 1
row
=
Math
.
floor
(
15
/
32
);
// row = 0
tileId
=
(
0
*
7
)
+
(
1
+
0
);
// tileId = 1
This position is the second tile on the tile sheet. The
onMouseClick()
function then passes
the
tileId
and
col
valuemultipliedby
32
,andthe
row
valuemultipliedby
32
,intothe
high-
lightTile()
function. This tells the
highlightTile()
function the exact
tileId
,
row
, and
col
the user clicked.
If the user clicked the tile map drawing area in the lower portion of the screen, the code does
the same row and column calculation. However, it then calls the
putImageData()
function
and passes in the
ImageData
instance that holds the tile to stamp and the top-left location to
place the tile:
