如何使这个网格可点击？

Question

我已经使用画布以及穿过它的线条创建了下面的网格，如何使这个网格可点击？

理想的结果是当我单击其中一个框时，它会变成黄色，并且数组中的值将从 0 更改为 1。我很确定我知道如何设置 2D 数组，但那是总体思路。感谢您的帮助。

var cellCount=20;
var currentGrid = new Array(cellCount).fill().map(() => new Array(cellCount).fill(0));
var nextGrid = new Array(cellCount).fill().map(() => new Array(cellCount).fill(0));

for(var i=0;i<20;i++){
    for(var j=0;j<20;j++){
        currentGrid[i][j]=0;
        nextGrid[i][j]=0;
    }
}

var canvas=document.getElementById('grid');
var ctx=canvas.getContext('2d');



function drawGrid(h,w,id){
    for(var x=0;x<w;x++){
        ctx.moveTo(0,x*20);
        ctx.lineTo(h,x*20);
        ctx.lineWidth=1;
        ctx.strokeStyle='rgb(211,211,211)';
        ctx.stroke();
    }
    for(var y=0;y<h;y++){
        ctx.moveTo(y*20,0);
        ctx.lineTo(y*20,w);
        ctx.lineWidth=1;
        ctx.strokeStyle='rgb(211,211,211)';
        ctx.stroke();
    }
}

function getPosition(event)
  {

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }

  }

  canvas.addEventListener("mousedown", getPosition, false);

drawGrid(421,421,'grid');

Answer 1

查看您提供的代码，似乎没有循环，这意味着在视觉上不会对网格进行其他更新。此外，draw 函数似乎会在屏幕外绘制，因为您将值乘以 20，这可能应该是 cellCount。

首先，我建议设置一个“游戏循环”。涉及循环更新和绘制的模式：

function loop(tick) {
  update(tick);
  draw(tick);
  requestAnimationFrame(loop);
}
// start the loop
requestAnimationFrame(loop);

然后你需要定义更新和绘制函数。在此示例中，您可能还没有要更新的内容，但将来可能会更新。 draw 函数会先擦除背景，然后绘制网格：

function draw(tick) {
  // clear background
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // draw the grid
  drawGrid(numCols, numRows);
}

现在您需要定义 numCols 和 numRows，它们只是宽度或高度除以 cellSize。这会告诉您画布的高度和宽度中有多少个单元格。我看到你有 cellCount 而不是 cellSize，但是可以通过取画布高度（或宽度）并将其除以 cellCount（假设画布是正方形）来以相反的方式计算 cellSize。

 var numCols = Math.floor(canvas.width / cellSize);
 var numRows = Math.floor(canvas.height / cellSize);

关于点击处理程序；您需要通过将您捕获的 x 和 y 除以 cellSize 来确定他们点击了哪个单元格。

 // assuming x and y are the coordinates on the canvas where the user clicked
 var cellX = Math.floor(x / cellSize);
 var cellY = Math.floor(y / cellSize);
 // now set the cell
 nextGrid[cellY][cellX] = 1;