Как я создал игру React с react-dnd и react-flip-move

1656598093 kak ya sozdal igru react s react dnd i react flip move

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

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

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

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

Yuy7Y3NjzTb45SAG5BmbqDhXrd9qzHj-vEw6
Нажмите на меня, чтобы играть в Scrabblr!

Фон

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

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

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

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

N1ViOUNEKcBwyVbNoGTuIgc0bQsaV3WREoVh

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

DaNp9bCEpfrPwRdXOfuAz7utnMOXa4P9avjo
config-overrides.js

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

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

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

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

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

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

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

OMK5X0IhgiEZaZeOjdAYU6ew5pQJLVO6-sGi
Метод инициализации игрового цикла внутри компонента программы

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

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

YESlxksNLL-Mu4pMWirwiv92D4qa-rixtxtM
Плитки создаются со свойствами по умолчанию и хранятся в состоянии

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

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

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

JYbcOMZuVG3ZalGkakc-mETO8t0p8KNJin6K
Проверьте слово в словаре Scrabble

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

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

aDj0Di2Pw1a2mswM7RLXRuo67nIJ22fb4-tE
Найдите все возможные истинные английские слова по массиву букв

Вывод

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

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

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

YzhGBRF2K-Z9c8yUrtELsNILPMJlIa1NAu43
lesSwgRiwHVV0Y4WKx0M0hr6G84pnN9djrHU
Спасибо, что прочли!

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *