JavaScript中无限随机颜色生成与应用实践

var colorArray = ['blue','red','green','yellow','white'];
// ...
this.color = colorArray[randomNumber(0, colorArray.length - 1)];

Math.floor(Math.random() * 16777215).toString(16);

// 假设这是您的Ball构造函数或创建函数的一部分
function Ball(x, y, radius, xd, yd) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.xd = xd;
    this.yd = yd;
    // 直接生成并赋值随机十六进制颜色
    this.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
}

// 如果是在循环中绘制，并且每个球需要不同的颜色，确保在创建球时赋值
// 示例：创建新的球并添加到ballArray
var ballArray = [];
var screenWidth = 800; // 示例屏幕宽度

function createNewBall() {
    var randomX = Math.random() * screenWidth;
    var randomY = Math.random() * 100; // 初始Y坐标
    var randomRadius = 10 + Math.random() * 20; // 随机半径
    var randomXD = (Math.random() - 0.5) * 5; // 随机X方向速度
    var randomYD = (Math.random() - 0.5) * 5; // 随机Y方向速度

    var newBall = new Ball(randomX, randomY, randomRadius, randomXD, randomYD);
    ballArray.push(newBall);
}

// 假设您有一个主循环来调用drawBall
function drawBall(ctx) { // ctx是Canvas的2D渲染上下文
    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;
        }
        // ... 其他物理逻辑
    }
}

// 首次加载时创建几个球
for (let i = 0; i < 10; i++) {
    createNewBall();
}
// 之后可以根据需要继续调用createNewBall()

function getRandomHexColor() {
    var randomNum = Math.floor(Math.random() * 16777215); // 生成0到16777215之间的整数
    var hexColor = randomNum.toString(16); // 转换为十六进制字符串
    // 使用padStart确保字符串至少有6位，前面用'0'填充
    return '#' + hexColor.padStart(6, '0');
}

// 在Ball构造函数中使用
function Ball(x, y, radius, xd, yd) {
    // ...
    this.color = getRandomHexColor();
}