Javascript - Tilemap click on tile

Question

Я хочу, чтобы получить координаты x y плитки, на которую я нажимаю, а также ее местоположение/индекс в массиве («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] 
    } 
} 

Определить мыши х и у

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

Все, что вам нужно сделать, это разделить мыши х & у с размером плитки, чтобы получить плитку идентификатор затем умножить его на tilesize снова, чтобы получить плитку х & у

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