僵尸游戏开发中如何让函数绘制内容在画布背景刷新后保留

你当前使用的是Processing/p5.js的 canvas 绘图逻辑：draw() 函数会以设定的帧率循环执行，每次执行第一行调用background(0,120,0)会清空整个画布，之前绘制的所有内容都会被直接擦除。而你当前的逻辑是每次draw()循环仅生成一个随机位置的临时僵尸、当场绘制后没有存储坐标，清屏后旧僵尸的坐标完全丢失，自然无法保留在画布上。

你需要先存储所有已生成僵尸的坐标，每次清屏后把所有僵尸重新绘制一遍，具体实现步骤如下：

• 定义一个数组存储所有僵尸的坐标数据
• 生成新僵尸时，将坐标存入数组，不要绘制完就丢弃
• 每次draw()清屏后，遍历僵尸数组，批量绘制所有已存储的僵尸

修正后的可运行代码如下：

// 存储所有僵尸的数组
let zombies = [];
var playerI = {
  x: 0,
  y: 0
};

function setup(){
  size(1350, 755);
  frameRate(60); // 帧率仅需在setup中设置一次即可
  // 初始化玩家位置，此时width、height已赋值，坐标才会生效
  playerI.x = width / 2;
  playerI.y = height / 2;
  // 初始生成5个僵尸，可自行调整数量
  for(let i=0; i<5; i++){
    zombies.push({
      x: random(0, 1350),
      y: random(0, 755)
    })
  }
}

// 绘制僵尸的函数
function drawZombie(x, y) {
  fill(0, 100, 0);
  ellipse(x, y, 50, 50);
}

// 僵尸生成计时器，可控制新增僵尸的频率
let zombieSpawnTimer = 0;

function draw(){
  background(0, 120, 0);
  
  // 绘制玩家
  fill(250, 220, 0);
  ellipse(playerI.x, playerI.y, 50, 50);
  
  // 玩家移动逻辑
  if (keyPressed && key == 'w') {
    playerI.y -= 1.5;      
  }
  if (keyPressed && key == 's') {
    playerI.y += 1.5;      
  }
  if (keyPressed && key == 'a') {
    playerI.x -= 1.5;      
  }
  if (keyPressed && key == 'd') {
    playerI.x += 1.5;      
  }
  
  // 每2秒生成一个新僵尸，间隔可自行调整
  zombieSpawnTimer += deltaTime;
  if(zombieSpawnTimer > 2000){
    zombies.push({
      x: random(0, 1350),
      y: random(0, 755)
    })
    zombieSpawnTimer = 0;
  }
  
  // 遍历所有僵尸逐个绘制
  for(let i=0; i<zombies.length; i++){
    drawZombie(zombies[i].x, zombies[i].y);
  }
}

• 原代码中函数定义加void、参数前加let的写法不符合p5.js语法规范，实际运行会报错，上述代码已经修正了该问题
• 后续如果要实现僵尸移动、碰撞检测逻辑，直接修改zombies数组里对应僵尸的坐标即可，每次draw()循环会自动刷新显示位置

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