关于这个项目

如果您是初学者，您可以在 Arduino - 按钮教程中了解按钮。

我在这里使用更简单的硬件（只有 PHPoC）做了一个类似的项目。

演示

数据流

Arduino ---> PHPoC WiFi Shield ---> 网络浏览器

有两个人在玩游戏。每个人使用两个按钮来控制守门员的方向。因此，我们需要四个按钮。

Arduino 读取四个按钮的状态，如果其中任何一个发生变化，Arduino 将重新计算守门员的移动方向并将方向值发送到 PHPoC WiFi Shield。 PHPoC WiFi Shield 接收到这些值后，通过 websocket 将其发送到 Web 浏览器。 JavaScript 函数将更新守门员的移动方向。

JavaScript 程序会根据方向不断更新球、守门员和障碍物的位置并检查碰撞。

根据按钮状态改变守门员方向。

注意： PHPoC shield 有一个内置程序可以将数据从 Arduino 传递到 Web 浏览器。因此，我们不需要关心它。

我们需要做什么

• 为 PHPoC shield 设置 WiFi 信息（SSID 和密码）
• 将新 UI 上传到 PHPoC shield
• 编写 Arduino 代码

为 PHPoC Shield 设置 WiFi 信息

请参阅此说明。

将新的 Web UI 上传到 PHPoC Shield

• 下载 PHPoC 源代码 remote_game.php（在代码部分）。
• 根据此说明使用 PHPoC 调试器将其上传到 PHPoC shield。

PHPoC Shield 在接收到来自 Web 浏览器的 HTTP 请求时，会解析该文件中的 PHP 脚本，然后将解析后的文件发送到 Web 浏览器。解释文件（包含 HTML、CSS 和 JavaScript 代码）提供 UI（用户界面），根据方向更新球、守门员和障碍物的位置并检查碰撞。它还从websocket接收守门员的移动方向。

编写 Arduino 代码

• 为 Arduino 安装 PHPoC 库（参见说明）。
• 将 Arduino 代码（在代码部分）上传到 Arduino

测试

• 单击 Arduino IDE 上的串行按钮以查看 IP 地址。
• 打开网页浏览器，输入http:// replace_ip_address /remote_game.php
• 点击连接按钮并进行测试

适合初学者的最佳 Arduino 入门套件

查看适合初学者的最佳 Arduino 套件

函数参考

• pinMode()
• digitalRead()
• Serial.begin()
• Serial.print()
• Serial.println()

代码

• Arduino 代码
• PHPoC Shield 代码 (remote_game.php)

Arduino 代码Arduino

#include "SPI.h"#include "Phpoc.h"PhpocServer server(80);boolean alreadyConnected =false;无效设置（）{ Serial.begin（9600）；而（！串行）； Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("游戏"); Serial.print("WebSocket 服务器地址："); Serial.println(Phpoc.localIP()); pinMode(6, 输入); pinMode(7, 输入); pinMode(8, 输入); pinMode（9，输入）； }int value_6 =digitalRead(6);int value_7 =digitalRead(7);int value_8 =digitalRead(8);int value_9 =digitalRead(9);int pre_dir_1 =0;int pre_dir_2 =0;int dir_1 =0;int dir_2 =0;void loop() { // 当客户端发送第一个字节时，打声招呼：PhpocClient client =server.available();如果（客户端）{ value_6 =digitalRead(6); value_7 =digitalRead(7); value_8 =digitalRead(8); value_9 =digitalRead(9); dir_1 =value_7 - value_6; dir_2 =value_9 - value_8; 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()); } }}

PHPoC Shield 代码 (remote_game.php)PHP

PHPoC - 基于网络的游戏


WebSocket :null
连接 

示意图