如何将p5.js游戏中背景滚动方向改为从上到下？

要把背景从下往上滚动改成从上往下，只需调整背景的坐标更新逻辑和重置条件，具体改动如下：

关键修改点 #

• 反转坐标移动方向：原代码通过减小y轴坐标实现向上滚动，改成增大y轴坐标即可实现向下滚动
• 适配重置条件：当背景图完全滚出画布底部时，将其重置到画布顶部上方的位置，保证循环衔接
• 调整初始位置：修改第二张背景图的初始位置，确保一开始就形成完整的滚动背景

修改后的完整代码 #

let ship;
var bgImg;
var x1 = 0;
var x2;

var scrollSpeed = 2;

function preload() {
  bgImg = loadImage('assets/starbg.png');
  ship = new Sprite(0, 0, 20);
  ship.addImg('assets/space puppy plane.png');
}

function setup() {
  new Canvas(800, 800);
  // 第二张图初始放在画布顶部上方
  x2 = -height;
}

function draw() {
  image(bgImg, 0, x1, width, height);
  image(bgImg, 0, x2, width, height);
  
  // 增大y坐标，让背景向下滚动
  x1 += scrollSpeed;
  x2 += scrollSpeed;
  
  // 当图完全滚出底部时，重置到顶部上方
  if (x1 > height){
    x1 = -height;
  }
  if (x2 > height){
    x2 = -height;
  }

 ship.moveTowards(mouse.x, 700);
}

改动解释 #

1. 在setup函数中，将x2 = height改为x2 = -height，让第二张背景图初始时刚好在第一张图的正上方，避免出现空白。
2. 在draw函数中，把x1 -= scrollSpeed; x2 -= scrollSpeed;替换为x1 += scrollSpeed; x2 += scrollSpeed;，让两张背景图的y坐标不断增大，实现向下滚动的效果。
3. 重置条件从x1 < -height改为x1 > height，当背景图的顶部完全滚出画布底部时，将其位置重置到画布顶部上方（-height），实现无缝循环滚动。

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