Arduino - Jeu Web à deux joueurs
Composants et fournitures
![]() |
| × | 1 | |||
![]() |
| × | 1 | |||
| × | 4 | ||||
![]() |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
À propos de ce projet
Si vous êtes un débutant, vous pouvez en apprendre davantage sur le bouton dans Arduino - Button Tutorial.
J'ai fait un projet similaire en utilisant du matériel plus simple (uniquement PHPoC) ici.
Démo
Flux de données
Arduino ---> PHPoC WiFi Shield ---> Navigateur Web
Il y a deux personnes qui jouent au jeu. chaque personne utilise deux boutons pour contrôler la direction des gardiens de but. Par conséquent, nous avons besoin de quatre boutons.
Arduino lit les états de quatre boutons. Si l'un d'entre eux est modifié, Arduino recalculera la direction de déplacement du gardien de but et enverra les valeurs de direction à PHPoC WiFi Shield. Lors de la réception des valeurs, PHPoC WiFi Shield les envoie au navigateur Web via une prise Web. La fonction JavaScript mettra à jour la direction de déplacement des gardiens de but.
Le programme JavaScript mettra continuellement à jour la position du ballon, des gardiens de but et des obstacles en fonction de leur direction et vérifiera également la collision.
La direction des gardiens de but est modifiée en fonction de l'état des boutons.
Notez que : PHPoC shield dispose d'un programme intégré pour transmettre les données d'Arduino au navigateur Web. Par conséquent, nous n'avons pas besoin de nous en soucier.
Ce que nous devons faire
- Définir les informations WiFi pour le bouclier PHPoC (SSID et mot de passe)
- Télécharger la nouvelle interface utilisateur vers le bouclier PHPoC
- Écrire le code Arduino
Définition des informations WiFi pour PHPoC Shield
Voir cette instruction.
Télécharger la nouvelle interface utilisateur Web vers PHPoC Shield
- Télécharger le code source PHPoC remote_game.php (dans la section code).
- Téléchargez-le sur PHPoC shield à l'aide du débogueur PHPoC conformément à cette instruction.
Lors de la réception d'une requête HTTP du navigateur Web, PHPoC Shield interprète le script PHP dans ce fichier, puis envoie le fichier interprété au navigateur Web. Le fichier interprété (contient du code HTML, CSS et JavaScript) fournit une interface utilisateur (interface utilisateur), met à jour la position du ballon, des gardiens et des obstacles en fonction de leur direction et vérifie également les collisions. Il reçoit également la direction de déplacement des gardiens de but à partir de la prise Web.
Écrire le code Arduino
- Installez la bibliothèque PHPoC pour Arduino (voir les instructions ).
- Télécharger le code Arduino (sur la section code) vers Arduino
Tests
- Cliquez sur le bouton série sur Arduino IDE pour voir l'adresse IP.
- Ouvrez le navigateur Web, saisissez
http://
replace_ip_address
/remote_game.php
- Cliquez sur le bouton de connexion et testez-le
Le meilleur kit de démarrage Arduino pour débutant
Voir le meilleur kit Arduino pour les débutants
Références de fonction
- pinMode()
- digitalRead()
- Serial.begin()
- Série.print()
- Série.println()
Code
- Code Arduino
- Code PHPoC Shield (remote_game.php)
Code ArduinoArduino
#include "SPI.h"#include "Phpoc.h"PhpocServer server(80);booléen déjà connecté =false ; void setup() { Serial.begin(9600); while(!Série); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("jeu"); Serial.print("Adresse du serveur WebSocket :"); Serial.println(Phpoc.localIP()); pinMode (6, ENTREE); pinMode(7, ENTRÉE); pinMode(8, INPUT); pinMode(9, ENTRÉE); }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() { // lorsque le client envoie le premier octet, dites bonjour :PhpocClient client =server.available(); if (client) { value_6 =digitalRead(6); value_7 =digitalRead (7) ; value_8 =digitalRead(8) ; value_9 =digitalRead(9) ; dir_1 =valeur_7 - valeur_6 ; dir_2 =valeur_9 - valeur_8 ; if(dir_1 !=pre_dir_1 || dir_2 !=pre_dir_2) { pre_dir_1 =dir_1; pre_dir_2 =dir_2; Chaîne txtMsg ="[" + Chaîne(dir_1) + ", " + Chaîne(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)PHP
PHPoC - Jeu
PHPoC - Jeu Web
WebSocket :null
Schémas
1. Empilez le bouclier wifi PHPoC ou le bouclier PHPoC sur Arduino2. Câblage comme l'image ci-dessous

Processus de fabrication