Webbasiertes Zwei-Personen-Spiel mit Arduino UNO & PHPoC WiFi Shield

Komponenten und Zubehör

Komponente	Menge
Arduino UNO	1
PHPoC WiFi Shield für Arduino	1
Taster	4
Steckbrett	1
Widerstand 10 kΩ	1
Schrumpfschlauch	1

Über dieses Projekt

Wenn Sie Anfänger sind, können Sie sich über den Button in Arduino – Button Tutorial informieren.

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

Demo

Datenfluss

Arduino → PHPoC WiFi Shield → Webbrowser

Zwei Personen spielen das Spiel. Jeder nutzt zwei Tasten, um die Torhüter zu steuern. Daher benötigen wir vier Tasten.

Der Arduino liest die Zustände der vier Tasten. Wenn sich einer ändert, berechnet der Arduino die Bewegungsrichtung der Torhüter neu und sendet die Richtungswerte an das PHPoC WiFi Shield. Beim Empfang sendet das Shield sie via WebSocket an den Webbrowser. Eine JavaScript-Funktion aktualisiert die Bewegungsrichtung der Torhüter.

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

Die Richtung der Torhüter ändert sich basierend auf dem Tastenzustand.

Hinweis: Der PHPoC Shield hat ein integriertes Programm, um Daten vom Arduino an den Webbrowser weiterzuleiten. Daher müssen wir uns darum nicht kümmern.

Was wir tun müssen

• WLAN-Informationen für PHPoC Shield einrichten (SSID und Passwort)
• Neue UI auf PHPoC Shield hochladen
• Arduino-Code schreiben

WLAN-Informationen für PHPoC Shield einrichten

Siehe diese Anleitung.

Neue Web-UI auf PHPoC Shield hochladen

• PHPoC-Quellcode remote_game.php herunterladen (im Code-Bereich)
• Auf PHPoC Shield hochladen mit PHPoC Debugger gemäß dieser Anleitung

Bei HTTP-Anfrage vom Webbrowser interpretiert der PHPoC Shield das PHP-Skript in dieser Datei und sendet die interpretierte Datei (enthält HTML, CSS, JavaScript) an den Browser. Diese stellt die UI bereit, aktualisiert Positionen von Ball, Torhütern, Hindernissen, prüft Kollisionen und empfängt die Bewegungsrichtung der Torhüter via WebSocket.

Arduino-Code schreiben

• PHPoC Library für Arduino installieren (siehe Anleitung)
• Arduino-Code (im Code-Bereich) auf Arduino hochladen

Testen

• Seriellen Monitor in Arduino IDE öffnen, um die IP-Adresse zu sehen
• Webbrowser öffnen, https:// ip_adresse_ersetzen /remote_game.php eingeben
• Auf „Connect“ klicken und testen

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

Siehe The Best Arduino Kit for Beginners

Funktionsreferenzen

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

Code

Arduino Code

#include "SPI.h"
#include "Phpoc.h"

PhpocServer server(80);
boolean alreadyConnected = false;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("game");
  Serial.print("WebSocket Server Adresse: ");
  Serial.println(Phpoc.localIP());
  pinMode(6, INPUT);
  pinMode(7, INPUT);
  pinMode(8, INPUT);
  pinMode(9, INPUT);
}

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() {
  PhpocClient client = server.available();
  if (client) {
    value_6 = digitalRead(6);
    value_7 = digitalRead(7);
    value_8 = digitalRead(8);
    value_9 = digitalRead(9);
    dir_1 = value_7 - value_6;
    dir_2 = value_9 - value_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)

<!DOCTYPE html>
<html>
<head>
  <title>PHPoC - Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
  <style>
    body { text-align: center; font-size: 15pt; font-family: Arial, Helvetica, sans-serif; }
    h1 { font-weight: bold; font-size: 25pt; }
    h2 { font-weight: bold; font-size: 15pt; }
    button { font-weight: bold; font-size: 15pt; }
  </style>
  <script>
    // ... JavaScript Game-Logik (Ball, Torhüter, Hindernisse, Kollision, WebSocket)
    // Vollständiger Code im Original
  </script>
</head>
<body>
  <center>
    <p><h1>PHPoC - Web-basiertes Spiel</h1></p>
    <canvas id="remote" width="400" height="500"></canvas>
    <h2>
      <p> WebSocket: <span id="ws_state">null</span> </p>
      <button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
    </h2>
  </center>
</body>
</html>

Schaltpläne

1. PHPoC WiFi Shield oder PHPoC Shield auf Arduino stecken
2. Verkabelung wie im Bild unten