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 = [],
tileImagesToLoad = [
"images/water.png",
"images/land.png"
];
function loadImg() {
// Water is represented by a 0 on the map and land will be a 1.
tileImagesLoaded = 0;
for (var i = 0; i < tileImagesToLoad.length; i++) {
tileImages[i] = new Image();
tileImages[i].src = tileImagesToLoad[i];
tileImages[i].onload = function() {
// Once the image is loaded increment the loaded graphics count and check if all images are ready.
tileImagesLoaded++;
if (tileImagesLoaded === tileImagesToLoad.length) {
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.
game.removeEventListener('load', init);
loadImg();
// Add mouse click listener
document.getElementById('main').addEventListener('click', onClick);
};
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;
};
// Add Event Listener to dectect when page has fully loaded.
game.addEventListener('load', init, false);
})(this);