Как не дать управлению с клавиатуры нарушить механику перемещения плиток мышью
Если вы создаете браузерную головоломку-пятнашки в качестве вспомогательного инструмента для настольных приключений, настройте перетаскивание мышью и перемещения с клавиатуры так, чтобы они изменяли одно и то же состояние головоломки, ограничив при этом область действия горячих клавиш самой головоломкой. Главные аспекты для проверки — это фокус, обработка событий и завершение перетаскивания: нажатие клавиши в текстовом поле не должно сдвигать плитку, а перетаскивание не должно прерываться или теряться, когда указатель пересекает границу плитки.
Начните с выявления причины неожиданного перемещения элементов головоломки
Когда головоломка реагирует на нажатие клавиши со стрелкой во время работы с мышью, причиной часто является слишком широкий охват обработчика событий клавиатуры. Обработчик, прикрепленный к document или window, может перехватывать нажатия клавиш со стрелками, даже если игрок вводит текст в поле для подсказок, пользуется меню или взаимодействует с другим элементом управления. Это также может вызывать стандартные действия браузера, такие как прокрутка, параллельно изменяя состояние головоломки.
Воспроизведите проблему с помощью короткого чек-листа: нажмите на плитку и потяните ее; перетащите плитку за пределы игрового поля; нажмите клавишу со стрелкой, когда поле находится в фокусе; затем нажмите ее, когда в фокусе находится поле ввода подсказки, кнопка или меню. Обратите внимание, меняется ли доска, прокручивается ли страница, перемещается ли фокус и прекращается ли перетаскивание. Эти наблюдения позволят отличить ошибку в логике головоломки от проблем с отслеживанием указателя или стандартного поведения браузера.
Задайте для головоломки явные границы фокуса
Относитесь к игровому полю как к элементу управления с четкой точкой входа для клавиатуры. Используйте фокусируемый контейнер поля и обрабатывайте клавиши управления головоломкой только тогда, когда это поле активно или когда фокус находится на плитке, принадлежащей этому полю. Оставляйте несвязанные элементы управления, такие как кнопки подсказок и текстовые поля, за пределами этой области обработки клавиш. Сделайте текущее положение фокуса визуально различимым, чтобы игрок понимал, когда поле готово реагировать на ввод.
Проверяйте цель события (event.target), прежде чем интерпретировать нажатие клавиши. Если фокус находится в поле ввода, текстовой области, редактируемом элементе или на отдельной кнопке, игнорируйте нажатие. Для инструментов совместных приключений это крайне важно, когда один игрок вводит руну, имя или подсказку, а другой в этот же момент решает головоломку: ввод текста не должен приводить к случайным перемещениям плиток.
Управление с клавиатуры при этом должно оставаться полностью работоспособным. В руководствах W3C подчеркивается, что функциональность по возможности должна быть доступна через интерфейс клавиатуры, а перемещение объектов в определенное место прямо названо действием, которое может управляться с клавиатуры. Тщательно ограничьте область действия клавиш вместо того, чтобы полностью их отключать. W3C: Understanding Success Criterion 2.1.1: Keyboard
Разделите команды головоломки и стандартные действия браузера
Выберите небольшой и задокументированный набор клавиш для поля, например клавиши со стрелками, когда поле находится в фокусе. В обработчике сначала убедитесь, что нажатая клавиша действительно используется головоломкой, а игровое поле является активной целью события. Только после этого применяйте перемещение и при необходимости отменяйте стандартное действие браузера для этой клавиши. Не подавляйте все клавиши глобально: игрокам может потребоваться обычный ввод текста, навигация в браузере и взаимодействие с элементами за пределами головоломки.
Метод preventDefault() отменяет стандартное действие браузера, если событие является отменяемым, однако он не останавливает распространение события на другие обработчики. Это означает, что он может предотвратить прокрутку страницы, но не устранит конфликт со вторым слушателем, который также передвигает плитку. Найдите и ограничьте конкретный обработчик, изменяющий состояние игры; не используйте повсеместную отмену действий в качестве замены четкому разграничению зон ответственности событий. MDN: Event: preventDefault() method
Обеспечьте надежное перетаскивание указателем по всему полю
Для взаимодействия перетаскиванием отслеживайте один активный указатель от нажатия, запускающего перетаскивание, до его отпускания или отмены. События указателя (Pointer Events) предоставляют такие методы, как pointerdown, pointermove, pointerup и pointercancel; захват указателя (pointer capture) позволяет удерживать последующие события указателя направленными на поле, даже если указатель выходит за пределы исходной области нажатия. Сбрасывайте состояние активного перетаскивания как по событию pointerup, так и по pointercancel, чтобы прерванный жест не оставлял головоломку в зависшем состоянии перетаскивания. MDN: Pointer events
Не перестраивайте и не заменяйте перетаскиваемую плитку так, чтобы это приводило к потере отслеживания указателя. Если интерфейс перемещает элемент в дереве DOM во время перетаскивания, в документации MDN отмечается, что захват указателя следует устанавливать после этого перемещения. Определите поведение системы при отпускании указателя над недопустимой позицией: для пятнашек возврат плитки на исходное место или ее автоматическая привязка к допустимой позиции гораздо понятнее, чем незаметное смещение соседних плиток.
Сделайте то же перемещение доступным без перетаскивания
Головоломка может одновременно поддерживать ввод с мыши, клавиатуры и простые касания указателя. Например, щелчок или касание плитки, соседней с пустой ячейкой, может перемещать ее; перетаскивание этой плитки может оставаться опциональным жестом прямого взаимодействия; а клавиши со стрелками при фокусе на доске могут обеспечить управление с клавиатуры. Все эти типы ввода должны вызывать одну и ту же логику проверки хода, чтобы перемещение разрешалось или отклонялось единообразно, независимо от способа взаимодействия.
Это также дает полезную проверку на этапе проектирования: может ли игрок собрать головоломку с помощью простых кликов или касаний, вообще без перетаскивания? В руководстве W3C WCAG 2.2 доступность с клавиатуры и альтернатива перетаскиванию с помощью одного указателя рассматриваются как две разные задачи. В примерах предлагается заменять перетаскивание нажатиями на кнопки управления направлением. Альтернатива исключительно для клавиатуры сама по себе не заменяет альтернативный способ взаимодействия для указателя. W3C: Understanding Success Criterion 2.5.7: Dragging Movements
Для пятнашек поочередные клики по соседним плиткам часто становятся естественной альтернативой, поскольку сохраняют правило перемещения на соседнюю клетку. Если такое взаимодействие кажется неочевидным, можно добавить видимые кнопки со стрелками, поясняющие доступное направление. Техника W3C G219 приводит примеры элементов управления с одиночным указателем, которые выполняют аналогичное базовое действие без перетаскивания. W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content
Протестируйте механику по короткой матрице сценариев
Прежде чем использовать головоломку в игре, протестируйте каждый способ ввода на одной и той же раскладке доски и в одинаковом начальном состоянии. Убедитесь, что допустимый ход обновляет состояние доски один раз, недопустимый ход оставляет ее без изменений, а сторонние элементы управления сохраняют свое стандартное поведение.
Мышь: перетащите плитку допустимым ходом, отпустите ее за пределами поля и попробуйте сделать недопустимый ход. Убедитесь, что поле не теряет состояние перетаскивания и не меняется непредвиденным образом.
Клавиатура: установите фокус на поле, используйте каждое поддерживаемое направление, затем переместите фокус в текстовое поле и начните вводить текст. Убедитесь, что только клавиши при фокусе на поле перемещают плитки, а ввод текста не вызывает прокрутку и не меняет раскладку поля.
Указатель без перетаскивания: щелкните или коснитесь допустимой соседней плитки. Убедитесь, что это приводит к тому же перемещению, что и при других способах ввода.
Прерывание действия: отмените или бросьте процесс перетаскивания, а затем начните новое. Убедитесь, что устаревшее выделение не сохранилось.
Если тест не пройден, начните проверку с самого узкого проблемного слоя: проверьте целевой элемент события и состояние фокуса для клавиатуры; захват указателя и очистку состояния для прерванных перетаскиваний; а также общий модуль валидации ходов при противоречивых правилах. Такая последовательность дает разработчику четкий алгоритм поиска проблемы, не превращая реквизит для приключений в руководство общего профиля по элементам управления.