Über dieses Projekt

Wenn Sie ein Anfänger sind, können Sie im Arduino - Button Tutorial mehr über die Schaltfläche erfahren.

Ich habe hier ein ähnliches Projekt mit einfacherer Hardware (nur PHPoC) erstellt.

Demo

Datenfluss

Arduino ---> PHPoC WiFi Shield ---> Webbrowser

Zwei Leute spielen ein Spiel. Jedes Volk verwendet zwei Knöpfe, um die Richtung der Torhüter zu steuern. Daher brauchen wir vier Knöpfe.

Arduino liest die Zustände von vier Tasten. Wenn einer von ihnen geändert wird, berechnet Arduino die Bewegungsrichtung des Torwarts neu und sendet die Richtungswerte an PHPoC WiFi Shield. Beim Empfang der Werte sendet PHPoC WiFi Shield diese per Websocket an den Webbrowser. Die JavaScript-Funktion aktualisiert die Bewegungsrichtung der Torhüter.

Das JavaScript-Programm aktualisiert kontinuierlich die Position von Ball, Torhütern und Hindernissen basierend auf ihrer Richtung und überprüft auch Kollisionen.

Die Richtung der Torhüter wird basierend auf dem Zustand der Tasten geändert.

Beachten Sie Folgendes: PHPoC-Schild verfügt über ein integriertes Programm zum Übergeben von Daten von Arduino an den Webbrowser. Daher müssen wir uns nicht darum kümmern.

Was wir tun müssen

• WLAN-Informationen für PHPoC-Schild festlegen (SSID und Passwort)
• Neue Benutzeroberfläche auf PHPoC-Schild hochladen
• Arduino-Code schreiben

WLAN-Informationen für PHPoC Shield einstellen

Siehe diese Anleitung.

Neue Web-Benutzeroberfläche in PHPoC Shield hochladen

• Download des PHPoC-Quellcodes remote_game.php (im Codebereich).
• Laden Sie es mit dem PHPoC-Debugger gemäß dieser Anleitung auf den PHPoC-Schild hoch.

Beim Empfang einer HTTP-Anforderung vom Webbrowser interpretiert PHPoC Shield das PHP-Skript in dieser Datei und sendet die interpretierte Datei dann an den Webbrowser. Die interpretierte Datei (enthält HTML-, CSS- und JavaScript-Code) bietet eine UI (Benutzeroberfläche), aktualisiert die Position von Ball, Torhütern und Hindernissen basierend auf ihrer Richtung und überprüft auch Kollisionen. Es empfängt auch die Bewegungsrichtung der Torhüter vom Websocket.

Arduino-Code schreiben

• Installieren Sie die PHPoC-Bibliothek für Arduino (siehe Anleitung).
• Laden Sie Arduino-Code (im Codeabschnitt) auf Arduino hoch

Testen

• Klicken Sie auf die serielle Schaltfläche in der Arduino IDE, um die IP-Adresse anzuzeigen.
• Öffnen Sie den Webbrowser, geben Sie http:// ein replace_ip_address /remote_game.php
• Klicken Sie auf die Schaltfläche "Verbinden" und testen Sie es

Das beste Arduino Starter Kit für Anfänger

Siehe Das beste Arduino-Kit für Anfänger

Funktionsreferenzen

• pinMode()
• digitalRead()
• Seriell.begin()
• Serial.print()
• Seriell.println()

Code

• Arduino-Code
• PHPoC Shield-Code (remote_game.php)

Arduino-CodeArduino

#include "SPI.h"#include "Phpoc.h"PhpocServer server(80);boolean schonConnected =false; Void setup () { Serial.begin (9600); while(!Seriell); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("Spiel"); Serial.print("WebSocket-Serveradresse:"); Serial.println (Phpoc.localIP()); pinMode(6, EINGANG); pinMode (7, EINGANG); pinMode(8, EINGANG); pinMode(9, EINGANG); }int value_6 =digitalRead(6);int value_7 =digitalRead(7);int value_8 =digitalRead(8);int value_9 =digitalRead(9);int pre_dir_1 =0;int pre_dir_2 =0;int dir_1 =0;int dir_2 =0;void loop() { // Wenn der Client das erste Byte sendet, sag hallo:PhpocClient client =server.available(); if (client) { value_6 =digitalRead(6); value_7 =digitalRead(7); value_8 =digitalRead(8); value_9 =digitalRead(9); dir_1 =Wert_7 - Wert_6; dir_2 =Wert_9 - Wert_8; if(dir_1 !=pre_dir_1 || dir_2 !=pre_dir_2) { pre_dir_1 =dir_1; pre_dir_2 =dir_2; String txtMsg ="[" + String(dir_1) + ", " + String(dir_2) + "]\r\n"; char buf[txtMsg.length()+ 1]; txtMsg.toCharArray(buf, txtMsg.length() + 1); server.write(buf, txtMsg.length()); } }}

PHPoC Shield-Code (remote_game.php)PHP

PHPoC - Webbasiertes Spiel


WebSocket :null
Verbinden 

Schaltpläne