Javascript zufällige Farbe "Ball" funktioniert nicht richtig

Question

Ich habe dieses Projekt, ich arbeite an, und müssen diese "Ball" eine zufällige Farbe aus dem Start-up haben. Ich kann die zufällige Farbe erzeugen, aber der Ball erzeugt ständig neue Farben während des gesamten Laufs auf dem Bildschirm. Ich brauche nur, dass jeder Ball eine zufällige Farbe hat. Hilfe?! Ich bin nur ein Anfänger, also weiß ich noch nicht viel! Hier ist mein Code zur Zeit:

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; 
} 

Answer 1

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; 

} 

Answer 2

Der beste Weg, dies zu tun ist, um einen Kreis Objekt zu machen. Sie legen die Farbe des Objekts fest, wenn Sie es zum ersten Mal erstellen, und das ändert sich nie. Und Sie aktualisieren die Position des Kreises jedes Mal, wenn Sie es zeichnen. Auf diese Weise können Sie mehrere Kreisobjekte mit jeweils unterschiedlicher zufälliger Farbe erstellen. Hier ist mein Versuch mit zwei Kreisen (ungetestet, also vorsichtig behandeln!).

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); 
} 

Hier new Circle() schafft ein neues Kreis-Objekt, und wird nur einmal für jeden Kreis, in der startGame Funktion aufgerufen. Jeder Kreis wird mit seiner Methode draw gezeichnet, die für beide Kreise in der drawEverything-Funktion fortlaufend aufgerufen wird. Die prototype in der Draw-Methode bedeutet, dass wir den Code für die verschiedenen Kreise teilen können, aber die Kreise selbst können unterschiedliche Werte haben (this in der Circle-Funktion und die Zeichenmethode bezieht sich auf das aktuelle Kreisobjekt). Eine Einführung in die Objektorientierung in JavaScript finden Sie unter the MDN docs.