1. 项目概述与核心思路最近在捣鼓一些物联网的小玩意儿想把手头的传感器用起来做个既有趣又能练手的小项目。于是就想到了结合红外测距传感器和网页游戏做一个体感版的“Flappy Bird”。核心思路很简单用传感器测量你手掌到设备的距离这个距离值实时映射成游戏里小鸟或者我们这里叫它“控制条”的垂直位置然后你通过前后移动手掌来躲避屏幕上随机生成的障碍物。听起来是不是比单纯按键更有意思这不仅能让你直观地理解传感器数据如何与程序交互还能体验到软硬件结合的乐趣。这个项目非常适合有一定前端基础了解HTML、JavaScript并想入门物联网或硬件交互的朋友。你不需要精通电路只需要一块像obniz这样的开发板、一个红外测距传感器以及一台能写代码的电脑。整个过程会涉及到硬件接线、传感器数据读取、前端Canvas绘图以及游戏逻辑的编写。我会把每一步的原理、为什么这么做、以及我踩过的坑都详细拆解出来保证你看完就能自己动手复现一个。2. 硬件选型与连接详解2.1 核心硬件为什么是它们这个项目的硬件部分非常精简核心就两样obniz开发板和GP2Y0A21YK0F红外距离传感器。obniz开发板我选择它主要是图个方便。它是一个“云连接”的IoT板子最大的好处是你不需要在电脑上安装任何驱动或IDE。编程直接在网页浏览器里进行代码通过互联网发送到obniz的云端再下发给实体板子执行。这意味着你可以用任何电脑甚至手机来开发板子只要通着电连着Wi-Fi放哪儿都行。对于快速原型开发和小项目来说这种免配置的体验能让你更专注于逻辑本身而不是环境搭建。GP2Y0A21YK0F红外距离传感器这是夏普的一款经典模拟量输出传感器。选择它有几个原因第一测量范围10cm到80cm非常适合我们这个“手部控制”的场景你不需要把手伸得太远或贴得太近。第二它输出的是模拟电压值obniz的IO口可以直接读取无需额外的模数转换芯片接线和编程都简单。第三价格便宜且容易买到。市面上也有其他类型的距离传感器比如超声波HC-SR04或激光测距但前者需要处理脉冲信号后者成本较高对于这个游戏来说这款红外传感器是性价比和易用性最平衡的选择。注意传感器的测量值会受物体表面颜色和材质的影响。深色或吸光材料会导致测量距离偏短而镜面反射可能导致读数不稳定。实测时用手掌作为控制对象效果最好。2.2 接线图与原理分析接线非常简单一共三根线。但每根线为什么接那里需要搞清楚VCC红色线 - obniz io2这是传感器的电源正极需要接3.3V或5V。obniz的IO口可以配置为电源输出我们指定io2输出高电平5V来给传感器供电。GND黑色线 - obniz io1接地线为传感器提供电流回路。接任何一个GND口或配置为低电平的IO口都可以这里我们指定io1为GND。Signal黄色线 - obniz io0这是传感器的信号输出线。它会输出一个与测量距离成反比的模拟电压距离越近电压越高。我们需要将io0配置为模拟输入模式来读取这个电压值。在代码中我们通过obniz.wired(GP2Y0A21YK0F, {vcc:0, gnd:1, signal:2})这行语句来声明这种连接关系。这里的对象{vcc:2, gnd:1, signal:0}就是在告诉obniz库“请把io2当成VCC输出把io1当成GND并从io0读取模拟信号”。如果你把线接在了不同的引脚上只需要修改这个对象里的引脚编号即可。实操心得接线时最好使用杜邦线并确保插紧。接触不良是硬件项目中最常见也最恼人的问题表现为传感器读数时有时无或剧烈跳动。如果遇到数据不稳定第一个要检查的就是所有连接点。3. 软件架构与核心代码解析整个项目是一个单一的HTML文件包含了游戏的所有逻辑。我们采用前端经典的“初始化 - 游戏循环Frame Loop”架构。下面我把核心代码拆开揉碎了讲。3.1 初始化与传感器数据读取游戏的起点是initialize()函数它绘制开始界面并绑定点击事件。真正的核心从startGame()和传感器初始化开始。传感器数据的读取是游戏流畅控制的关键。原始代码中传感器每收到一个新数据就直接赋值给inputHeight。这在实际操作中会有一个问题传感器数据存在微小波动直接使用会导致游戏中的控制条抖动体验很差。我的改进方案是引入一个移动平均滤波。原理是维护一个最近N次测量值的数组每次取平均值作为最终输出。这样可以有效平滑掉随机噪声。let dataValues []; // 用于存储最近几次传感器读值的数组 sensor.start(function (height) { // 1. 将新数据推入数组 dataValues.push(height); // 2. 如果数组长度超过5则移除最旧的数据保持窗口大小 if(dataValues.length 5){ dataValues.shift(); } // 3. 计算数组内所有值的平均值并赋给 inputHeight inputHeight dataValues.reduce(function(x, y) { return x y; }) / dataValues.length; })为什么窗口大小是5这是一个经验值。太小如3滤波效果不明显太大如10会导致控制响应延迟感觉“不跟手”。经过实测5次平均在平滑度和实时性之间取得了很好的平衡。你可以根据传感器实际噪声情况调整这个值。3.2 游戏主循环与核心逻辑frame()函数是游戏的心脏它大约每10毫秒执行一次通过setTimeout(frame, 10)实现。每一次执行就是一帧。其逻辑顺序如下清屏用黑色填充整个画布擦除上一帧的画面。处理输入将滤波后的传感器距离值inputHeight映射为画布上的Y坐标。这里有个关键转换let input (500 - inputHeight);。因为传感器测得的inputHeight值通常随着距离增加而增大单位是毫米级的数值而我们希望“手往前伸距离变小”时游戏中的点向上移动。所以用一个大数500减去它实现反向映射。接着用Math.min(Math.max(0, input), canvas.height)将坐标限制在画布高度范围内防止出界。更新轨迹点将计算出的新input坐标推入dot数组尾部并移除数组头部最旧的一个点。这个数组记录了控制条最近一段时间的运动轨迹用于绘制一条尾迹。更新障碍物所有障碍物bars的x坐标每帧左移1个单位模拟向右移动的效果。移出画布左侧的障碍物从数组中删除以节省内存。每100帧大约1秒有70%的概率生成一组新障碍物。障碍物有两种形态单个长条或上下分开的“管道”形态模仿Flappy Bird通过随机数控制形态切换。碰撞检测调用isHit()函数判断控制条当前最新的位置点dot数组最后一个点是否与任何障碍物的矩形区域重叠。这是游戏的核心判定逻辑。绘制依次调用drawDots()绘制控制条轨迹线drawBars()绘制所有障碍物。循环或结束如果发生碰撞调用gameOver()否则设置定时器准备下一帧。3.3 关键函数深度剖析碰撞检测函数isHit() 这个函数的效率很重要因为它每帧都要执行。它获取控制条当前点的坐标x是dot数组长度这巧妙地利用了数组索引作为x坐标y是最后一个点的值然后遍历所有障碍物进行矩形相交判断。判断条件是点的x坐标在障碍物的左右边界之间且点的y坐标在障碍物的上下边界之间。这里用的是最基础的AABB轴对齐包围盒碰撞检测对于矩形障碍物和点来说完全足够且高效。障碍物生成逻辑 在frameCount 100的代码块里障碍物的生成算法决定了游戏难度。if (Math.random() 0.3) { // 70%概率生成单个长条 bars.push({x: canvas.width, y: Math.random() * 380 - 80, width: 16, height: 160}); } else { // 30%概率生成上下管道 let hole Math.random() * 300; // 管道间隙的中心位置 bars.push({x: canvas.width, y: 0, width: 16, height: hole - 40}); // 上管道 bars.push({x: canvas.width, y: hole 90, width: 16, height: canvas.height}); // 下管道 }Math.random() * 380 - 80这个计算是为了让单个长条随机出现在画布偏上的区域y坐标范围在-80到300之间增加躲避难度。上下管道的间隙是固定的从hole - 40到hole 90间隙高度130像素。你可以通过调整这些数字来改变游戏难度。间隙越小游戏越难。注意事项游戏难度曲线可以通过调整三个参数来优化障碍物生成频率现在是100帧、障碍物移动速度现在是每帧1像素、以及管道间隙大小。建议先保持默认等游戏能跑起来后再根据体验微调。4. 从零开始的完整实现步骤4.1 硬件搭建与obniz配置获取硬件准备obniz开发板、GP2Y0A21YK0F传感器、Micro-USB数据线供电兼通信。接线按照“VCC(红)-io2, GND(黑)-io1, Signal(黄)-io0”的顺序将传感器连接到obniz板。确保板子处于断电状态。上电与联网用USB线将obniz连接到电脑或充电器。obniz启动后其OLED屏幕会显示一个Wi-Fi配置界面。按照屏幕提示用手机或电脑连接到obniz发出的临时Wi-Fi热点在打开的配置页面中填入你家中的Wi-Fi名称和密码。配置成功后obniz会重启并连接到网络。获取OBNIZ_ID登录 obniz Cloud 网站。在你的设备列表中找到刚刚配置的obniz板你会看到一个唯一的“OBNIZ_ID”一串字母数字组合。复制它这是我们代码连接板子的钥匙。4.2 代码编写与本地测试创建HTML文件新建一个文件命名为game.html。编写基础骨架将提供的完整HTML代码复制进去。找到代码中new Obniz(OBNIZ_ID_HERE)这一行将OBNIZ_ID_HERE替换成你刚才复制的真实ID。本地运行直接用浏览器打开这个game.html文件。此时浏览器会尝试通过互联网连接到obniz Cloud并进而连接到你的实体板子。你应该能在网页上看到“Click to START”的标题并且在浏览器的开发者工具F12控制台中看到连接日志。传感器测试点击START前先观察开发者工具控制台。连接成功后用手在传感器前移动看看是否有数据打印原始代码可能没打印你可以添加console.log(inputHeight)来观察。确保数值随着距离变化而平稳变化。4.3 参数调优与手感打磨硬件和基础代码跑通后真正的“制作”才开始。你需要调整几个参数来获得最佳游戏体验距离映射 (500 - inputHeight)这里的500是一个魔术数字Magic Number。它需要根据你实际摆放传感器时手部舒适活动的距离范围来调整。建议你先打印出inputHeight的原始值手放在你觉得是“中间”的位置记下这个值比如是200然后手放到最远和最近再记下值比如是100和300。那么映射公式可以改为(中间值*2 - inputHeight)或者直接调整这个基数目标是让手在舒适范围内移动时游戏中的控制条能大致占据画布中间70%的区域。游戏速度setTimeout(frame, 10)中的10决定了帧间隔约100FPS。如果觉得游戏太快或太慢可以修改这个值。增大它会降低游戏速度但可能会产生卡顿感。更推荐调整障碍物移动速度bars[i].x--中的--可以改为- 0.5或- 2和生成频率frameCount 100中的100来综合控制难度。画面与手感可以修改drawDots()中ctx.lineWidth和ctx.strokeStyle来改变控制条轨迹的颜色和粗细。修改drawBars()中ctx.fillStyle来改变障碍物颜色。手感方面移动平均滤波的窗口大小前面提到的数组长度5直接影响“跟手”程度务必亲自测试调整。5. 常见问题排查与进阶优化5.1 问题排查速查表问题现象可能原因排查步骤网页显示“Obniz not found”或无法连接1. OBNIZ_ID错误2. obniz设备未联网3. 本地网络限制1. 核对代码中的OBNIZ_ID与云端是否一致。2. 检查obniz设备OLED屏幕是否显示IP地址表示联网成功。3. 尝试用手机热点给obniz和电脑同时上网排除公司/学校网络防火墙限制。传感器读数始终为0或不变化1. 接线错误或接触不良2. 电源问题3. 引脚配置错误1. 重新拔插所有杜邦线确认VCC、GND、Signal线序正确。2. 确保obniz供电充足使用电脑USB口或5V/1A以上适配器。3. 检查代码中obniz.wired()里的引脚号是否与实际接线对应。游戏控制条跳动严重1. 传感器数据噪声2. 映射参数不合理1. 确认已启用移动平均滤波代码并尝试增大滤波窗口如从5改为7。2. 检查传感器前方是否有其他物体干扰确保测量对象是手掌。3. 调整映射公式避免使用传感器非线性严重的区间太近或太远。游戏画面卡顿1. 浏览器性能问题2. 网络延迟3. 代码效率低1. 关闭浏览器其他标签页尝试更换浏览器Chrome/Firefox通常较好。2. 网络延迟主要影响初始连接游戏运行后影响小。可忽略。3. 确保在drawBars和drawDots中使用了beginPath()和closePath()避免绘图指令堆积。碰撞检测不准确1. 碰撞检测逻辑错误2. 坐标系统不一致1. 检查isHit()函数中的矩形碰撞条件逻辑。2. 确认控制条的坐标xdot.length和障碍物的x坐标是在同一坐标系下画布左上角为原点。5.2 进阶优化与扩展思路当基础版本运行稳定后你可以尝试以下扩展让项目更具挑战性和学习价值增加游戏元素分数系统每安全通过一个障碍物即障碍物的x width 0时分数加一。在画面左上角用ctx.fillText()显示。难度递增随着分数增加可以动态提高障碍物移动速度、减小管道间隙或增加生成频率。例如每100分障碍物移动速度增加10%。添加音效使用Audio对象在游戏开始、碰撞、得分时播放简单的音效提升沉浸感。改进控制算法卡尔曼滤波如果你对控制精度要求更高可以尝试用JavaScript实现一个简单的卡尔曼滤波器来代替移动平均它能更好地估计真实距离并预测趋势。手势识别结合传感器数据流可以尝试识别简单手势。例如快速靠近再远离传感器可以定义为“跳跃”指令为游戏增加新的操作维度。美化与部署使用游戏引擎将核心逻辑移植到更专业的游戏引擎如 Phaser.js 中可以更方便地添加精灵动画、粒子特效、物理引擎等。响应式设计修改代码让画布(canvas)的尺寸能自适应浏览器窗口大小在不同设备上都能玩。部署到公网将你的HTML、JS文件放在GitHub Pages或任何静态托管服务上这样你就能在任何地方、用任何设备通过浏览器访问你的游戏只要obniz在线。这个项目从硬件接线到软件逻辑完整地展示了一个物联网交互应用的闭环。最关键的不是一次成功而是在调试参数、解决问题的过程中你对数据流、控制逻辑和用户体验之间关系的理解会不断加深。我最初做的时候映射参数没调好要么是手要伸到桌子底下才能控制要么是稍微一动就撞墙反复调整了十几次才找到舒服的区间。所以多试多调享受这个过程。
基于红外传感器与obniz的体感Flappy Bird游戏开发实战
1. 项目概述与核心思路最近在捣鼓一些物联网的小玩意儿想把手头的传感器用起来做个既有趣又能练手的小项目。于是就想到了结合红外测距传感器和网页游戏做一个体感版的“Flappy Bird”。核心思路很简单用传感器测量你手掌到设备的距离这个距离值实时映射成游戏里小鸟或者我们这里叫它“控制条”的垂直位置然后你通过前后移动手掌来躲避屏幕上随机生成的障碍物。听起来是不是比单纯按键更有意思这不仅能让你直观地理解传感器数据如何与程序交互还能体验到软硬件结合的乐趣。这个项目非常适合有一定前端基础了解HTML、JavaScript并想入门物联网或硬件交互的朋友。你不需要精通电路只需要一块像obniz这样的开发板、一个红外测距传感器以及一台能写代码的电脑。整个过程会涉及到硬件接线、传感器数据读取、前端Canvas绘图以及游戏逻辑的编写。我会把每一步的原理、为什么这么做、以及我踩过的坑都详细拆解出来保证你看完就能自己动手复现一个。2. 硬件选型与连接详解2.1 核心硬件为什么是它们这个项目的硬件部分非常精简核心就两样obniz开发板和GP2Y0A21YK0F红外距离传感器。obniz开发板我选择它主要是图个方便。它是一个“云连接”的IoT板子最大的好处是你不需要在电脑上安装任何驱动或IDE。编程直接在网页浏览器里进行代码通过互联网发送到obniz的云端再下发给实体板子执行。这意味着你可以用任何电脑甚至手机来开发板子只要通着电连着Wi-Fi放哪儿都行。对于快速原型开发和小项目来说这种免配置的体验能让你更专注于逻辑本身而不是环境搭建。GP2Y0A21YK0F红外距离传感器这是夏普的一款经典模拟量输出传感器。选择它有几个原因第一测量范围10cm到80cm非常适合我们这个“手部控制”的场景你不需要把手伸得太远或贴得太近。第二它输出的是模拟电压值obniz的IO口可以直接读取无需额外的模数转换芯片接线和编程都简单。第三价格便宜且容易买到。市面上也有其他类型的距离传感器比如超声波HC-SR04或激光测距但前者需要处理脉冲信号后者成本较高对于这个游戏来说这款红外传感器是性价比和易用性最平衡的选择。注意传感器的测量值会受物体表面颜色和材质的影响。深色或吸光材料会导致测量距离偏短而镜面反射可能导致读数不稳定。实测时用手掌作为控制对象效果最好。2.2 接线图与原理分析接线非常简单一共三根线。但每根线为什么接那里需要搞清楚VCC红色线 - obniz io2这是传感器的电源正极需要接3.3V或5V。obniz的IO口可以配置为电源输出我们指定io2输出高电平5V来给传感器供电。GND黑色线 - obniz io1接地线为传感器提供电流回路。接任何一个GND口或配置为低电平的IO口都可以这里我们指定io1为GND。Signal黄色线 - obniz io0这是传感器的信号输出线。它会输出一个与测量距离成反比的模拟电压距离越近电压越高。我们需要将io0配置为模拟输入模式来读取这个电压值。在代码中我们通过obniz.wired(GP2Y0A21YK0F, {vcc:0, gnd:1, signal:2})这行语句来声明这种连接关系。这里的对象{vcc:2, gnd:1, signal:0}就是在告诉obniz库“请把io2当成VCC输出把io1当成GND并从io0读取模拟信号”。如果你把线接在了不同的引脚上只需要修改这个对象里的引脚编号即可。实操心得接线时最好使用杜邦线并确保插紧。接触不良是硬件项目中最常见也最恼人的问题表现为传感器读数时有时无或剧烈跳动。如果遇到数据不稳定第一个要检查的就是所有连接点。3. 软件架构与核心代码解析整个项目是一个单一的HTML文件包含了游戏的所有逻辑。我们采用前端经典的“初始化 - 游戏循环Frame Loop”架构。下面我把核心代码拆开揉碎了讲。3.1 初始化与传感器数据读取游戏的起点是initialize()函数它绘制开始界面并绑定点击事件。真正的核心从startGame()和传感器初始化开始。传感器数据的读取是游戏流畅控制的关键。原始代码中传感器每收到一个新数据就直接赋值给inputHeight。这在实际操作中会有一个问题传感器数据存在微小波动直接使用会导致游戏中的控制条抖动体验很差。我的改进方案是引入一个移动平均滤波。原理是维护一个最近N次测量值的数组每次取平均值作为最终输出。这样可以有效平滑掉随机噪声。let dataValues []; // 用于存储最近几次传感器读值的数组 sensor.start(function (height) { // 1. 将新数据推入数组 dataValues.push(height); // 2. 如果数组长度超过5则移除最旧的数据保持窗口大小 if(dataValues.length 5){ dataValues.shift(); } // 3. 计算数组内所有值的平均值并赋给 inputHeight inputHeight dataValues.reduce(function(x, y) { return x y; }) / dataValues.length; })为什么窗口大小是5这是一个经验值。太小如3滤波效果不明显太大如10会导致控制响应延迟感觉“不跟手”。经过实测5次平均在平滑度和实时性之间取得了很好的平衡。你可以根据传感器实际噪声情况调整这个值。3.2 游戏主循环与核心逻辑frame()函数是游戏的心脏它大约每10毫秒执行一次通过setTimeout(frame, 10)实现。每一次执行就是一帧。其逻辑顺序如下清屏用黑色填充整个画布擦除上一帧的画面。处理输入将滤波后的传感器距离值inputHeight映射为画布上的Y坐标。这里有个关键转换let input (500 - inputHeight);。因为传感器测得的inputHeight值通常随着距离增加而增大单位是毫米级的数值而我们希望“手往前伸距离变小”时游戏中的点向上移动。所以用一个大数500减去它实现反向映射。接着用Math.min(Math.max(0, input), canvas.height)将坐标限制在画布高度范围内防止出界。更新轨迹点将计算出的新input坐标推入dot数组尾部并移除数组头部最旧的一个点。这个数组记录了控制条最近一段时间的运动轨迹用于绘制一条尾迹。更新障碍物所有障碍物bars的x坐标每帧左移1个单位模拟向右移动的效果。移出画布左侧的障碍物从数组中删除以节省内存。每100帧大约1秒有70%的概率生成一组新障碍物。障碍物有两种形态单个长条或上下分开的“管道”形态模仿Flappy Bird通过随机数控制形态切换。碰撞检测调用isHit()函数判断控制条当前最新的位置点dot数组最后一个点是否与任何障碍物的矩形区域重叠。这是游戏的核心判定逻辑。绘制依次调用drawDots()绘制控制条轨迹线drawBars()绘制所有障碍物。循环或结束如果发生碰撞调用gameOver()否则设置定时器准备下一帧。3.3 关键函数深度剖析碰撞检测函数isHit() 这个函数的效率很重要因为它每帧都要执行。它获取控制条当前点的坐标x是dot数组长度这巧妙地利用了数组索引作为x坐标y是最后一个点的值然后遍历所有障碍物进行矩形相交判断。判断条件是点的x坐标在障碍物的左右边界之间且点的y坐标在障碍物的上下边界之间。这里用的是最基础的AABB轴对齐包围盒碰撞检测对于矩形障碍物和点来说完全足够且高效。障碍物生成逻辑 在frameCount 100的代码块里障碍物的生成算法决定了游戏难度。if (Math.random() 0.3) { // 70%概率生成单个长条 bars.push({x: canvas.width, y: Math.random() * 380 - 80, width: 16, height: 160}); } else { // 30%概率生成上下管道 let hole Math.random() * 300; // 管道间隙的中心位置 bars.push({x: canvas.width, y: 0, width: 16, height: hole - 40}); // 上管道 bars.push({x: canvas.width, y: hole 90, width: 16, height: canvas.height}); // 下管道 }Math.random() * 380 - 80这个计算是为了让单个长条随机出现在画布偏上的区域y坐标范围在-80到300之间增加躲避难度。上下管道的间隙是固定的从hole - 40到hole 90间隙高度130像素。你可以通过调整这些数字来改变游戏难度。间隙越小游戏越难。注意事项游戏难度曲线可以通过调整三个参数来优化障碍物生成频率现在是100帧、障碍物移动速度现在是每帧1像素、以及管道间隙大小。建议先保持默认等游戏能跑起来后再根据体验微调。4. 从零开始的完整实现步骤4.1 硬件搭建与obniz配置获取硬件准备obniz开发板、GP2Y0A21YK0F传感器、Micro-USB数据线供电兼通信。接线按照“VCC(红)-io2, GND(黑)-io1, Signal(黄)-io0”的顺序将传感器连接到obniz板。确保板子处于断电状态。上电与联网用USB线将obniz连接到电脑或充电器。obniz启动后其OLED屏幕会显示一个Wi-Fi配置界面。按照屏幕提示用手机或电脑连接到obniz发出的临时Wi-Fi热点在打开的配置页面中填入你家中的Wi-Fi名称和密码。配置成功后obniz会重启并连接到网络。获取OBNIZ_ID登录 obniz Cloud 网站。在你的设备列表中找到刚刚配置的obniz板你会看到一个唯一的“OBNIZ_ID”一串字母数字组合。复制它这是我们代码连接板子的钥匙。4.2 代码编写与本地测试创建HTML文件新建一个文件命名为game.html。编写基础骨架将提供的完整HTML代码复制进去。找到代码中new Obniz(OBNIZ_ID_HERE)这一行将OBNIZ_ID_HERE替换成你刚才复制的真实ID。本地运行直接用浏览器打开这个game.html文件。此时浏览器会尝试通过互联网连接到obniz Cloud并进而连接到你的实体板子。你应该能在网页上看到“Click to START”的标题并且在浏览器的开发者工具F12控制台中看到连接日志。传感器测试点击START前先观察开发者工具控制台。连接成功后用手在传感器前移动看看是否有数据打印原始代码可能没打印你可以添加console.log(inputHeight)来观察。确保数值随着距离变化而平稳变化。4.3 参数调优与手感打磨硬件和基础代码跑通后真正的“制作”才开始。你需要调整几个参数来获得最佳游戏体验距离映射 (500 - inputHeight)这里的500是一个魔术数字Magic Number。它需要根据你实际摆放传感器时手部舒适活动的距离范围来调整。建议你先打印出inputHeight的原始值手放在你觉得是“中间”的位置记下这个值比如是200然后手放到最远和最近再记下值比如是100和300。那么映射公式可以改为(中间值*2 - inputHeight)或者直接调整这个基数目标是让手在舒适范围内移动时游戏中的控制条能大致占据画布中间70%的区域。游戏速度setTimeout(frame, 10)中的10决定了帧间隔约100FPS。如果觉得游戏太快或太慢可以修改这个值。增大它会降低游戏速度但可能会产生卡顿感。更推荐调整障碍物移动速度bars[i].x--中的--可以改为- 0.5或- 2和生成频率frameCount 100中的100来综合控制难度。画面与手感可以修改drawDots()中ctx.lineWidth和ctx.strokeStyle来改变控制条轨迹的颜色和粗细。修改drawBars()中ctx.fillStyle来改变障碍物颜色。手感方面移动平均滤波的窗口大小前面提到的数组长度5直接影响“跟手”程度务必亲自测试调整。5. 常见问题排查与进阶优化5.1 问题排查速查表问题现象可能原因排查步骤网页显示“Obniz not found”或无法连接1. OBNIZ_ID错误2. obniz设备未联网3. 本地网络限制1. 核对代码中的OBNIZ_ID与云端是否一致。2. 检查obniz设备OLED屏幕是否显示IP地址表示联网成功。3. 尝试用手机热点给obniz和电脑同时上网排除公司/学校网络防火墙限制。传感器读数始终为0或不变化1. 接线错误或接触不良2. 电源问题3. 引脚配置错误1. 重新拔插所有杜邦线确认VCC、GND、Signal线序正确。2. 确保obniz供电充足使用电脑USB口或5V/1A以上适配器。3. 检查代码中obniz.wired()里的引脚号是否与实际接线对应。游戏控制条跳动严重1. 传感器数据噪声2. 映射参数不合理1. 确认已启用移动平均滤波代码并尝试增大滤波窗口如从5改为7。2. 检查传感器前方是否有其他物体干扰确保测量对象是手掌。3. 调整映射公式避免使用传感器非线性严重的区间太近或太远。游戏画面卡顿1. 浏览器性能问题2. 网络延迟3. 代码效率低1. 关闭浏览器其他标签页尝试更换浏览器Chrome/Firefox通常较好。2. 网络延迟主要影响初始连接游戏运行后影响小。可忽略。3. 确保在drawBars和drawDots中使用了beginPath()和closePath()避免绘图指令堆积。碰撞检测不准确1. 碰撞检测逻辑错误2. 坐标系统不一致1. 检查isHit()函数中的矩形碰撞条件逻辑。2. 确认控制条的坐标xdot.length和障碍物的x坐标是在同一坐标系下画布左上角为原点。5.2 进阶优化与扩展思路当基础版本运行稳定后你可以尝试以下扩展让项目更具挑战性和学习价值增加游戏元素分数系统每安全通过一个障碍物即障碍物的x width 0时分数加一。在画面左上角用ctx.fillText()显示。难度递增随着分数增加可以动态提高障碍物移动速度、减小管道间隙或增加生成频率。例如每100分障碍物移动速度增加10%。添加音效使用Audio对象在游戏开始、碰撞、得分时播放简单的音效提升沉浸感。改进控制算法卡尔曼滤波如果你对控制精度要求更高可以尝试用JavaScript实现一个简单的卡尔曼滤波器来代替移动平均它能更好地估计真实距离并预测趋势。手势识别结合传感器数据流可以尝试识别简单手势。例如快速靠近再远离传感器可以定义为“跳跃”指令为游戏增加新的操作维度。美化与部署使用游戏引擎将核心逻辑移植到更专业的游戏引擎如 Phaser.js 中可以更方便地添加精灵动画、粒子特效、物理引擎等。响应式设计修改代码让画布(canvas)的尺寸能自适应浏览器窗口大小在不同设备上都能玩。部署到公网将你的HTML、JS文件放在GitHub Pages或任何静态托管服务上这样你就能在任何地方、用任何设备通过浏览器访问你的游戏只要obniz在线。这个项目从硬件接线到软件逻辑完整地展示了一个物联网交互应用的闭环。最关键的不是一次成功而是在调试参数、解决问题的过程中你对数据流、控制逻辑和用户体验之间关系的理解会不断加深。我最初做的时候映射参数没调好要么是手要伸到桌子底下才能控制要么是稍微一动就撞墙反复调整了十几次才找到舒服的区间。所以多试多调享受这个过程。
