Juego Web para Dos Jugadores con Arduino UNO y PHPoC WiFi Shield

Componentes y Suministros

Componente	Cantidad
Arduino UNO	1
PHPoC WiFi Shield para Arduino	1
Pulsadores	4
Protoboard	1
Resistencia 10k Ω	4 (pull-down)
Tubo Termorretráctil	1

Sobre el Proyecto

Si eres principiante, puedes aprender sobre botones en Arduino con el Button Tutorial.

Demo

Juego para dos jugadores donde cada uno usa dos botones para controlar su portero.

Flujo de Datos

Arduino → PHPoC WiFi Shield → Navegador Web

Arduino lee 4 botones. Si cambia alguno, recalcula dirección de porteros y envía valores al PHPoC WiFi Shield. Este los envía al navegador vía WebSocket. JavaScript actualiza posición de porteros, balón, obstáculos y detecta colisiones.

Nota: El shield PHPoC tiene programa integrado para pasar datos Arduino→navegador. No hay que programarlo.

Qué Necesitamos Hacer

1. Configurar WiFi en PHPoC Shield (SSID/password)
2. Subir interfaz web (remote_game.php) al shield
3. Escribir y subir código Arduino

Configurar WiFi en PHPoC Shield

Ver instrucciones del fabricante.

Subir Interfaz Web al PHPoC Shield

• Descargar remote_game.php (sección código)
• Subirlo con PHPoC Debugger según instrucciones

Al recibir petición HTTP, el shield interpreta el PHP y envía al navegador HTML/CSS/JS con la UI, lógica de juego y recepción WebSocket.

Código Arduino

• Instalar librería PHPoC para Arduino
• Subir código Arduino (sección código)

Pruebas

1. Abrir Monitor Serie en Arduino IDE para ver IP
2. Navegador: https://[IP]/remote_game.php
3. Click "Connect" y probar

Código

Código 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("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
  
  pinMode(6, INPUT);
  pinMode(7, INPUT);
  pinMode(8, INPUT);
  pinMode(9, INPUT);
}

int value_6, value_7, value_8, value_9;
int pre_dir_1 = 0, pre_dir_2 = 0;
int dir_1 = 0, 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; // Jugador 1
    dir_2 = value_9 - value_8; // Jugador 2
    
    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());
    }
  }
}

Código PHPoC Shield (remote_game.php)

<!DOCTYPE html>
<html><head>
<title>PHPoC - Juego Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
  body { text-align:center; font:15pt Arial; }
  h1 { font:bold 25pt; } h2 { font:bold 15pt; }
  button { font:bold 15pt; }
</style>
<script>
// ... JavaScript completo para juego Pong 2 jugadores con obstáculos
// Incluye: WebSocket, Canvas, animación, colisiones, porteros, pelota, puntuación
// Ver archivo completo en repositorio
</script>
</head><body>
<center>
<h1>PHPoC - Juego Web Basado en Navegador</h1>
<canvas id="remote" width="400" height="500"></canvas>
<h2>WebSocket: <span id="ws_state">null</span></h2>
<button id="bt_connect" onclick="connect_onclick()">Connect</button>
</center>
</body></html>

Esquemático

1. Apilar PHPoC WiFi Shield sobre Arduino
2. Cablear 4 botones con resistencias pull-down 10kΩ a pines D6-D9