Construire un Jeu de Course de Voitures Web-Enabled avec Arduino et PHPoC Shield

Composants et fournitures

Arduino UNO	×	1
PHPoC Shield pour Arduino (ou PHPoC WiFi Shield)	×	1
Dongle USB WiFi (puce Ralink RT3070 ou RT5370) à connecter au PHPoC Shield. Ou simplement connectez un câble Ethernet au port Ethernet du shield, pas besoin de dongle WiFi.	×	1
Capteur d'angle rotatif (potentiomètre)	×	1

À propos de ce projet

Démonstration

Ce jeu classique peut nous faire ressentir une certaine nostalgie d'enfance. Le gameplay est simple : éviter de percuter les voitures adverses et marquer le maximum de points. La voiture peut changer entre 5 voies, et il y a 15 vitesses différentes. À mesure que la vitesse augmente, les voitures adverses roulent plus vite, rendant le jeu plus difficile.

Câblage

• Empilez le PHPoC shield sur l'Arduino.
• Connectez GND, VCC et SIG du capteur rotatif à GND, 5V et A0 de l'Arduino respectivement.

Flux de données

Arduino → PHPoC Shield → Navigateur Web

L'utilisateur interagit avec le capteur d'angle rotatif. La valeur du signal d'entrée est utilisée pour changer la position de la voiture.

L'Arduino lit la valeur du capteur. Les valeurs ADC d'entrée sont divisées en 5 niveaux différents. Changer de niveau signifie changer de voie. Simplement, si le signal d'entrée passe à un autre niveau, l'Arduino enverra le niveau mis à jour au PHPoC Shield.

À la réception de la valeur, le PHPoC WiFi Shield l'envoie au navigateur Web via WebSocket. Ensuite, une fonction JavaScript mettra à jour la position (voie) de la voiture. Le programme JavaScript mettra continuellement à jour la position des adversaires et la vitesse du jeu.

Choses à faire

• Configurer la connexion WiFi pour le PHPoC Shield (SSID et mot de passe)
• Téléverser la nouvelle interface utilisateur sur le PHPoC Shield
• Téléverser le code Arduino

Configurer la connexion WiFi pour le PHPoC Shield

Voir cette instruction.

Téléverser la nouvelle Interface Utilisateur Web sur le PHPoC Shield

• Télécharger le code source PHPoC remote_racing_game.php.
• Le téléverser sur le PHPoC Shield via PHPoC Debugger selon cette instruction.

Téléverser le Code Arduino

• Installer la bibliothèque PHPoC pour Arduino (voir instruction).
• Téléverser le code Arduino sur l'Arduino

Et enfin

• Cliquez sur le bouton série dans l'Arduino IDE pour obtenir l'adresse IP.
• Ouvrez un navigateur web, tapez https:// remplacez_adresse_ip_ici/remote_racing_game.php
• Cliquez sur le bouton connecter et profitez du jeu.

En savoir plus sur le potentiomètre avec Arduino - Tutoriel Potentiomètre

Références de fonctions

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

Code

Code Arduino

#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("Adresse serveur WebSocket : ");
  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 (Code PHPoC Shield)

<!DOCTYPE html>
<html>
<head>
<title>Arduino - Jeu Web</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>
// Code JavaScript complet du jeu (voir source original)
// Gestion WebSocket, dessin canvas, logique de jeu, détection collision, etc.
</script>
</head>
<body>
<center>
<p>
<h1>Arduino - Car Race </br> Brick Game</h1>
</p>
<canvas id="remote" width="500" height="400" Horizontal-align="middle";></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>