为何p5.js中topping1不从上往下掉落而是随机瞬移？

配料出现随机瞬移的核心原因是关键变量的作用域错误：

• toppings数组、score、itemsmissed被定义在gamefunction内部，每次通过requestAnimationFrame调用该函数时，这些变量都会被重新初始化。这意味着每一帧都会生成全新的配料数组，之前下落的配料直接被丢弃，视觉上就呈现为配料在随机位置瞬移。
• createCanvas被放在循环函数里重复调用，会不断重置画布状态，进一步加剧异常表现。

改用p5.js标准的setup()和draw()函数结构，将需要跨帧保留的变量放在全局作用域：

// 全局变量，跨帧保留状态
let toppings = [];
let score = 0;
let itemsmissed = 0;
// 假设topping1和pizza是已预加载的图片资源
let topping1;
let pizza;

function preload() {
  // 在这里预加载你的图片，示例：
  // topping1 = loadImage('topping1.png');
  // pizza = loadImage('pizza.png');
}

function setup() {
  createCanvas(600, 600);
  textSize(20);
  fill(255);
  pizza.resize(80, 0);
  
  // 仅初始化一次配料数组
  let positiony = -100;
  while (positiony < 600) {
    let positionx = getRandomInteger(50, 550);
    toppings.push({x: positionx, y: positiony, image: topping1});
    positiony += getRandomInteger(50, 200);
  }
}

function draw() {
  clear();
  // background(bckgrnd1); // 取消注释可添加背景图
  
  // 绘制UI文本
  text("PRESS SHIFT TO QUIT", 10, 25);
  text("SCORE: " + score, 465, 50);
  text("ITEMS MISSED: " + itemsmissed, 425, 25);
  
  // 更新并绘制每个配料
  for (let topping of toppings) {
    topping.y += 1;
    image(topping.image, topping.x, topping.y);
    
    if (topping.y >= 600) {
      itemsmissed++;
      // 重置位置时重新随机x坐标，避免重复固定位置
      topping.x = getRandomInteger(50, 550);
      topping.y = -100;
    }
  }
  
  // 处理退出逻辑
  if (keyIsDown(SHIFT)) {
    noLoop(); // 停止绘图循环
    // 可添加退出后的自定义逻辑
  }
}

// 自定义随机整数生成函数（确保全局可调用）
function getRandomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

• 全局变量声明：将toppings、score、itemsmissed放在函数外部，确保它们在每一帧都保留之前的状态，不会被重置。
• 使用p5.js标准结构：用setup()（仅执行一次，负责画布初始化、资源加载、配料数组创建）和draw()（自动循环执行，处理帧更新与绘制）替代手动requestAnimationFrame，更贴合p5.js的设计逻辑。
• 单次配料初始化：仅在setup()中生成一次初始配料数组，后续draw()仅更新配料位置，避免重复生成导致的瞬移问题。
• 画布单次创建：createCanvas只在setup()中调用一次，避免重复重置画布。

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