Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.
Добавьте управление выбором квадратов с клавиатуры: стрелки вверх, вниз, влево и вправо должны перемещать выбор на соответствующий соседний квадрат, не выходя за границы сетки.
Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Храните выбранную ячейку как индекс и проверяйте строку и столбец до перехода, чтобы не перескочить через край.
Для полной прямоугольной сетки:
function move(index, key, rows, cols) {
const row = Math.floor(index / cols), col = index % cols;
if (key === 'ArrowLeft' && col > 0) return index - 1;
if (key === 'ArrowRight' && col + 1 < cols) return index + 1;
if (key === 'ArrowUp' && row > 0) return index - cols;
if (key === 'ArrowDown' && row + 1 < rows) return index + cols;
return index;
}
Предполагаются положительные размеры и валидный исходный индекс. Обработчик keydown ставят на сфокусированную сетку, обновляют selection и фокус; preventDefault вызывают для обработанных стрелок.