画面のリフレッシュ機能を作ろう
今のままだと、四角形や円が増え続けてしまうので、画面をリフレッシュする機能をつけましょう。
画面リフレッシュ時には、画面全体をランダムな色で塗りつぶそうと思います。
次のような流れで実現します。
- カウントアップ用の変数を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
を使いまわしました。
これでリフレッシュ時に、画面全体をランダムな色で塗りつぶすことができます。
無事にコードを書くことができたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を掲載していますので、確認してみてください。
それではゲームを起動してみましょう。
一定以上キーボードを叩くと、画面がリフレッシュされるようになったと思います!
これで、ゲームの最終完成イメージと同じになりました。
次のレッスンでは、最後の仕上げとして、音が鳴るようにしましょう!