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

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

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

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

然后你需要定义更新和绘制功能。在此示例中，您可能还没有任何更新，但您可能在将来。绘图功能首先擦除背景，然后绘制网格：

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);

点击处理程序;你需要通过划分你被cellSize捕获的x和y来找出他们点击了哪个单元格。

 // 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;

如何使这个网格可点击？

1 个答案: