• Choose a category
• All
• Classic-Fiction

In the HTML, we will set up a single Canvas object:

Your browser does not support HTML5 Canvas.

In the JavaScript portion of our code, we will define the canvas:

theCanvas = document.getElementById("canvas");

Notice that we set the position to top: 50px and left: 50px. This will keep the application from being shoved up into the top-left corner of the browser, but it also gives us a chance to demonstrate how to find correct mouse x and y values when the tag is not in the top-left corner of the page. The onMouseMove function will make use of this information to offset the mouseX and mouseY values based on the position of the tag:

function onMouseMove(e) {

mouseX = e.clientX-theCanvas.offsetLeft;

mouseY = e.clientY-theCanvas.offsetTop;

}

The onMouseClick function will actually do quite a lot in our application. When the mouse button is clicked, this function will determine whether the user clicked on the tile sheet or on the tile map drawing area below it. If the user clicked on the tile sheet, the function will determine which exact tile was clicked. It will then call the highlightTile() function and pass in the id (0–31) of the tile clicked, along with the x and y locations for the top-left corner of the tile.

If the user clicked in the lower portion of the tile map drawing area, this function will again determine which tile the user clicked on, and stamp the current selected tile in that location on the tile map. Here is the function:

function onMouseClick(e) {

if (mouseY < 128){

//find tile to highlight

var col = Math.floor(mouseX / 32);

var row = Math.floor(mouseY / 32);

var tileId = (row*7)+(col+row);

highlightTile(tileId,col*32,row*32)

}else{

var col = Math.floor(mouseX / 32);

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 col = Math.floor(mouseX / 32);

var row = Math.floor(mouseY / 32)

To find the tileId (the 0‒31 tile number of the tile sheet) of this row and column combination, 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 tileId = (row*7)+(col+row);

For example, if the user clicks on the point where mouseX = 50 and mouseY = 15, the calculation 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 value multiplied by 32, and the row value multiplied by 32, into the highlightTile() 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:

var col = Math.floor(mouseX / 32);

var row = Math.floor(mouseY / 32);

context.putImageData(imageData,col*32,row*32);

The highlightTile() function

The highlightTile() function accepts three parameters:

The 0–31 tileId of the tile on the tile sheet

The top-left x coordinate of the tile represented by the tileId

The top-left y coordinate of the tile represented by the tileId

NOTE

The x and y coordinates can be found by passing in the tileId value, but they are needed in