Bouw een Web-ingeschakelde Arduino Auto Race Brick Game

Onderdelen en benodigdheden

• Arduino UNO – 1 stuk
• PHPoC Shield voor Arduino – 1 stuk (PHPoC Shield of PHPoC WiFi Shield)
• USB WiFi dongle – 1 stuk (Ralink RT3070/RT5370 chipset, aan PHPoC Shield. Of gewoon Ethernetkabel aan PHPoC Shield, dan geen dongle nodig)
• Draaihoek-sensor (potentiometer) – 1 stuk

Over dit project

Demo

Deze klassieker roept nostalgische jeugdherinneringen op. Spelregels: vermijd tegenstander-auto's en behaal zo veel mogelijk punten. De auto kan schakelen tussen 5 banen, en er zijn 15 snelheidsniveaus. Hoe hoger de snelheid, des te sneller de tegenstanders, des te moeilijker het spel.

Bedrading

• PHPoC Shield op Arduino steken.
• Draaihoek-sensor: GND, VCC, SIG → Arduino GND, 5V, A0.

Data Flow

Arduino → PHPoC Shield → Webbrowser

Gebruiker bedient draaihoek-sensor. De invoerwaarde bepaalt de auto-positie (baan).

Arduino leest de sensorwaarde. ADC-waarden worden verdeeld in 5 niveaus. Wisselen tussen niveaus = baan wisselen. Als signaal naar ander niveau schakelt, stuurt Arduino het bijgewerkte niveau naar PHPoC Shield.

PHPoC WiFi Shield stuurt waarde via WebSocket naar webbrowser. JavaScript werkt de auto-positie bij. JavaScript updatet continu tegenstander-posities en spel-snelheid.

Te doen

• WiFi-verbinding instellen voor PHPoC Shield (SSID/wachtwoord)
• Nieuwe UI uploaden naar PHPoC Shield
• Arduino-code uploaden

WiFi instellen voor PHPoC Shield: Zie instructies.

Web UI uploaden naar PHPoC Shield:

• Download remote_racing_game.php
• Upload via PHPoC Debugger (zie instructies)

Arduino-code uploaden:

• Installeer PHPoC Library voor Arduino (zie instructies)
• Upload Arduino-code

En tenslotte

• Klik Serial Monitor in Arduino IDE voor IP-adres.
• Open browser: https://<ip-adres>/remote_racing_game.php
• Klik "Connect" en speel!

Meer over potentiometer: Potentiometer Tutorial

Functiereferenties

• pinMode()
• analogRead()
• digitalWrite()
• Serial.begin()
• Serial.println()
• for loop
• while loop
• if else
• loop()
• setup()

Code

Arduino-code

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

PhpocServer server(80);
int adcPin = A0;
float adcVal = 0;
int lastPos = -1;
float adcMin = 512 - 2.5 * 100;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("game");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    adcVal = 0;
    for(int i = 0; i < 50; i++) adcVal += analogRead(adcPin);
    adcVal /= 50;
    int pos = (int)((adcVal - adcMin) / 100);
    if (pos < 0) pos = 0;
    else if (pos > 4) pos = 4;
    
    if(lastPos != pos) {
      String txtMsg = String(pos) + "\r\n";
      char buf[txtMsg.length()];
      txtMsg.toCharArray(buf, txtMsg.length());
      server.write(buf, txtMsg.length());
      Serial.println(txtMsg);
      lastPos = pos;
      delayMicroseconds(50);
    }
  }
}

remote_racing_game.php (PHP/JavaScript voor PHPoC Shield)

<!DOCTYPE html>
<html>
<head>
  <title>Arduino - Web-based 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 (zie origineel) ...
    // Bevat: canvas tekenen, WebSocket communicatie, game loop, botsing detectie, score, levels, etc.
  </script>
</head>
<body>
  <center>
    <p><h1>Arduino - Car Race </br> Brick Game</h1></p>
    <canvas id="remote" width="500" height="400"></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>

De volledige JavaScript-code is uitgebreid. Zie originele projectpagina voor de complete remote_racing_game.php.