Основы робототехники

Создаем игру для двоих на основе Ардуино и веб-интерфейса

Содержание

Создадим на основе Ардуино онлайн-игру для двоих игроков с использованием веб-интерфейса. Мы уже делали такую игру на основе платформы PHPoC, но для понимания создадим аналогичный проект на Ardunio.

Комплектующие

В прошлый раз игра была реализована на основе аппаратной платформы PHPoC (PHP on Chip), о которой у нас была отдельная статья. Но мы хотели показать любителям Ардуино как сделать аналогичную игру на основе этой платы Uno, которую мы будем использовать вместо PHPoC Blue.

    × 1

  1. PHPoC WiFi шилд для Arduino × 1
  2. Кнопки × 4
  3. Макетная плата × 1
  4. Резистор 10 кОм × 1

Идея проекта

В игру играют два человека. каждый человек использует две кнопки для управления вратарями. Поэтому нам нужны четыре кнопки.

Arduino считывает состояния четырех кнопок. Если какая-либо из них будет нажата, Arduino пересчитает направление движения вратаря и отправит значения направления в PHPoC WiFi Shield. При получении значений PHPoC WiFi Shield отправляет его в веб-браузер через веб-сокет. Функция JavaScript будет обновлять направление движения вратарей.

Arduino — PHPoC WiFi Shield — Web browser

Программа JavaScript будет постоянно обновлять положение мяча, вратарей и препятствий в зависимости от их направления, а также проверять столкновение с препятствиями и вратарями.

Направление вратарей меняется в зависимости от состояния кнопок.

Обратите внимание! PHPoC Shield имеет встроенную программу для передачи данных из Arduino в веб-браузер. Поэтому нам не нужно заботиться об этом.

Схема соединения

Соединяем PHPoC Wi-Fi или PHPoC шилд к Arduino. Собираем всё согласно схеме ниже:

Что надо сделать

  1. Установить информацию о WiFi для щита PHPoC (SSID и пароль)
  2. Загрузить новый UI (пользовательский интерфейс) в PHPoC Shield
  3. Написать код Arduino

Настройка WiFi

Существующие шилды Arduino Ethernet и WIFI устанавливают IP-адрес и MAC-адрес в исходных кодах. В отличие от этих экранов, PHPoC WiFi Shield для Arduino предоставляет функцию, которая управляет параметрами среды, относящимися к сети самого шилда. Таким образом, его использование делает исходные коды Arduino более лаконичными.

Настроим параметры беспроводной сети в PHPoC WiFi Shield для Arduino. Для подключения к беспроводной локальной сети требуется смартфон или ноутбук.

1. Подключите PHPoC WiFi Shield для Arduino к вашему Arduino.

2. Подаем питание на Arduino.

3. Вставляем USB WIFI модем в шилд.

4. Нажмите кнопку SETUP один раз.

5. С помощью ноутбука или смартфона подключитесь к беспроводной сети, которая начинается с phpoc_.

6. Запустите веб-браузер, если он правильно подключен к беспроводной локальной сети.

7. Подключитесь к шилду, введя 192.168.0.1 в адресной строке.

8. После подключения к странице настройки (setup) вы можете настроить сетевое окружение.

9. Ниже экран страницы базовой настройки.

Загрузка веб-интерфейса в PHPoC Shield

Нам нужно сделать следующее:

  1. Загрузить исходный код PHPoC remote_game.php, который есть ниже.
  2. Загрузить код в шилд PHPoC с помощью отладчика PHPoC — PHPoC Debugger (ссылка).

Код файла remote_game.php:

При получении HTTP-запроса от веб-браузера PHPoC Shield интерпретирует PHP-скрипт в этом файле, а затем отправляет интерпретированный файл в веб-браузер.

Интерпретированный файл (содержит HTML, CSS и код JavaScript) обеспечивает интерфейс пользователя (UI), обновляет положение мяча, вратарей и препятствий в зависимости от их направлений, а также проверяет столкновения. Он также получает направление движения вратарей от websocket.

Написание кода Arduino

  1. Установить библиотеку PHPoC (ссылка) для Arduino (инструкция по установке библиотек).
  2. Загрузить код Arduino на плату.

Код для Ардуино:

Тестирование и итог

  • Нажмите кнопку serial на Arduino IDE, чтобы увидеть IP-адрес.
  • Откройте веб-браузер, введите: http://<укажите_нужный_адрес>/remote_game.php .
  • Нажмите кнопку подключения и протестируйте.

На этом всё. В следующих уроках мы подробнее поговорим об отладчике PHPoC.


Источник: arduinoplus.ru