我希望能够获得我点击的图块的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]
}
}
定义鼠标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
答案 0 :(得分:0)
创建一个不断检查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();
}
答案 1 :(得分:0)
你需要做的就是划分鼠标x&amp; y使用tile大小来获得tile id然后再将它们与tilesize相乘以获得tile x&amp; ÿ
margin
希望这就是你要找的东西:D