Question

我希望能够获得我点击的图块的x y坐标以及它在数组中的位置/索引（＆＃34; map.tiles＆＃34;）。

创建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是否与鼠标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();
}

Answer 2

你需要做的就是划分鼠标x＆amp; y使用tile大小来获得tile id然后再将它们与tilesize相乘以获得tile x＆amp; ÿ

margin

希望这就是你要找的东西：D

Javascript - Tilemap点击图块

2 个答案: