Javascript隨機顏色「球」不能正常工作

我有這個項目，我正在努力，需要有這個「球」是一個隨機的顏色從啓動。我可以生成隨機顏色，但是球在整個畫面中不斷產生新的顏色。我只需要每一個球是一個隨機的顏色。幫幫我？！我只是一名介紹性學生，所以我還不太瞭解！這是目前我的代碼：Javascript隨機顏色「球」不能正常工作

var context; 
var x = Math.floor(450 * Math.random() + 1); 
var y = 0; 
var dx = 0; 
var dy = 2; 
var xx = 200; 

function startGame() { 
    context = myCanvas.getContext('2d'); 
    setInterval('drawEverything()', 50); 
} 

function drawEverything() { 
    drawCircle(); 
    drawRectangle(); 
} 

function drawCircle() { 
    context.clearRect(0, 0, 450, 300); 
    context.beginPath(); 
    context.arc(x, y, 10, 0, Math.PI * 2); 
    context.closePath(); 
    context.fillStyle = getRandomColor(); 
    context.fill(); 

    x += dx; 
    y += dy; 

} 

function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
}

來源

2017-05-08 Amber

您是否嘗試將顏色存儲在函數外定義的變量中，您使用'x'和'y'的方式？然後在'startGame（）'函數內設置一次顏色。 – nnnnnn

@nnnnnn是正確的。因爲您的「drawEverything（）」每隔50次執行一次，所以每次都會以新顏色*渲染球，因爲「drawEverything（）」會以新顏色生成新球。將顏色存儲在函數外部的變量中，然後它將保持不變。 –

var myRanColor = getRandomColor(); 
function drawCircle() 
{ 
context.clearRect(0,0,450,300); 
context.beginPath(); 
context.arc(x,y,10,0,Math.PI*2); 
context.closePath(); 
context.fillStyle=myRanColor; 
context.fill(); 

x+=dx; 
y+=dy; 

}

來源

2017-05-08 02:44:45 Paddy

要做到這一點，最好的辦法是讓一個圓的對象。當你第一次創建它時，你設置對象的顏色，並且永遠不會改變。每次繪製時都更新圓的位置。這樣你可以有多個圓形物體，每個物體都有不同的隨機顏色。這是我的兩個圈子的嘗試（未經測試，所以謹慎處理！）。

var circle1; 
var circle2; 

function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

function Circle() { 
    this.context = myCanvas.getContext('2d'); 
    this.color = getRandomColor(); 
    this.x = Math.floor(450 * Math.random() + 1); 
    this.y = 0; 
    this.dx = 0; 
    this.dy = 2; 
    this.xx = 200; 
} 

function Circle.prototype.draw() { 
    this.context.clearRect(0, 0, 450, 300); 
    this.context.beginPath(); 
    this.context.arc(this.x, this.y, 10, 0, Math.PI*2); 
    this.context.closePath(); 
    this.context.fillStyle = this.color; 
    this.context.fill(); 

    this.x += this.dx; 
    this.y += this.dy; 
} 

function drawEverything() 
{ 
    circle1.draw(); 
    circle2.draw(); 
} 

function startGame() 
{ 
    circle1 = new Circle(); 
    circle2 = new Circle(); 
    setInterval(drawEverything,50); 
}

這裏new Circle()創建一個新的圈子對象，並且只爲每個圓圈調用一次，在startGame功能。每個圓都使用其draw方法繪製，該方法在drawEverything函數中爲兩個圓圈連續調用。繪製方法定義中的prototype意味着我們可以共享不同圓圈的代碼，但圓圈本身可以具有不同的值（Circle函數中的this，draw方法引用當前的圓圈對象）。有關JavaScript中面向對象的介紹，請參閱the MDN docs。

來源

2017-05-08 03:14:22

Javascript隨機顏色「球」不能正常工作

回答

相關問題