В этом уроке мы создадим онлайн-игру «камень, ножницы, бумага», используя ESP8266, Wia Dashboard и Github.

Что тебе понадобится

  • 2x ESP8266
  • 2x кабеля Micro USB - USB

Прежде чем начать, у вас должна быть учетная запись Wia. Вы можете создать его здесь.

Если вы еще не настроили ESP8266 с Arduino, вам нужно будет сделать это в первую очередь. Этот учебник покажет вам, как это сделать.

Начиная

Сначала подключите USB-кабель к одному из ESP8266 и подключите его к компьютеру или ноутбуку.

Откройте IDE Arduino. Вы можете скачать последнюю версию здесь. В Arduino IDE создайте новый эскиз и сохраните его как playerOne.ino. Создайте второй эскиз и назовите его playerTwo.ino.

Затем перейдите к панели инструментов Wia, создайте новые space и add device. Назовите его что-нибудь вроде playerOne.

После добавления устройства перейдите на вкладку Devices в левой части страницы. Выберите свое устройство, затем перейдите на вкладку configuration. Вы увидите идентификатор своего устройства, а также свой device_secret_key. Секретный ключ устройства понадобится вам позже.

Код

Скопируйте и вставьте следующий код в свой скетч Arduino с именем playerOne.ino.

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266HTTPClient.h>
#define USE_SERIAL Serial
ESP8266WiFiMulti WiFiMulti;
const char* ssid     = "name-of-your-Wifi";
const char* password = "your-Wifi-Password";
// get this from the wia dashboard. it should start with `d_sk`
const char* device_secret_key = "your-device-secret-key";
boolean buttonState = HIGH;
boolean buttonDown = false;
void setup() {
  // put your setup code here, to run once:
  pinMode(0, INPUT);
  Serial.begin(115200);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for native USB port only
  }
  WiFi.mode(WIFI_STA);
  WiFiMulti.addAP(ssid, password);
}
void loop() {
  // put your main code here, to run repeatedly:
  buttonState = digitalRead(0);
  // check if the pushbutton is pressed.
  // if it is, the buttonState is LOW:
  if (buttonState == LOW) {
    if (buttonDown == false) {
      Serial.println("Button Pushed");
      buttonDown = true;
      postToWia();
      delay(750);
    }
  } else {
    buttonDown = false;
  }
}
void postToWia() {
  // wait for WiFi connection
  if((WiFiMulti.run() == WL_CONNECTED)) {
    HTTPClient http;
    USE_SERIAL.print("[HTTP] begin...\n");
    // configure wia rest api
    http.begin("http://api.wia.io/v1/events");
    USE_SERIAL.print("[HTTP] POST...\n");
    // set authorization token
    http.addHeader("Authorization", "Bearer " + String(device_secret_key));
    // set content-type to json
    http.addHeader("Content-Type", "application/json");
    // start connection and send HTTP headers. replace name and data values with your own.
    int httpCode = http.POST("{\"name\":\"buttonPress\"}");
    // httpCode will be negative on error
   
    if(httpCode > 0) {
        // HTTP header has been send and Server response header has been handled
        USE_SERIAL.printf("[HTTP] POST... code: %d\n", httpCode);
        // file found at server
        if(httpCode == HTTP_CODE_OK) {
            String payload = http.getString();
            USE_SERIAL.println(payload);
        }
    } else {
        USE_SERIAL.printf("[HTTP] POST... failed, error: %s\n", http.errorToString(httpCode).c_str());
    }
    http.end();
  }
}

Измените следующие значения:

  • name-of-your-WiFi на имя вашего Wi-Fi. Это должна быть та же сеть Wi-Fi, которую использует ваш компьютер.
  • your-WiFi-password к паролю вашей сети Wi-Fi
  • you-device-secret-key к секретному ключу вашего устройства, который находится на панели инструментов Wia в разделе Devices > Configuration

Загрузите код на свое устройство, щелкнув upload в среде Arduino IDE. Затем отложите устройство в сторону. Помните, что это устройство playerOne и содержит код playerOne.

Подключите второе устройство к компьютеру и добавьте его в свое пространство на панели инструментов Wia. У этого устройства будет совершенно другой device-secret-key. Соберите ключ на вкладке конфигурации. Скопируйте и вставьте предыдущий код в файл Arduino playerTwo.ino, но измените device-secret-key, чтобы он соответствовал второму устройству.

Загрузите код из файла playerTwo.ino на второе устройство.

Wia Flows

Теперь на панели инструментов Wia щелкните Flows на левой боковой панели. Создайте новый поток и назовите его как хотите.

Перетащите значок Event на вкладке триггера и назовите его buttonPress. Выберите оба устройства.

На вкладке logic перетащите узел run-function. Перетащите желтую точку с узла Event на узел run-function. В поле скопируйте и вставьте этот код:

var items = [
    '🗿',
    '📜',
    '✂'
];
var item = items[Math.floor(Math.random()*items.length)];
output.body.data = item;

Ваш экран должен выглядеть так:

Щелкните Update.
Затем на вкладке action перетащите event и назовите его emoji. Чтобы соединить узлы, перетащите оранжевые точки. Ваш экран должен выглядеть так:

Затем перейдите к Devices > playerOne. Вы перейдете на страницу обзора вашего устройства. В правом углу щелкните add a widget. Напишите emoji для названия и emoji для события. Затем вернитесь к Devices на боковой панели и выберите свое устройство для playerTwo. Создайте новый виджет и напишите emoji для заголовка и emoji для события.

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

Однако перемещение между двумя устройствами не является эффективным способом игры. Итак, мы должны создать веб-страницу, которая будет показывать нам результат выбора каждого игрока одновременно.

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

Страница в Интернете

Начните с входа в Github. Создайте новый репозиторий и назовите его your-github-username.github.io. Установите флажок initialize with a README.

Создав репозиторий, откройте его. Щелкните create new file. Скопируйте и вставьте приведенный ниже код в файл с именем index.html. Файл должен называться index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wia Game</title>
  </head>
  <body>
    <h1>Wia Rock Paper Scissors</h1>
  </body>
</html>

Это шаблон HTML. Чтобы видеть обновления нашей игры в режиме реального времени, нам нужно встроить наши виджеты из Wia. Вернувшись на панель управления Wia, перейдите к одному из двух плееров. В обзоре вы можете увидеть свой виджет. Щелкните поле со стрелкой в ​​правом верхнем углу виджета. Выберите настройку anyone can view this widget. Скопируйте код вставки виджета. Код начинается с ‹iframe› и заканчивается ‹/iframe›.

Вернувшись в GitHub, отредактируйте файл index.html. Вставьте код виджета под заголовком <h1>Wia Rock Paper Scissors</h1>.

Повторите это с виджетом для другого устройства. Теперь ваш HTML-файл должен выглядеть так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wia Game</title>
  </head>
  <body>
    <h1>Wia Rock Paper Scissors</h1>
    <iframe> YOUR WIDGET </iframe>
    <iframe> YOUR SECOND WIDGET </iframe>
  </body>
  </html>

Чтобы просмотреть свою новую веб-страницу, перейдите на https://your-github-username.github.io/

А вот и ваша игра!