如何在P5.js游戏中存储碰撞坐标，让分数文本持久显示？

你的问题核心在于分数文本和流星的状态绑定在了一起——碰撞后流星立刻重置位置，下一次循环时文本会跟着流星的新位置走，自然只闪一下就没了。我们需要把分数提示和流星的状态拆分开，单独维护一个存储分数提示的数组，让每个提示独立存在一段时间后消失。

具体实现步骤： #

1. 创建分数提示数组
   在全局作用域或者setup()函数里定义一个新数组，用来保存每个需要显示的分数提示信息：

   let scoreIndicators = [];
   

2. 碰撞时添加分数提示，而非直接绘制
   修改原来的碰撞检测代码，不要直接调用text()，而是往scoreIndicators数组里添加一个新的提示对象，记录碰撞位置、文本和存活时长：

   // 鼠标碰撞检测部分修改
   if (meteors[i].x < (mouseX+100) && meteors[i].x > (mouseX-175) && meteors[i].y > (750) && meteors[i].y < (850)|| (meteors[i].x < (mouseX+50) && meteors[i].x > (mouseX-100) && meteors[i].y > (630) && meteors[i].y <= (750))) {
     // 记录碰撞时的坐标，添加到分数提示数组
     scoreIndicators.push({
       x: meteors[i].x,
       y: meteors[i].y,
       text: "-3",
       lifespan: 60 // 存活60帧（P5默认60fps，就是1秒），可按需调整
     });
     // 剩下的碰撞逻辑（扣分、重置流星等）保持不变
     score -= 3;
     Lives -= 1;
     meteors[i].y = -1 * random(300);
     meteors[i].x = random(windowWidth) - 100;
     bgY2 -= 10;
     if (!start) {
       meteors[i].y = 0;
     }
   }
   

3. 在draw循环中绘制并更新分数提示
   新增一个专门处理分数提示的函数，或者直接在draw()里添加逻辑，完成文本绘制和生命周期管理：

   function drawScoreIndicators() {
     // 倒序遍历数组，避免删除元素时出现索引错乱
     for (let i = scoreIndicators.length - 1; i >= 0; i--) {
       let indicator = scoreIndicators[i];
       // 绘制分数文本
       text(indicator.text, indicator.x, indicator.y);
       // 减少存活时长
       indicator.lifespan--;
       // 如果存活时长耗尽，移除这个提示
       if (indicator.lifespan <= 0) {
         scoreIndicators.splice(i, 1);
       }
     }
   }
   

   最后记得在draw()函数里调用drawScoreIndicators()，确保每帧都更新分数提示的状态。

为什么这个方法有效？ #

原来的文本依赖流星的x/y坐标绘制，流星重置后坐标改变，文本自然消失。而新方案中，每个分数提示是独立的对象，它的位置是碰撞时的固定坐标，存活时长由自身的lifespan控制，和流星的状态完全无关，所以能在碰撞位置稳定显示指定时间。

额外优化建议 #

• 可以给分数文本加一点动画效果，让显示更自然：

  // 在drawScoreIndicators里添加
  indicator.y -= 1; // 每帧上移1像素，模拟上浮效果
  fill(255, 255, 255, indicator.lifespan * 4); // 根据剩余时长改变透明度，实现淡出
  

• 调整lifespan的值来控制显示时间，比如120帧就是2秒，可根据游戏节奏灵活修改。

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