Web対応Arduinoカーレースブロックゲームの製作

必要な部品と材料

Arduino UNO	×1
PHPoC Shield for Arduino（PHPoC WiFi Shieldも可）	×1
USB WiFiドングル（Ralink RT3070/RT5370チップセット搭載）	×1
ロータリーアングルセンサ（ポテンショメータ）	×1

プロジェクト概要

デモ

懐かしいブロックゲーム風カーレース。5レーンを行き来し、対向車を避けてスコアを競います。速度は15段階、加速するにつれ難易度上昇。

配線

• PHPoCシールドをArduinoにスタック
• ロータリーアングルセンサのGND、VCC、SIGをArduinoのGND、5V、A0に接続

データフロー

Arduino → PHPoC Shield → Webブラウザ

ユーザーがロータリーアングルセンサを操作。ADC値を5段階に分割し、レーン切り替え信号としてArduinoが読み取り、変化があればPHPoC Shieldへ送信。PHPoC ShieldはWebSocket経由でブラウザへ通知。JavaScriptが自車位置、対向車、ゲーム速度を更新。

セットアップ手順

1. PHPoC ShieldのWiFi設定（SSID/パスワード）
2. Web UI（remote_racing_game.php）をPHPoC Shieldにアップロード（PHPoC Debugger使用）
3. Arduinoスケッチを書き込み（PHPoC Library for Arduinoが必要）

プレイ方法

1. Arduino IDEのシリアルモニタでIPアドレスを確認
2. ブラウザで https://[IPアドレス]/remote_racing_game.php を開く
3. 「CONNECT」ボタンを押してゲーム開始

ポテンショメータの詳細：Arduino - ポテンショメータチュートリアル

使用関数リファレンス

• pinMode()、analogRead()、digitalWrite()
• Serial.begin()、Serial.println()
• for/while/if-else、loop()、setup()

コード

Arduinoスケッチ

#include "SPI.h"
#include "Phpoc.h"
PhpocServer server(80);
int adcPin = A0;
float adcVal = 0;
int lastPos = -1;
float adcMin = 512-2.5*100;

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());
}

void loop() {
  PhpocClient client = server.available();
  if (client) {
    adcVal = 0;
    for(int i=0; i<50; i++) adcVal += analogRead(adcPin);
    adcVal /= 50;
    int pos = (int)((adcVal-adcMin) / 100);
    if (pos<0) pos=0; else if(pos>4) pos=4;
    if(lastPos != pos){
      String txtMsg = String(pos) + "\r\n";
      char buf[txtMsg.length()];
      txtMsg.toCharArray(buf, txtMsg.length());
      server.write(buf, txtMsg.length());
      Serial.println(txtMsg);
      lastPos = pos;
      delayMicroseconds(50);
    }
  }
}

remote_racing_game.php（PHPoC Shield側）

<!DOCTYPE html>
<html>
<head>
<title>Arduino - Web-based Game</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style> ... </style>
<script>
// ゲームロジック：キャンバス描画、WebSocket通信、対向車移動、衝突判定、スコア表示等
// 詳細は元コード参照
</script>
</head>
<body>
<center>
<h1>Arduino - Car Race <br> Brick Game</h1>
<canvas id="remote" width="500" height="400"></canvas>
<h2>WebSocket: <span id="ws_state">null</span></h2>
<button id="bt_connect" onclick="connect_onclick()">CONNECT</button>
</center>
</body>
</html>