…
CONTEXT.fillStyle = "green";
CONTEXT.fillRect(bar_x, bar_y, bar_width, bar_height);
…
CONTEXT.fillStyle = "orange";
CONTEXT.arc(ball_x, ball_y, ball_r, 0, 2 * Math.PI);
…
CONTEXT.fillStyle = "red";
CONTEXT.fillRect(block[i][0], block[i][1], block_width, block_height);
…

のように、それぞれの表示するコードの上に書けばOKです！

好きな色を英語で入力して、カラフルにしましょう！

ボールをだんだん速くしよう！

このままでは難易度的に簡単すぎますね！

なので、ブロックがなくなればなくなるほどボールのスピードを速くしましょう！

今回はブロックが一つ崩れるごとに、スピードを「5」から「6」に上げましょう！

ここで気を付けないといけないのが、
ball_speed_x, yは、今は「5」と「-5」のどちらかですね。

なので、ball_speed_x, yが正の時（0より大きいとき）は、

ball_speed_x = ball_speed_x + 1;
ball_speed_y = ball_speed_y + 1;

逆に、ball_speed_x, yが負の時（0より小さいとき）は、

ball_speed_x = ball_speed_x - 1;
ball_speed_y = ball_speed_y - 1;

としなければいけないですね。

なのでここでもif文を使って場合分けをしましょう！

ブロックとボールが当たったか判定する部分に今のを書き込みましょう！

とても長くなってしまうので、先に書きこむことをまとめます。

if (ball_speed_x > 0){
  ball_speed_x = ball_speed_x + 1;
} else {
  ball_speed_x = ball_speed_x - 1;
}
if (ball_speed_y > 0){
  ball_speed_y = ball_speed_y + 1;
} else {
  ball_speed_y = ball_speed_y - 1;
}

この上の分を、下の（ここに書き込む）と書いてある部分に書き込みましょう！

（コピペでもOKです！めんどくさいですよね。）

if (ball_x + ball_r >= block[i][0] && ball_x <= block[i][0] ) {
        if (ball_y >= block[i][1] && ball_y <= block[i][1] + block_height) {
          block[i][2] = true;
          ball_speed_x = - ball_speed_x;
          （ここに書き込む）
        }
      }

      if (ball_x >= block[i][0] + block_width && ball_x - ball_r <= block[i][0] + block_width) {
        if (ball_y >= block[i][1] && ball_y <= block[i][1] + block_height) {
          block[i][2] = true;
          ball_speed_x = - ball_speed_x;
          （ここに書き込む）
        }
      }

      if (ball_y + ball_r >= block[i][1] && ball_y <= block[i][1] ) {
        if (ball_x >= block[i][0] && ball_x <= block[i][0] + block_width) {
          block[i][2] = true;
          ball_speed_y = - ball_speed_y;
          （ここに書き込む）
        }
      }

      if (ball_y >= block[i][1] + block_height && ball_y - ball_r <= block[i][1] + block_height) {
        if (ball_x >= block[i][0] && ball_x <= block[i][0] + block_width) {
          block[i][2] = true;
          ball_speed_y = - ball_speed_y;
          （ここに書き込む）
        }
      }

（うまく関数を使ってまとめてみてもいいですね！）

ですが、このままでは、ボールが早くなりすぎて、バーをすり抜けてしまうことも出てくるでしょう！

なので、ボールのスピードの最大を「10」にしましょう！

つまり、

スピードが「10」以上なら、スピードを「10」にする

というコードを組み込みましょう。

これを先ほどと同様に、「10」と「-10」に対応させるため、

if (ball_speed_x > 10) {
  ball_speed_x = 10;
} else if (ball_speed_x < -10) {
  ball_speed_x = -10;
}

if (ball_speed_y > 10) {
  ball_speed_y = 10;
} else if (ball_speed_y < -10) {
  ball_speed_y = -10;
}

このようにしましょう！

あとは最後にどこにこれを入れるかですね！

実はどこでもいいんですが、今回は、

…
if (ball_speed_x > 10) {
  ball_speed_x = 10;
} else if (ball_speed_x < -10) {
  ball_speed_x = -10;
}

if (ball_speed_y > 10) {
  ball_speed_y = 10;
} else if (ball_speed_y < -10) {
  ball_speed_y = -10;
}

ball_x = ball_x + ball_speed_x;
ball_y = ball_y + ball_speed_y;
    
CONTEXT.beginPath();
CONTEXT.fillStyle = "orange";
CONTEXT.arc(ball_x, ball_y, ball_r, 0, 2 * Math.PI);
CONTEXT.fill();
…

のように、ボールを動かす前に入れましょう！