Javascript - Tilemap点击瓦片

Question

我想要能够获取我点击的瓦片的xy坐标以及它在数组中的位置/索引（“map.tiles”）。

创建tilemap的：

var map = { 
    cols: 8, 
    rows: 8, 
    tsize: 100, 
    tiles: [ 
     0,0,0,0,0,0,0,0, 
     0,0,0,0,0,0,0,0, 
     0,0,1,1,2,2,0,0, 
     0,0,1,1,1,1,0,0, 
     0,0,0,0,0,0,0,0, 
     0,0,0,0,0,0,0,0, 
     0,0,0,0,0,0,0,0, 
     0,0,0,0,0,0,0,0 
    ], 
    solidTiles : [1,2], 

    getTile: function(col,row) { 
     return this.tiles[row * map.cols + col] 
    } 
} 

定义鼠标x和y

mouseX = e.pageX-c.offsetLeft; //get mouse's x position 
mouseY = e.pageY-c.offsetTop; 

渲染瓦片地图：

for(let c = 0; c < map.cols; c++) { 
    for(let r = 0; r < map.rows; r++) { 
     var tile = map.getTile(c,r); 
     if(tile != 0) { //not an empty tile 
      renderSheet(
       "tiles.png", //spritesheet 
       (tile-1) * map.tsize, //tile index * tilesize 
       0, //tile y index 
       map.tsize, //tile width 
       map.tsize, //tile height 
       c * map.tsize, //tile x 
       r* map.tsize, //tile y 
       map.tsize, //tile width 
       map.tsize //tile height 
      ); 
     } 
    } 
} 

请帮助：d

Answer 1

所有你需要做的是分裂鼠标X & y随瓷砖的大小，以获得区块ID，然后由tilesize乘以再次获得瓦X &Ÿ

player.x = Math.floor(mouseX/map.tsize)*map.tsize; 
player.y = Math.floor(mouseY/map.tsize)*map.tsize; 

希望这是你在找什么：D

Answer 2

创建一个功能不断检查是否有任何t iles x和y与鼠标x和y重叠。
检测到鼠标单击事件时，输出当前重叠的数组索引。

function overlapping() { 
    for(i = 0; i < tile.length; i++) { 
    if (mouseX > tile[i].x && mouseX < tile[i].x + tile[i].width) { 
     if (mouseY > tile[i].y && mouseY < tile[i].y + tile[i].height) { 
     return i; 
     } 
    } 
    } 
    overlapping(); 
}