p5.js加速时道路滚动图像错位出现间隙问题求助

• update 方法执行顺序错误
  你当前Road类的update逻辑顺序存在问题：

  // 现有错误顺序
  this.y += this.speed; // 先用上一帧的旧速度移动
  this.speed = mainSpeed; // 再更新为最新速度
  

  这个顺序会导致每次移动用的都是上一帧的旧速度，加速/减速过程中，速度变化的帧里，两个Road实例的移动量和预期不符，误差会逐渐累积最终出现间隙。正确顺序应该先更新速度，再执行位置计算：

  // 修正后顺序
  this.speed = mainSpeed;
  this.y += this.speed;
  

• 位置重置逻辑硬编码导致误差
  现有重置逻辑是当this.y >= sH时直接赋值this.y = -this.height，如果某一帧速度过大，this.y超出sH的数值大于0，直接硬设为负高度会导致两张图的位置差不再刚好等于道路高度，直接出现间隙。
  修正方案可以改为按偏移量计算重置位置，而非硬编码：

  if(this.y >= sH){
    this.y -= 2 * this.height; // 减去两倍道路高度，保留超出部分的偏移，避免间隙
  }
  

• 双图位置未强制同步导致误差累积
  浮点数运算的精度误差会随时间累积，哪怕每次差0.01，时间长了也会出现可见间隙。你可以强制同步两张道路图的位置关系，保证两张图的y坐标差永远等于道路高度，比如每次更新完第一张道路的位置后，直接设置第二张的y为第一张道路.y - 道路高度，彻底避免错位。

• 尺寸参数一致性校验
  确认全局变量sH和Road实例的this.height数值完全相等，同时确认你传入的道路图像渲染高度和参数设置一致，不存在拉伸/压缩导致的实际拼接高度差。

内容的提问来源于stack exchange，提问作者Kgduder