Javascriptが - 配列（「map.tiles」）で、その場所/インデックスと同様に、タイル

Question

私がクリックしたタイルのxのy座標を取得できるようにしたい

をクリックしてくださいタイルマップ。

タイルマップを作成します。

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の

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

タイルを取得するには、再度タイルサイズを掛けタイルIDを取得するために、タイルサイズとマウスのx & Yを分割であります

ご希望のもの：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(); 
}