获取 canvas 中的行和列

Question

我正在制作一个小地图，供玩家在世界上互相看到。我想添加一个扇区指示器，告诉每个玩家他们在哪个扇区。世界是一个 5000x5000 矩阵。

Answer 1

取世界的比例除以行和列得到比例。然后将玩家 x, y 除以比例得到扇区。我制作了 COLUMNS 和 ROWS 数组，以防您想更改为命名系统。这个方法returns一个字符串。

function getSector(x, y) {
  // The dimensions of the map
  const WIDTH = 5000, HEIGHT = 5000;
  // The sectors row and column labels
  const COLUMNS = ['1','2','3','4','5'];
  const ROWS    = ['A','B','C','D','E'];
  // Scale map to number of sectors
  const colScale = Math.floor(WIDTH / COLUMNS.length);
  const rowScale = Math.floor(HEIGHT / ROWS.length);
  // Convert xy coordinates to sectors
  const col = Math.floor(x / colScale);
  const row = Math.floor(y / rowScale);
  // Returns string of current sector
  return `${ROWS[row]}${COLUMNS[col]}`;
}


console.log(getSector(0, 0))
console.log(getSector(4999, 4999))

获取 canvas 中的行和列

Get the row and column in a canvas

javascript

game-development

html5-canvas