Dungeon crawler game - Isometric map tile click

Dungeon crawler game - Isometric map tile click
0.0 0

#1

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);

#2

Added to Github for reference.
https://github.com/japickering/Game-isometric