为数组生成无限颜色

Question

我想创建一个充满随机颜色的数组，它永远不会运行生成随机颜色的随机球。因此，我希望每个球都有不同的颜色，而不是只有 5 种颜色（蓝色、红色、绿色、黄色、白色）可供选择。

我已经试过了：

var randomColor = Math.floor(Math.random()*16777215).toString(16);

这里我只为每个球获得一种随机颜色。我也已经使用了循环，这可能是正确的答案，但我只是错误地实现了它。

JS:

var ballArray = [];
var colorArray = ['blue','red','green','yellow','white'];
var gravity = 0.9;

function drawBall() {
    for (var i = 0; i < ballArray.length; i++) {
        var ball = ballArray[i];
        ctx.fillStyle = ball.color;
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
        
        ball.x += ball.xd;
        if (ball.x + ball.radius > screenWidth || ball.x - ball.radius < 0) {
            ball.xd *= -1;
        }

Answer 1

我不确定我是否理解正确。你想让每个球有不同的随机颜色而不重复颜色吗？或者只是修复第二个 JSFiddle 代码以生成带有随机数的球而不闪烁？

如果您希望每个球都有一个唯一的颜色，您可以将已经使用过的颜色存储在一个数组中，并检查数组中是否包含新生成的颜色。为此，我将使用此代码：

var ballArray = [];
var usedColors = [];
var gravity = 0.9;

function generateNewColor() {
      var letters = '0123456789ABCDEF';
      var colorIncluded = true;

      while (colorIncluded == true) {
        var color = '#';
        // generate new color
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        // check if the color is already used
        var used = false;
        for(var i = 0; i < usedColors.length; i++){
          if(usedColors[i] == color){
            used = true;
            break;
          }
        }
        if(!used){ break; }
      }
      usedColors.push(color);
      return color;
}

不过这种方法对于大量生成的球不是很有效。

要修复代码中的闪烁，只需删除 Ball() 函数中 returns 随机数的函数：

this.color = getRndColor();

并在 drawBall() 函数中使用生成的颜色：

ctx.fillStyle = ball.color;

Answer 2

直接定义你的randomColor，替换

this.color = colorArray[randomNumber(0, colorArray.length - 1)];

和

this.color = '#' + Math.floor(Math.random()*16777215).toString(16);

为数组生成无限颜色

Generate Infinite Colors for Array

javascript

html

arrays

random

colors