Question

我也想在网格中添加一个eventListener，因此，如果我要单击一个单元格，它将变成黑色并获得true值。如何将单元格的值更改为true？


const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 800;

    const resolution = 20;
    const horizontal = canvas.width / resolution;
    const vertikal = canvas.height / resolution;

    function buildGrid() {
        return new Array(horizontal).fill(null)
            .map(()=> new Array(vertikal).fill(null)
                .map(function(){choose();})); //Math.floor(Math.random() * 2)
    }


function choose () {
    canvas.addEventListener('click', function (event) {

    });
}

Answer 1

首先，您需要创建一个数组，其中包含每个单元格的状态（false / true）。二维数组是此用例的最佳选择。

var grid = new Array();
for (var a = 0; a < vertikal; a++) {
  grid[a] = new Array();
  for (var b = 0; b < horizontal; b++) {
    grid[a].push(false);
  }
}

这会创建一个数组，并在每个元素中填充 false 。

每个像元的大小由变量 resolution 控制。在您已附加到画布的click事件监听器的回调函数中，我们可以使用以下公式找出我们单击了哪个单元格： 地板（鼠标位置/分辨率）

一个简单的例子：我们知道每个单元格为20像素。如果用户点击x = 123，我们得到123/20 = 6.15 == 6

当然需要对垂直鼠标单击进行相同的操作。

现在，我们可以使用以下命令简单地切换单元格的状态：

grid[cellY][cellX] = !grid[cellY][cellX];

因此，如果cellX; cellY处的元素的值为false，则它为true，反之亦然。

最后，我们需要遍历数组并相应地更新画布。

这里是完整样本。（点击“运行代码段”，然后点击画布内的任意位置以切换单元格）

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;

const resolution = 20;
var horizontal = canvas.width / resolution;
var vertikal = canvas.height / resolution;

var grid = new Array();
for (var a = 0; a < vertikal; a++) {
  grid[a] = new Array();
  for (var b = 0; b < horizontal; b++) {
    grid[a].push(false);
  }
}

function updateGrid() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var a = 0; a < vertikal; a++) {
    for (var b = 0; b < horizontal; b++) {
      if (grid[a][b]) {
        ctx.fillRect(b * resolution, a * resolution, resolution, resolution);
      }
    }
  }

}
canvas.addEventListener('click', function(event) {
  var cellX = Math.floor((event.clientX - canvas.offsetLeft) / resolution);
  var cellY = Math.floor((event.clientY - canvas.offsetTop) / resolution);
  grid[cellY][cellX] = !grid[cellY][cellX];
  updateGrid();
});

<canvas></canvas>

将点击功能添加到单元格（生活游戏）

1 个答案: