Arduino UNO + PHPoC WiFi 扩展板打造网页双人对战游戏

项目概述

利用 PHPoC WiFi 扩展板内置 WebSocket 服务器，实现 Arduino 与网页浏览器实时双向通信。两名玩家各用两个按钮控制网页端守门员左右移动，拦截自动运动的小球，支持障碍物、碰撞检测、计分等完整游戏逻辑。

硬件清单

• Arduino UNO × 1
• PHPoC WiFi Shield × 1
• 按钮 × 4、10 kΩ 下拉电阻 × 4
• 面包板、跳线、热缩管

数据流向

Arduino (读取按键) → PHPoC Shield (WebSocket) → 浏览器 (JS 游戏引擎)

Arduino 仅负责采集 4 路按键状态，计算两守门员移动方向（-1/0/1），变化时通过 PHPoC 发送 JSON 数组 [dir1, dir2]；网页端负责物理模拟、渲染、碰撞判定。

软件准备

1. 安装 PHPoC Library for Arduino（库管理器搜索安装）
2. 配置 PHPoC Shield Wi-Fi：通过 PHPoC Debugger 设置 SSID/密码
3. 上传网页文件 remote_game.php 至 PHPoC 文件系统
4. 烧录 Arduino 代码

Arduino 核心代码片段

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

PhpocServer server(80);
int btnPins[4] = {6,7,8,9}; // P1左/右, P2左/右
int pre_dir1=0, pre_dir2=0;

void setup() {
  Serial.begin(9600);
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("game");
  Serial.print("WS Server IP: "); Serial.println(Phpoc.localIP());
  for(int p:btnPins) pinMode(p, INPUT);
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    int v6=digitalRead(6), v7=digitalRead(7);
    int v8=digitalRead(8), v9=digitalRead(9);
    int dir1 = v7 - v6; // -1左 0停 1右
    int dir2 = v9 - v8;
    if (dir1!=pre_dir1 || dir2!=pre_dir2) {
      pre_dir1=dir1; pre_dir2=dir2;
      String msg = "["+String(dir1)+","+String(dir2)+"]\r\n";
      server.write(msg.c_str(), msg.length());
    }
  }
}

网页端技术要点

• Canvas 2D 渲染，requestAnimationFrame 驱动 60 FPS 主循环
• 球、守门员、障碍物均为矩形/圆形碰撞箱，支持边缘反弹、得分重置
• WebSocket 接收方向数组，实时更新守门员 dir 属性
• 自适应屏幕缩放，兼容手机/电脑浏览器

测试步骤

1. 串口监视器查看 PHPoC 分配的 IP 地址
2. 浏览器打开 https://<IP>/remote_game.php
3. 点击 “Connect” 建立 WebSocket，按键盘方向键或外接按钮即可游戏

完整 PHP/HTML/JS 代码见项目代码区，可直接下载部署。