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