楕円の色をランダムな色に変更する方法

Question

私はです。をJavascriptにして覚えたいです。 YouTubeにはJavascriptのチュートリアルを持っている人がいて、チュートリアルの最後に、彼がチュートリアルで行ったことを使ってコードを少し変更するように挑戦しています。彼はコーナーに当たったときにボールをバウンスさせるコードを書いて、バウンスするたびに新しい色にするよう挑戦しました。

"fill（200,0,200）;の前に//を置く場合にのみ、色を変更する関数を書くことができました。ただし、//を削除して "fill（200,0,200）;"を使用すると、 "fill（200,0,200）;の前に//色が変わっても、" pink "という色しか表示されません。

私の質問はそうです。 「fill（200,0,200）;」を維持しながら、楕円をランダムな色に変更するにはどうすればよいですか？

私はこの問題をかなりの時間をかけて解決しようとしましたが、勝ってはいけません。

var r,g,b; 

var ball = { 
x: 300, 
y: 200, 
xspeed: 4, 
yspeed: -3 
} 

function setup() { 
createCanvas(600, 400); 


} 

function draw() { 
background(0); 
move(); 
bounce(); 
display(); 
colorChange(); 
r = random(255); 
g = random(255); 
b = random(255); 

} 



function bounce() { 

if (ball.x > width || ball.x < 0) { 
    ball.xspeed = ball.xspeed * -1; 
} 

if (ball.y > height || ball.y < 0) { 
    ball.yspeed = ball.yspeed * -1; 
} 
} 

function display() { 
stroke(255); 
strokeWeight(4); 
fill(200,0,200); 
ellipse(ball.x, ball.y, 24, 24); 



} 

function move() { 
ball.x = ball.x + ball.xspeed; 
ball.y = ball.y + ball.yspeed; 

} 


function colorChange() { 
    if (ball.x >= width || ball.x <= 0 || ball.y >= height || ball.y<= 0) { 
    fill(r,g,b); 
    ellipse(); 


    } 



} 

Answer 1

質問には示されていないコードの多くは、私は非常に簡単にあなたに私は通常、やりたい作業のデモを与えることはできませんが、一般的に私はどうしたらまず最初にギブあるありますボールcolorプロパティ、それがボールに属しているものですので、：

var ball = { 
    x: 300, 
    y: 200, 
    xspeed: 4, 
    yspeed: -3, 
    color: { r: 200, g: 0, b: 200 } // else you could use an array [200, 0, 200] 
} 

だから、私たちの開始値を示します。

function colorChange() { 
    ball.color.r = random(255); 
    ball.color.g = random(255); 
    ball.color.b = random(255); 
} 

最後に私たちは、バウンス時にのみ色を変更したい：そうは次のように私は、ボールの色のプロパティを更新するためにcolorChange機能を調整したい

fill(ball.color.r, ball.color.g, ball.color.b); // or if using the array: fill(ball.color[0], ball.color[1], ball.color[2]); 

：fillへの通話は、今に変更されますこれをトリガーするのに最適な場所バウンスが検出された場合、既存のコードである（と方向の変更）：私はのためのショートカットを使用しました

function bounce() { 
    if (ball.x > width || ball.x < 0) { 
    ball.xspeed *= -1; 
    colorChange(); 
    } 

    if (ball.y > height || ball.y < 0) { 
    ball.yspeed *= -1; 
    colorChange(); 
    } 
} 

注意ball.yspeed = ball.yspeed * -1;を書きます。必要に応じて、などを使用してmove関数についても同じ処理を行うことができます。