自制网页版 Arduino 赛车砖块游戏

组件与物料

项目简介

演示

经典怀旧游戏：控制赛车在 5 条车道切换，躲避对手车辆，15 个速度等级，速度越快对手越快、难度越高。

接线

• PHPoC Shield 叠加在 Arduino 上
• 旋转角度传感器：GND、VCC、SIG 分别接 Arduino GND、5V、A0

数据流向

Arduino → PHPoC Shield → 网页浏览器

用户转动电位器，Arduino 读取 ADC 值并分为 5 个等级对应 5 条车道。等级变化时通过 WebSocket 发送给 PHPoC Shield，再转发至浏览器。JavaScript 持续更新对手车辆位置和游戏速度。

准备工作

1. 配置 PHPoC Shield WiFi（SSID/密码）
2. 上传 Web UI 到 PHPoC Shield（remote_racing_game.php，用 PHPoC Debugger 上传）
3. 安装 PHPoC Arduino 库并上传 Arduino 代码

运行

1. 打开 Arduino IDE 串口监视器获取 IP 地址
2. 浏览器访问 https://<IP>/remote_racing_game.php
3. 点击 Connect 按钮开始游戏

函数参考

• pinMode(), analogRead(), digitalWrite()
• Serial.begin(), Serial.println()
• 循环、条件判断、setup()/loop()

代码

Arduino 代码

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

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

PHPoC Shield 代码 (remote_racing_game.php)

<!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> body{text-align:center;font-size:15pt;font-family:Arial} h1{font-size:25pt} button{font-size:15pt} </style>
<script>
// 完整游戏逻辑：Canvas 绘制赛道、车辆、计分、等级、碰撞检测、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> </h2> </center> </body> </html>