Николас Винсент-Хилл

Это обзор высокого уровня моей реализации игры-головоломки/слова, полностью построенной на React. Это не самый красивый код, который когда-либо был написан, но я доволен своей первой браузерной игрой.

Вот что я построил:

Scrabblr – улучшайте свои навыки Scrabble, получая массу удовольствия

Фон

Я рассматривал анимационные решения в React.js и наткнулся на демонстрацию реакций-переворачивания-перемещения Джошуа Комо. Я видел потенциал для создания всевозможных игр, похожих на эскизный, благодаря его классному интерфейсу перетаскивания и анимированного движения.

Технические проблемы

Декораторы с Вавилоном

React-flip-move Джошуа Комо нуждается в декораторах функций — языковой функции, не поддерживаемой компилятором Babel приложения create-react-app.

Пакет react-app-rewired решает эту проблему, переопределяя конфигурации create-react-app Webpack без изъятия (что-то очень страшно для такого нуба, как я, который не хотел иметь дело со сложностью Webpack под капотом).

Вышеприведенный код позволил мне внедрить устаревший плагин transform-decorators-legacy (без извлечения) для обработки декораторов. Одна проблема решена, осталось много других.

Создание игрового цикла

Для меня то, что разделяет крутую вещь и «игру», это концепция игрового цикла.

Основной игровой цикл начинается с ввода пользователя (кнопка, нажатая, чтобы начать новую игру). Пользователь перемешивает плитки и находит слова.

Каждый раз, когда пользователь изменяет расположение плитки, игра проверяет наличие действительных слов. Если слово действительно, оно оценивает это и увеличивает общий балл на бал за слово. Он также добавляет это слово в массив «Найденные слова», поэтому оно не учитывается вдвойне, если оно будет найдено снова в будущем.

Когда пользователь находит все возможные слова (см. ниже для реализации проблемы всех возможных совпадений) или отказывается (нажимает кнопку сдачи), игровой цикл заканчивается и появляется модальный результат.

Данные или источник истины все содержатся в state и передано в мои компоненты с помощью нового React.context API (во избежание пробуривания). Когда начинается новый игровой цикл, все эти значения сбрасываются state.

Доступ к расположению плитки для поиска персонажей

Для решения этой проблемы мне понадобилось очень много времени. Позиция плитки (x, y) в матрице сетки содержится в state.tiles.

Мне нужно было уметь счищать буквы с плиток по их положению и собрать строчку для проверки. Мое решение – это полная хакерская работа, и я не буду показывать его здесь – это то checkForWords() метод в App.js на моем Github, который отчаянно нуждается в рефакторинге.

Подтверждающие слова

Мне также нужен был быстрый способ проверить, есть ли строка символов настоящим английским словом. Бесплатный API словаря, который я полагал, имел чрезмерно низкое количество разрешенных запросов в день и высокую задержку. Мне требовалось решение, которое позволило бы быстро проверить исчерпывающий локальный список. The Object.hasOwnProperty() метод, вызванный в словаре из 270 000+ пар ключ-значения, работает хорошо и быстро.

Нижеследующий код является моим решением для поиска всех возможных действительных слов с массивом букв. Вот как я рассчитываю количество оставшихся слов для отображения пользователю, и знаю, когда закончить игровой цикл.

Моя оригинальная попытка, без использования Object.hasOwnProperty() оптимизации метода и скорости заняли около десяти секунд, чтобы вычислить все возможные действительные слова. Эта реализация кажется пользователю почти мгновенно и вызывается в начале нового игрового цикла.

Вывод

Я многому научился, создавая этот проект, и горжусь результатом: моя игра работает быстро и хорошо смотрится. В конце концов, я хотел бы добавить OAuth и стабильность данных, ведение записей высокой оценки и уровни, разработанные пользователем.

Я все еще новичок в программировании и веб-дизайне — я хотел бы услышать ваши комментарии/предложения/критику в комментариях.

Играйте в Scrabblr здесь!

Читать дальше:

Введение и немного о доступе к API IEX с помощью JavaScript