Créer un jeu web à deux joueurs avec Arduino UNO et shield PHPoC WiFi

Composants et fournitures

Composant	Quantité
Arduino UNO	1
Shield PHPoC WiFi pour Arduino	1
Bouton poussoir	4
Plaque d'essai (breadboard)	1
Résistance 10 kΩ	1
Gaine thermorétractable	1

À propos de ce projet

Si vous êtes débutant, consultez le tutoriel sur les boutons avec Arduino.

J'ai réalisé un projet similaire avec du matériel plus simple (PHPoC seul) ici.

Démonstration

Flux de données

Arduino → Shield PHPoC WiFi → Navigateur web

Deux joueurs, chacun utilisant deux boutons pour contrôler la direction de son gardien de but. Il faut donc quatre boutons au total.

L'Arduino lit l'état des quatre boutons. Si l'un change, il recalcule la direction des gardiens et envoie les valeurs au shield PHPoC WiFi. Ce dernier les transmet au navigateur via WebSocket. Le JavaScript met à jour la direction des gardiens.

Le programme JavaScript met à jour en continu la position de la balle, des gardiens et des obstacles selon leurs directions et vérifie les collisions.

La direction des gardiens change selon l'état des boutons.

Note : Le shield PHPoC possède un programme intégré pour transférer les données de l'Arduino vers le navigateur. Nous n'avons pas à nous en soucier.

Ce qu'il faut faire

• Configurer les informations WiFi pour le shield PHPoC (SSID et mot de passe)
• Téléverser la nouvelle interface utilisateur sur le shield PHPoC
• Écrire le code Arduino

Configuration WiFi du shield PHPoC

Suivez cette instruction.

Téléverser la nouvelle interface web sur le shield PHPoC

• Téléchargez le code source PHPoC remote_game.php (section code).
• Téléversez-le sur le shield via PHPoC Debugger selon cette instruction.

Lorsqu'une requête HTTP arrive du navigateur, le shield interprète le script PHP et renvoie le fichier interprété (HTML, CSS, JavaScript) qui fournit l'interface, met à jour les positions, gère les collisions et reçoit les directions via WebSocket.

Écrire le code Arduino

• Installez la bibliothèque PHPoC pour Arduino (voir instruction).
• Téléversez le code Arduino (section code).

Test

• Ouvrez le moniteur série sur l'IDE Arduino pour voir l'adresse IP.
• Dans le navigateur, tapez https:// remplacez_par_adresse_ip /remote_game.php
• Cliquez sur « Connect » et testez.

Le meilleur kit de démarrage Arduino pour débutant

Voir Le meilleur kit Arduino pour débutants.

Références de fonctions

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

Code

Code Arduino

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

Code PHPoC Shield (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>
  // ... Code JavaScript complet pour l'interface de jeu ...
  // Gestion WebSocket, animation canvas, détection collisions, contrôle gardiens
</script>
</head>
<body>
  <center>
    <p><h1>PHPoC - Jeu web</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>

Schéma

1. Empilez le shield PHPoC WiFi sur l'Arduino
2. Câblez comme indiqué ci-dessous