Bouw een Web-based Tweespelersspel met Arduino UNO & PHPoC WiFi Shield

Onderdelen en benodigdheden

Over dit project

Als je beginner bent, kun je leren over knoppen in Arduino - Knop Tutorial.

Ik maakte een vergelijkbaar project met simpelere hardware (alleen PHPoC) hier.

Demo

Data-stroom

Arduino → PHPoC WiFi Shield → Webbrowser

Er zijn twee spelers. Iedereen gebruikt twee knoppen om de richting van de keepers te besturen. We hebben dus vier knoppen nodig.

De Arduino leest de toestand van de vier knoppen. Als er een verandering is, herberekent de Arduino de bewegingsrichting van de keepers en stuurt de richtingswaarden naar de PHPoC WiFi Shield. Bij ontvangst stuurt de PHPoC WiFi Shield deze naar de webbrowser via websocket. De JavaScript-functie werkt de bewegingsrichting van de keepers bij.

Het JavaScript-programma werkt continu de positie van de bal, keepers en obstakels bij op basis van hun richting en controleert botsingen.

De richting van de keepers verandert op basis van de toestand van de knoppen.

Let op: De PHPoC-shield heeft een ingebouwd programma om data van Arduino naar de webbrowser door te geven. We hoeven ons er dus niet om te zorgen.

Wat we moeten doen

• WiFi-informatie instellen voor PHPoC-shield (SSID en wachtwoord)
• Nieuwe UI uploaden naar PHPoC-shield
• Arduino-code schrijven

WiFi-informatie instellen voor PHPoC Shield

Zie deze instructie.

Nieuwe Web UI uploaden naar PHPoC Shield

• Download PHPoC-broncode remote_game.php (in code-sectie)
• Upload het naar PHPoC-shield met PHPoC debugger volgens deze instructie

Bij ontvangst van een HTTP-verzoek van de webbrowser, interpreteert de PHPoC Shield het PHP-script in dit bestand en stuurt het geïnterpreteerde bestand naar de webbrowser. Het geïnterpreteerde bestand (bevat HTML, CSS en JavaScript) biedt de UI, werkt de positie van bal, keepers en obstakels bij en controleert botsingen. Het ontvangt ook de bewegingsrichting van de keepers via websocket.

Arduino-code schrijven

• Installeer PHPoC-bibliotheek voor Arduino (zie instructie)
• Upload Arduino-code (in code-sectie) naar Arduino

Testen

• Klik op de seriële knop in Arduino IDE om het IP-adres te zien
• Open webbrowser, typ https:// vervang_ip_adres /remote_game.php
• Klik op connect-knop en test het

De Beste Arduino Starterkit voor Beginners

Zie De Beste Arduino Kit voor Beginners

Functiereferenties

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

Code

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

Arduino-codeArduino

#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 adres: ");
  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)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>
  // ... volledige JavaScript game-logic voor tweespelers keeper-spel ...
  // Zie originele code voor complete implementatie
</script>
</head>
<body>
<center>
  <p><h1>PHPoC - Web-based Game</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>

Schema's

1. Stapel PHPoC WiFi shield of PHPoC shield op Arduino
2. Bedraad zoals in onderstaande afbeelding