Хорошо выглядит до сих пор! Один из способов достижения sh - это добавить прослушиватель событий ко всему элементу холста . Подходящее место для его добавления - функция setup; таким образом, как только доска настроена, ваш холст будет прослушивать щелчки.
Теперь, если весь холст прослушивает щелчки, вам потребуется способ определить, какой квадрат был нажат. Это не так уж сложно, но есть некоторые препятствия. Давайте попробуем определить это для «одномерной доски»:
"The board"
+---------+---------+---------+
Предположим, что где-то на ней происходит щелчок:
+---------+---------+---------+
^click
|------------| <-clickPos = the distance between the click and the edge of the board
Как мы можем определить, в какой ячейке она произошла? Если мы знаем размер каждой ячейки и местоположение клика, это можно сделать с помощью деления:
const clickedCell = Math.floor(clickPos / cellSize);
Мы полагаем это значение для получения интегрального значения (для 0 оно будет равно 0 первая ячейка, 1 для второй и т. д. c.).
Вот где появляется «гоча»: когда происходит событие щелчка, легко извлечь местоположение щелчка относительно страницы , но это не обязательно то, что вы хотите.
Вот новая «доска», которая отражает это:
| +---------+---------+---------+
^ edge ^click
of page |
|-------------------------| <-this distance is easy to extract from the event
|------------| <-this is the distance you want
|------------| <-this is the distance between the edge of the board and the edge of the page
Как показывает диаграмма, позиция щелчка что нас волнует, на самом деле не тот, который записан на мероприятии. Чтобы определить это, нам нужно вычесть позицию щелчка из позиции левого края доски.
Вот как это выглядит в JavaScript:
canvas.addEventListener('mouseup', event => {
const { left, top } = canvas.getBoundingClientRect();
// ^^^^ ^^^ These give us the position of the board relative to the page
const mouseX = event.clientX - left;
const mouseY = event.clientY - top;
// ^^^^^^^ These give us the position of the click relative to the page
const row = Math.floor(mouseY / sq);
const col = Math.floor(mouseX / sq);
// Now draw your "X" or "O" here, using the `row` and `col` values
// calculated above to determine where to place it
});
Напоминаем, что вам нужно добавить этот прослушиватель только один раз; как только он будет добавлен, он будет вызывать функцию, которую мы предоставили каждый раз, когда происходит щелчок. Возможно, имеет смысл разделить работу по вычислению позиции на отдельную функцию и т. Д. c. но вы поймете это как вы go. Надеюсь это поможет; так держать!