如何在JS粒子效果开发中从8色列表选取随机数量颜色使用

你需要先在脚本初始化阶段固定本次运行的可用颜色池，仅修改最后一行的固定值8无法实现需求——如果每个粒子取色时动态计算随机上限，还是会覆盖全部8种颜色，达不到「每次运行脚本固定用1-8种颜色」的要求。

修改步骤 #

• 第一步：在colors数组定义完成后，新增代码生成本次运行的可用颜色列表

let colors = [
  "dodgerBlue",
  "red",
  "#fff200",
  "limeGreen",
  "slateGrey",
  "orange",
  "hotPink", 
  "#080808" // 这里顺便去掉了原内容多余的前置空格，避免颜色解析异常
];
// 新增内容开始
// 随机生成1~8的数值作为本次运行使用的颜色数量
const useColorNum = Math.floor(Math.random() * colors.length) + 1;
// 打乱原颜色数组后截取前useColorNum个作为本次专属颜色池，保证颜色随机不固定顺序
const currentColors = [...colors].sort(() => Math.random() - 0.5).slice(0, useColorNum);
// 新增内容结束
const dpi = 100;

• 第二步：修改Particle构造函数的颜色赋值行，从本次的颜色池中取色

// 把原最后一行
this.color = colors[Math.floor(Math.random() * 8)];
// 替换为
this.color = currentColors[Math.floor(Math.random() * currentColors.length)];

效果说明 #

每次刷新/运行脚本时，都会自动从8种原始颜色里随机选1~8种作为本次粒子的可用颜色，所有粒子只会使用本次选定的颜色集合，不会超出范围。

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