Добавить функцию клика в ячейку (игра жизни)

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, который вы прикрепили к холсту, мы можем выяснить, по какой ячейке мы щелкнули, используя следующую формулу: этаж (mousePosition / разрешение)

Простой пример: мы знаем, что каждая ячейка имеет 20 пикселей. Если пользователь нажал на х = 123, мы получим 123/20 = 6,15 == 6

То же самое нужно сделать для вертикального щелчка мышью.

Теперь мы можем просто переключать состояние ячейки, используя это:

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

Таким образом, если значение элемента в cellX; cellY равно false, оно становится истинным и наоборот.

Наконец, нам нужно перебрать массив и соответственно обновить холст.

Вот полный пример. (нажмите «Выполнить фрагмент кода» и щелкните в любом месте внутри холста, чтобы переключить ячейку)

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>