Мини-игра «Лего»: 5 шагов (с картинками)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Примерно год назад я написал инструкцию об установке группы светодиодов в Lego Mini Cooper. Нововведение в том, что светодиодами можно было управлять с помощью смартфона (или через любой веб-браузер, если на то пошло).

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

«Если он не был сломан, он починил его, пока он не был», в лучшем случае будет моей эпитафией, поэтому, когда Mini вернулся домой на Рождество, пришло время для Lego Mini 2.0. В конце концов, если Tesla сможет устанавливать обновления программного обеспечения на свои автомобили, насколько это может быть сложно?

У меня было несколько идей:

• Улучшение довольно неуклюжего пользовательского интерфейса
• Добавьте рог!
• Улучшена функция «автоматическое освещение»; и, самое главное
• Добавьте игровую функцию (даже я понимал, что новизна включения и выключения света Mini на вашем телефоне рано или поздно приедается)

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

После года бесплодных размышлений я наткнулся на проект на Hackster, в котором Arduino Uno используется для имитации игрушки Simon 1970-х годов для игры на память. Вкратце, устройство Simon воспроизводило последовательность огней, которую игрок затем должен был запомнить и воспроизвести, нажимая кнопки. После каждого успешного раунда длина последовательности увеличивалась.

Несмотря на то, что это был необходимый винтаж, я на самом деле никогда не слышал об этой игре, и я должен сказать, что это потрясающе то, что когда-то считалось развлечением. Еще более удивительно то, что игра Simon все еще продается и получает восторженные отзывы на Amazon. Ясно, что это должен был быть главный кандидат для адаптации для моих целей. В конце концов, у Mini уже были огни, поэтому все, что мне нужно было сделать, это отказаться от физических кнопок и предоставить пользователю ввод через смартфон. Поэтому со стороны программного обеспечения казалось, что это будет просто работа по вырезанию и вставке.

Но сначала мне нужно было внести небольшие изменения в оборудование.

Шаг 1. Компоненты, инструменты и ресурсы

Если вы копируете этот проект с помощью Lego Mini, вам понадобится все, что было в моем предыдущем руководстве. Единственное, что вам понадобится, это пассивный зуммер, который используется для звукового сигнала и для создания множества раздражающих шумов во время игры (которые можно отключить).

Как станет ясно при обсуждении программного обеспечения, нет никакой реальной необходимости использовать Lego Mini для игры. Вы можете использовать другой комплект Lego или даже несколько светодиодов на макетной плате, подключенной к любой плате разработки ESP8266. С некоторыми реле вы даже можете использовать освещение комнаты вашего дома. Дети, сначала спросите об этом своих родителей.

Точно так же не требуются никакие дополнительные инструменты или ресурсы, помимо перечисленных для исходного проекта.

Если вы относитесь к той горстке людей, которые читали первоначальное описание проекта, вы знаете, что Lego Mini изначально был куплен в качестве подарка моей взрослой дочери, у которой почти такой же «настоящий» Mini или почти такой же, как и можно сказать, что это New Mini, а не «Classic». Отсутствие каких-либо значимых дополнительных компонентов сделало этот новый проект еще более привлекательным, так как он позволил бы мне эффективно повторно подарить Lego Mini 2.0 в качестве нового рождественского подарка без каких-либо затрат. Гений!

Шаг 2: Модификация оборудования

Первоначальный проект имел внутренние светодиоды RGB с индивидуальным управлением. Они потребляли три контакта на NodeMCU, который я использовал в качестве отладочной платы. После дискретной консультации с владельцем Lego Mini было установлено, что светодиоды RGB используются недостаточно. Это была важная информация, потому что мне нужно было высвободить булавку для зуммера / рожка.

Приведенная выше принципиальная схема взята из оригинального проекта. Единственное изменение, которое потребовалось для этого проекта, заключалось в том, чтобы удалить светодиоды RGB и использовать три освобожденных контакта следующим образом:

• D1 для сигнала управления зуммером (который также подключен напрямую к источнику питания 5 В постоянного тока)
• D7 для белого внутреннего светодиода
• D8 для одного из тех мигающих цветных светодиодов, которые я назвал "дискотечный" светильник.

Сам зуммер аккуратно спрятан под моторным отсеком, поэтому протянуть провода обратно к NodeMCU было несложно.

Шаг 3: Обновление графического интерфейса

Первым шагом в обновлении графического интерфейса было создание четырех отдельных веб-страниц:

• "Заставка", которая запускается с помощью специального значка на вашем смартфоне и ссылается на другие страницы.
• Страница "Controls", которая, в общем, управляет светом (и теперь, конечно же, рогом)
• Страница "Игра"

• Страница настройки, которая содержит такие параметры конфигурации, как:

  • Включение и выключение звука
  • Установка часового пояса (Mini получает время из Интернета, поэтому он может мигать индикаторами в час с соответствующим временем)
  • Регулировка того, когда "автоматическое освещение" включает и выключает фары в зависимости от уровня окружающего освещения.
  • Сброс рекорда и имени игрока (хранится в EEPROM)

Такое разделение функций делает работу с приложением гораздо более похожей на приложение. Одна из проблем этого проекта - заставить NodeMCU обслуживать несколько страниц. Попробовав несколько разных подходов, я наткнулся на код, который вы видите в строках с 232 по 236 основного скетча Arduino. Это отлично работает - просто создайте свой индексный файл, затем назовите последующие страницы page1, page2 и т. Д. Я обнаружил, что мне пришлось поместить все файлы ресурсов (CSS и изображения) в корневую папку данных, но на самом деле это не проблема для сайтов этот размер.

Затем мне пришлось приступить к работе с CSS и Javascript, чтобы создать что-то, что выглядело бы как принадлежащее Lego Mini. Так как я почти ничего не знаю ни по одному из этих вопросов, здесь было много поисковиков в Google, прежде чем я получил то, что меня устраивало. Я начал с бессовестного копирования кубика лего в стиле CSS на CodePen здесь. Я также хотел уйти от маркировки кнопок текстом и в конечном итоге использовать простую графику из Icons8, которая идеально подходила для моих целей. Остальное вроде как встало на свои места. Страницы довольно хорошо отображаются на всех iPhone, на которых я их тестировал. Надеюсь, то же самое верно и для телефонов Android (выглядит нормально в браузере Chrome для настольных компьютеров).

Шаг 4: Код игры

Связь между сервером NodeMCU и браузером смартфона осуществляется через веб-сокеты. После нажатия кнопки пользователем браузер отправляет в NodeMCU текстовый символ, соответствующий одному или нескольким индикаторам Mini. Дополнительные персонажи отправляются для управления ходом игры. Затем код Arduino выполняет действия в зависимости от полученного символа. Связь через Websocket может обрабатывать только двоичные и текстовые символы, поэтому требуется некоторое преобразование для целых чисел (например, часового пояса).

Как я уже упоминал, изначально я ожидал использовать код из связанного проекта Hackster для основных функций игры. Я ожидал, что произойдет то, что после того, как игрок нажмет кнопку, соответствующий светодиод загорится, и код выполнит цифровое чтение на всех светодиодах, чтобы увидеть, горит ли правый (проект Hackster проверяет ввод физических кнопок, но это та же идея). Это вроде как сработало, но по причинам, которые мне до сих пор неясны, не идеально. Примерно в 10% случаев Mini скажет, что была нажата неправильная кнопка, хотя на самом деле была нажата правильная. Все выглядело нормально, судя по тому, что я мог видеть на последовательном мониторе и в консоли браузера, поэтому я понятия не имею, почему это не сработало.

После долгих попыток ввести некоторую проверку ошибок, я отказался от всей идеи считывания состояний светодиодов и создал массив «ответов», который проверяет, соответствует ли полученный текст Websocket правильному выводу, хранящемуся в массиве «последовательности», который проигрывает световую последовательность для запоминания. Это кажется на 100% надежным, даже если способ, которым я его реализовал, немного утомителен. Придумав этот метод, я наткнулся на это, которое представляет собой интересное исследование того, как работают некоторые цифровые замки, и аналогично подходу, используемому в игре.

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

Рекорд сохраняется в EEPROM (или в EEPROM в мире ESP8266), и если игрок набирает новый рекорд, всплывающее окно позволяет ему ввести имя по своему выбору, которое также сохраняется в EEPROM. Эти значения можно сбросить через страницу настройки (я уверен, что для этого могут быть законные причины).

С учетом всего сказанного, я повторно использовал приличный кусок игрового кода Hackster, что значительно ускорило процесс.

Шаг 5: остальная часть кода

По сравнению с кодом проекта Hackster мой эскиз Arduino выглядит огромным, даже без всех HTML, CSS и Javascript в файлах данных. Но основная часть наброска - это набор функций, относящихся к основным операциям, таким как создание и управление сервером, получение времени NTP, mDNS, обеспечение обновления по беспроводной сети, управление WiFi, управление файлами SPIFFS и тому подобное.

Javascript в файлах HTML в первую очередь предназначен для обработки сообщений Websocket (полученных и отправленных) и повышения интерактивности графического интерфейса.

Как я уже упоминал, я хотел улучшить функциональность функции «автоматическое освещение», которая использует зависимый от света резистор на единственном аналоговом выводе NodeMCU для обнаружения окружающего света и включения подсветки Mini на заданном уровне (когда он не находится в игровом режиме)., конечно). Хотя это очень легкомысленная функция в несерьезном проекте, меня беспокоило, что в исходном проекте я жестко запрограммировал порог включения и что у пользователя не было возможности увидеть, как преобладающий уровень освещенности связан с этим порогом. Теперь показания уровня освещенности отправляются на страницу настройки каждые пять секунд, и на этой странице также отображаются текущие пороговые значения для включения и выключения (которые могут быть настроены пользователем). Итак, работа над этим сделана.

Ой, чуть не забыл. Код находится здесь на GitHub. После загрузки поместите весь пакет в новую папку, загрузите скетч Arduino, затем содержимое папки данных в SPIFFS.