В этом уроке мы создадим онлайн-игру «камень, ножницы, бумага», используя 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-Fiyou-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/
А вот и ваша игра!