Или как во всем есть закономерности.

Сделав первые пробные шаги в интерфейсной разработке, часы учебных занятий, лекций и уроков скоро прибавятся; пока не появилась одна невзрачно выглядящая лаборатория - «Режим проекта JavaScript» - Что это было?

Краткое описание: найдите общедоступный API и с его помощью создайте что-нибудь на одной странице. Было еще несколько предостережений, но это определенно звучало достаточно просто. Я решил войти в «Режим проекта», потратив некоторое время на то, чтобы подумать о том, что было одновременно проблемой и находилось в пределах моих возможностей новичка; и пока я праздно играл с моей дочерью в игру на сопоставление воспоминаний, меня осенило.

Игры на сопоставление памяти, в которых пары объектов раскладываются и закрываются, и вы должны выбрать правильные пары, занимая развлечение для моего двухлетнего ребенка, а для меня это сложный проект.

Разбив идею, я составил себе список покупок, который нужно найти, API, который мог бы предоставлять изображения, средство для создания нескольких карточек на экране, перетасовки картинок, создания кликабельных карточек, подбадривания, когда все они совпадают, и как Эйс Риммер однажды сказал: «Выкури мне копченую рыбу, я вернусь к завтраку».

Актуальный отрывок, очень похожий на злоключения команды Red Dwarf, то, что казалось таким простым, оказалось немного сложнее.

Запуск сборки

Этап идей и исследования

Краеугольным камнем моих первых попыток во внешней разработке были манипуляции с DOM и создание элементов на веб-странице динамичным и отзывчивым образом. Так что создание некоторых грубых «игральных карт» казалось хорошей отправной точкой. Это действительно было правильно. Однако небольшие блоки с цифрами от 1 до 8 были не из самых увлекательных игр.

Пора поразить поисковые системы и найти некоторые общедоступные API, есть несколько фантастических людей, которые обновляют и поддерживают различные репозитории на GitHub со ссылками на API, которые можно использовать бесплатно (в образовательных целях, конечно!), Это было во время поиска Когда я ответил на свой вопрос - где найти картинки в офлайновом мире? - мои первоначальные мысли привели меня в Художественные галереи, я взглянул на API, принадлежащий Метрополитену и Художественному институту Чикаго, оба из которых имеют фантастическую коллекцию изображений и хорошо задокументированы API. Именно в этот момент моя прекрасная двухлетняя дочь ворвалась в мой офис и захотела узнать, что я делаю, и почему я смотрю на фотографии, которые (ее мнение, а не мое) были скучными.

Поэтому я сделал то, что сделал бы любой уважающий себя родитель, который хотел бы продолжить свою работу, и спросил: У Элл Доттс, что бы вы нашли интересным?. ответ: Pokepines, пояснив, что она действительно имела в виду Pokémon, я полагаю, что мне пришлось искать другой тип API, чтобы выполнить ее запрос. К счастью, существует фантастическое Poké-сообщество, а API блестяще поддерживается на pokeapi.co. Быстрое ознакомление с документацией API, и у меня было около 1100 покемонов и их изображения всего в одном запросе GET.
Или так я подумал ...

Pokeapi - отличный ресурс, и запрос GET для Pokémon к API возвращает первые 20 из 1100 или около того. Первая проблема, с которой я столкнулся, заключалась в том, что результирующий ответ JSONified для каждого покемона выглядел следующим образом:

{name: "pikachu", url: "https://pokeapi.co/api/v2/pokemon/25/"}

Что (если вы перейдете по ссылке выше!) Действительно является именем покемона и URL-адресом, на который можно получить еще один ответ JSON для отдельного покемона, который содержит гораздо больше деталей, в данном случае, о нашем друге Пикачу. Использование этого стартового API было очень похоже на получение доступа к модному автомобилю, с одной оговоркой, вам нужно сделать свой собственный ключ, чтобы получить желаемую производительность.

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

let randomPokemonId = function(){
return Math.floor(Math.random() * 151)
}

Замечательный материал!

Случайно (или это так?)

" действительно ли это случайно?" этап

С моей красивой игровой доской, набитой картами с разными покемонами, я сделал то, что сделал бы любой тестер функций, и нажал f5, чтобы обновить игровое поле, чтобы увидеть, дает ли он один и тот же набор карт для соответствия каждый раз. Не похоже. Базовый массив gameDeck выглядит примерно так:

gameArray = [...randomPokemonArray, ...randomPokemonArray]

GameArray при console.logged выдавал список из восьми покемонов, а затем второго в идентичных позициях. Хотя код работал так, как я ожидал, игровая доска, отображаемая на экране, сильно отличалась от массива.

Я довольно поздно закончил тестирование, поэтому лег спать, довольный тем, что мой массив был действительно случайным. (рассказчик - не было). Оглядываясь назад, можно сказать, что я обращался к массиву в пиковое время в США и ЕС, что приводило к разным задержкам при выполнении запросов GET для каждой карты, что означало, что некоторые визуализировались быстрее, чем другие, и создавало иллюзию случайности. На следующее утро (в субботу около 4 часов утра по восточному стандартному времени) это стало очевидным. Когда-то мой случайный массив представлял собой пары карточек в почти одинаковых местах, не один, два… десять раз подряд. Это должно быть одна из тех проблем, о которых я упоминал ранее.

Чтобы обойти эту проблему, наивный я подумал, что это будет простой процесс, используйте функцию Array.prototype.shuffle (), и только что созданную доску можно будет перетасовать и раздать так же быстро и плавно, как в игре в покер в Вегасе. Как и все новички в программировании фреймворков, я поискал документацию в MDN.

Как обнаружил мой хороший друг Гру (см. Рис.), В JavaScript нет собственной команды array.shuffle (). О бобы.

Когда я почесал в затылке и расширил свой поиск от документации MDN до поиска в Google и переполнения стека, я наткнулся на метод Фишера-Йейтса (или Кнута) для перетасовки массива.

Метод Фишера-Йейтса широко считается лучшим способом перемешивания массива в JavaScript. По сути, он работает с конца массива и меняет местами последний элемент со случайным элементом в исходной части массива, например. если array.length было 10, элемент в [9] поменяется местами с элементом в позициях [0] - [8], перемешивание использует цикл while для обратного отсчета массива, и теперь элемент находится в [9] ] уже был перетасован, теперь он начинается с позиции [8] и следует по тому же шаблону до тех пор, пока не будет достигнут [0], в результате чего содержимое массива будет перетасовано.

Сделав это и выполнив код отладки в своих функциях, я был уверен, что у меня есть перетасованный массив, см. Зарегистрированные массивы в сущности ниже, которую я принял как подтверждение:

Однако, если вы присмотритесь, некоторые магмара остаются на месте, Молтрес нашел еще один, чтобы стоять рядом, что при помещении его на игровое поле может привести к «предсказуемому» шаблон для этого игрового раунда.

GameArray случайный, может не выглядеть, но это так, и в этом красота человеческого мозга. Мы всегда будем стремиться упорядочить то, что видим, путем поиска закономерностей. Даже если вы знаете, что тема действительно случайна. Однако вы можете получить такие экземпляры (!):

Вот ссылка на мое репозиторий на github для этого проекта: - здесь!

Я также сделал демонстрационное видео, которое доступно: - здесь!

Не стесняйтесь обращаться к нам по поводу сборки, я хотел бы услышать ваши мысли.