今のままだと、四角形や円が増え続けてしまうので、画面をリフレッシュする機能をつけましょう。
画面リフレッシュ時には、画面全体をランダムな色で塗りつぶそうと思います。

次のような流れで実現します。

• カウントアップ用の変数を1つ用意する
• キーボードを叩く度に、変数を1カウントアップする
• 変数の値が50を超えたら、画面をリフレッシュする

それではコードを書いていきましょう。

まずは、カウントアップ用の変数 count をコードの一番上で宣言してください。

let count = 0;

次に、キーボードを叩く度に変数を1カウントアップしたいので、
keyPressed 関数内の一番下に以下のコードを追加してください。

count++;

++ はインクリメントと呼び、変数の値を1増やすことを意味しています。
これで、キーボードを1回叩く度に、変数 count が1カウントアップされます。

最後に、変数の値が50を超えたら画面をリフレッシュする処理を記述しましょう。
「〜〜のとき、〜〜する」 という処理なので、条件分岐で実現します。
keyPressed 関数内の一番下に以下のコードを追加してください。

if (count > 50) {
  count = 0;
  background(randomR, randomG, randomB);
}

変数 count の値が50を超えると、 if 文の {} の内部の処理が実行されます。

if文の内部では、まず変数 count の値を0に戻しています。
この処理を書かないと、変数 count の値が50を超えたままになってしまい、if文内部の処理が実行され続けてしまいます。

次に、以下のコードで画面をリフレッシュしています。

background(randomR, randomG, randomB);

この background を使うと、ゲーム画面全体を指定した色で塗りつぶすことができます。
色は、前回宣言した変数 randomR randomG randomB を使いまわしました。
これでリフレッシュ時に、画面全体をランダムな色で塗りつぶすことができます。

無事にコードを書くことができたでしょうか？
よくわからなくなってしまった方は、このページ下部にコード全文を掲載していますので、確認してみてください。

それではゲームを起動してみましょう。
一定以上キーボードを叩くと、画面がリフレッシュされるようになったと思います！

これで、ゲームの最終完成イメージと同じになりました。
次のレッスンでは、最後の仕上げとして、音が鳴るようにしましょう！