如何在particle.js中用随机名称替代粒子图案并解决移动时名称频繁变更问题

问题根源是你当前的代码每帧渲染粒子（移动过程中会不断重绘）都会调用随机函数生成新名称，所以同一粒子的名称会反复变化。要实现移动时名称固定，只需把名称绑定到粒子对象本身，仅在粒子创建时赋值一次即可，具体操作如下：

修改步骤 #

• 第一步：找到粒子初始化的代码段（particle.js中创建单个粒子的逻辑，比如createParticle函数附近），在粒子属性（x、y、速度等）初始化的位置，添加名称赋值代码：

  // 给每个粒子添加固定的name属性，仅在创建时随机赋值一次
  p.name = (function() {
    var word = ['player1', 'player2', 'player3', 'player4', 'player5', 'player6'];
    return word[Math.floor(Math.random() * word.length)];
  })();
  

• 第二步：修改你在第426行的渲染代码，直接使用粒子自带的name属性，删除原有的PlayerSelector1()函数：

  switch(p.shape){
    case "circle":
        var context = pJS.canvas.ctx.canvas.getContext("2d");
        context.beginPath();
        context.fillStyle = "black";
        // 直接调用粒子的name属性，无需再生成随机值
        context.fillText(p.name, p.x, p.y);
        context.fill();
        break;
    // 其他形状的case代码保持不变
  }
  

完成以上修改后，刷新页面就能看到粒子移动时名称保持固定的效果，静态状态也能正常显示。

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