js ランダム色変更

Question

今jsでブロック崩しゲームを作っていて、壁にボールが当たったら色がランダムで変更されるというプログラミングをこのコードの中に入れたいのですが初心者であまりわからなく、どこに、どういうコードを入れたらいいのか教えてもらえたら幸いです

ソースコードはこれです

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

x += dx;
y += dy;

}

setInterval(draw, 10);

Comments

[yambejp]

ソースはテキストで例示ください

[m.ts10806]

質問は編集できますし、コメント欄ではマークダウン利用できませんので質問本文を更新してご対応ください。

[m.ts10806]

＞初心者であまりわからなく
「初心者アイコン」をつけてください。

[what]

了解です

[m.ts10806]

マークダウンもご対応願います。
特にコード部分はそのまま平で提示されてもインデントが詰められたり、手動コピーする必要があったりして単純な動作確認が難しくなります。
https://teratail.com/help#about-markdown

Answer 1

壁にボールが衝突した場合の処理をif分で追加すればいいんじゃないでしょうか。
そこでR・G・Bの３つのコードをそれぞれランダム関数で作ればランダムで色を出せるかと思います。
そのためにも、簡単な衝突検知できるコードを追記する必要があります。