Arduino UNO と PHPoC WiFi シールドで作る Web 対戦型 2 人ゲーム

プロジェクト概要

Arduino UNO に PHPoC WiFi シールドをスタックし、4 つのタクトスイッチで 2 人のゴールキーパーを操作する Web ブラウザ対戦ゲームを構築します。PHPoC シールドが WebSocket サーバーとなり、ブラウザ側の JavaScript がボール・ゴールキーパー・障害物の物理演算と衝突判定を行います。Arduino はボタン状態を読み取り、ゴールキーパーの移動方向を WebSocket 経由でブラウザへ送信するだけのシンプルな役割です。

必要なパーツ

• Arduino UNO ×1
• PHPoC WiFi シールド ×1
• タクトスイッチ ×4（各プレイヤー 左右 2 つ）
• ブレッドボード、10kΩ 抵抗 ×4（プルダウン）、ジャンパーワイヤー
• ヒートシュリンクチューブ（配線保護用）

データフロー

1. Arduino が 4 ボタンの状態をポーリング
2. 状態変化があれば方向値（-1, 0, +1）を計算し PHPoC へ送信
3. PHPoC が WebSocket でブラウザへブロードキャスト
4. ブラウザ側 JS が方向値を受け取り、ゴールキーパー位置を更新
5. JS がボール・障害物の移動・衝突判定・得点計算を毎フレーム実行

セットアップ手順

1. PHPoC シールドの Wi-Fi 設定

PHPoC Debugger を用いて SSID・パスワードを設定（公式マニュアル参照）。

2. Web UI（remote_game.php）のアップロード

• GitHub またはプロジェクトページから remote_game.php を入手
• PHPoC Debugger でシールドのファイルシステムへアップロード
• この PHP ファイルが HTML/CSS/JS を動的生成し、ゲーム UI を提供

3. Arduino スケッチの書き込み

• Arduino IDE で PHPoC ライブラリをインストール
• スケッチを書き込み（下記コード参照）

4. 動作確認

1. シリアルモニターで PHPoC の IP アドレスを確認
2. ブラウザで https://<IP>/remote_game.php を開く
3. 「Connect」ボタン押下で WebSocket 接続、キーボード矢印キーで動作テスト
4. 実ボタンでプレイ

Arduino スケッチ（要点抜粋）

#include 
#include 

PhpocServer server(80);
int btnPins[4] = {6, 7, 8, 9};  // P1左, P1右, P2左, P2右
int prevDir1 = 0, prevDir2 = 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 v1 = digitalRead(6), v2 = digitalRead(7);
    int v3 = digitalRead(8), v4 = digitalRead(9);
    int dir1 = v2 - v1;  // -1:左, 0:停止, +1:右
    int dir2 = v4 - v3;
    if (dir1 != prevDir1 || dir2 != prevDir2) {
      prevDir1 = dir1; prevDir2 = dir2;
      String msg = "[" + String(dir1) + ", " + String(dir2) + "]\r\n";
      char buf[msg.length() + 1];
      msg.toCharArray(buf, msg.length() + 1);
      server.write(buf, msg.length());
    }
  }
}

ブラウザ側の主な機能（remote_game.php 内 JS）

• requestAnimationFrame ベースの 60fps ゲームループ
• ボール物理：壁反射、ゴールキーパー・障害物との衝突判定（円vs矩形）
• 障害物：上下往復運動する 2 つのブロック
• ゴール判定：画面上下端到達で得点、ボールリセット
• WebSocket 受信でゴールキーパー方向更新（JSON 配列 [dir1, dir2]）
• レスポンシブ対応：画面サイズに合わせてキャンバス自動スケーリング

回路図

PHPoC シールドを UNO にスタックし、ブレッドボード上で 4 ボタンを D6-D9 にプルダウン接続するだけのシンプルな構成です。詳細な配線写真はプロジェクトページを参照してください。

参考リンク

• PHPoC シールド公式チュートリアル（Wi-Fi 設定・ファイルアップロード・ライブラリ導入）
• ボタン入力の基本：Arduino 公式 Button Tutorial