我想創建一個充滿隨機顏色的陣列，它永遠不會用完以生成具有隨機顏色的隨機球。因此，我希望每個球都有不同的顏色，而不是只有 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;
}
uj5u.com熱心網友回復：
我不確定我是否理解正確。您是否希望每個球具有不同的隨機顏色而沒有顏色重復？或者只是修復第二個 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() 函式中回傳亂數的函式：
this.color = getRndColor();
并在 drawBall() 函式中使用生成的顏色：
ctx.fillStyle = ball.color;
uj5u.com熱心網友回復：
直接定義你的randomColor，替換
this.color = colorArray[randomNumber(0, colorArray.length - 1)];
和
this.color = '#' Math.floor(Math.random()*16777215).toString(16);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/486410.html
標籤：javascript html 数组 随机的 颜色