# Dungeon crawler game - Isometric map tile click

I’ve been following along with the isometric worlds tutorial to take a stab at making a Dungeon crawler game out of it. I think my output numbers are wrong though when trying to trace the tile clicked on.

Here’s the code:

``````// Create the game scope
(function(game) {

// Two Dimensional Array storing our isometric map layout. Each number represents a tile.
var map = [
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
];
// Set tile pixel sizes, alter if you are using larger tiles.
var tileHeight = 25,
tileWidth = 52,
tileImages = [],
"images/water.png",
"images/land.png"
];

// Water is represented by a 0 on the map and land will be a 1.

for (var i = 0; i < tileImagesToLoad.length; i++) {
tileImages[i] = new Image();
// Once the image is loaded increment the loaded graphics count and check if all images are ready.
drawMap();
}
}
}
}

function drawMap() {

// create the canvas context
var ctx = document.getElementById('main').getContext('2d');

// mapX and mapY are offsets to make sure we can position the map as we want.
var mapX = 101;
var mapY = 25;

var tileType;

// loop through our map and draw out the image represented by the number.
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
tileType = map[i][j];
// Draw the represented image number, at the desired X & Y coordinates followed by the graphic width and height.
ctx.drawImage(tileImages[tileType], (i - j) * tileHeight + mapX, (i + j) * tileHeight / 2 + mapY);
}
}
}

function isoTo2D(pt){
// var tempPt:Point = new Point(0, 0);
var tempPt = {x:0, y:0};
tempPt.x = (2 * pt.y + pt.x) / 2;
tempPt.y = (2 * pt.y - pt.x) / 2;
return(tempPt);
}

function getTileCoordinates(pt){
// var tempPt = new Point(0, 0);
var tempPt = {x:0, y:0};
tempPt.x = Math.floor(pt.x / tileHeight);
tempPt.y = Math.floor(pt.y / tileWidth);
return(tempPt);
}

function init() {
// Remove Event Listener and load images.

};

function onClick(event){
// console.log('tileHeight '+tileHeight);
var pt = {x: event.clientX, y: event.clientY};
var tilePoint = getTileCoordinates(isoTo2D(pt), tileHeight);
document.getElementById('x').value = tilePoint.x;
document.getElementById('y').value = tilePoint.y;
};