Управляем анимацией и добавляем экранную клавиатуру
В прошлый раз мы сделали базовую версию игры в Wordle:
- игровое поле 5 на 6 клеток;
- работает подсветка букв;
- уведомления об отсутствии слова в словаре, о проигрыше или победе;
- английский словарь.
Сегодня сделаем игру более красивой и заменим английские слова на русские. Такое время.
Добавляем экранную клавиатуру
Чтобы сразу видеть все использованные буквы и играть в Wordle на тачскринах, добавим экранную клавиатуру. Для этого нам нужно в файле index.html после блока с игровым полем добавить блок с буквами. Мы повторим классическую раскладку ЙЦУКЕН:
- сделаем общий блок для всей клавиатуры;
- в него положим три блока — каждый для своего ряда клавиш;
- а в каждый ряд положим все соответствующие буквы, причём каждую тоже обернём в свой блок <div>.
Такое количество блоков нам нужно для того, чтобы управлять внешним видом каждой клавиши, например, подсвечивать серым те буквы, которой нет в загаданном слове.
Клавиатура появилась, но внешне явно выбивается из общего стиля. Исправим это и добавим новые стили в файл style.css:
Меняем язык ввода
В текущей версии игры нам можно вводить только буквы из английского алфавита, но если мы хотим играть с русскими словами, нам нужно поменять проверку букв. Для этого в строке с регулярным выражением заменим английские буквы на русские:
// проверяем, есть ли введённый символ в русском алфавите let found = pressedKey.match(/[а-яА-ЯЁё]/gi)
Меняем словарь
Так как мы вынесли все слова в отдельный файл words.js, то всё, что нам нужно сделать, — это заменить там список слов на русские из 5 букв. Сами слова мы взяли из гитхаба Матвея Рябчикова — на момент выхода статьи в нём 5742 слова.
Сразу же проверим, как работает игра после замены словаря:
Вешаем обработчик на клавиатуру
Чтобы можно было играть без клавиатуры и пользоваться только экранной, научим скрипт распознавать нажатия на неё. Логика будет простая:
- Добавляем общий обработчик события, который будет реагировать на любую нажатую виртуальную кнопку. Так как у нас у всех кнопок общий класс "keyboard-cont", то и обработчик привяжем к этому же классу.
- Забираем из кнопки её текст — это и будет наша нажатая клавиша.
- Имитируем нажатие этой кнопки на настоящей клавиатуре. Для этого генерируем событие KeyboardEvent("keydown"), а в качестве содержимого передаём ей выбранную букву.
Подсвечиваем клавиатуру
Чтобы было удобнее играть, подсветим кнопки на клавиатуре тем же цветом, что и на игровом поле. Для этого сразу после подсветки игрового поля вызовем функцию подсветки на клавиатуре:
// применяем выбранный цвет к фону клетки
box.style.backgroundColor = letterColor;
// и к кнопке на экранной клавиатуре
shadeKeyBoard(letter, letterColor)
Когда скрипт дойдёт до этого места, то сразу выдаст ошибку — у нас ещё нет функции shadeKeyBoard(). Исправим это и напишем её так:
- если кнопка уже была зелёной, оставляем как есть;
- если она была жёлтой, но при очередной попытке так и не стала зелёной, тоже оставляем как есть;
- и только после этого мы добавляем виртуальной кнопке такой же цвет, что и у клетки на игровом поле.
Добавляем анимацию
Финальный штрих — настроим раскраску клеток не сразу, а по очереди, чтобы новые цвета появлялись друг за другом. Для этого используем задержку по времени — мы её уже использовали в проекте с таймером на JavaScript. Обернём две подсветки из предыдущего раздела в код с таймером: