四角形の色をランダムに変えてみよう

黒い四角形が表示されるだけでは味気ないですね。
今回は四角形の色をランダムに変えてみましょう。
前回のレッスンと同様にして実現することができます。

keyPressed 関数を次のように変更してみましょう。

function keyPressed() { let randomX = random(W); let randomY = random(H); let randomW = random(W / 4); let randomH = random(H / 4); let randomR = random(255); let randomG = random(255); let randomB = random(255); fill(randomR, randomG, randomB); rect(randomX, randomY, randomW, randomH); }

これで、四角形をランダムな色で、ランダムなサイズで、ランダムな位置に出現させることができるようになりました。

let randomR = random(255); let randomG = random(255); let randomB = random(255);

まずこの部分で、四角形の色(赤、緑、青)を保持する変数を宣言し、ランダムな数値を代入しています。

random(255);

色は0〜255の数値で指定するので、このようにしています。
色の指定方法について詳しく知りたい方は、次の入門コースの解説をご覧ください: 色を変えよう - 入門コース

そして、以下のコードによって四角形の色を指定しています。

fill(randomR, randomG, randomB);

これで、四角形をランダムな色で、ランダムなサイズで、ランダムな位置に描画することができるようになりました。

それではゲームを起動して、適当にキーボードを叩いて動作を確認してみましょう!
(ゲーム画面上をクリックしてからでないとキーボードが反応しない場合がありますので、まずゲーム画面のどこかをクリックしてから試してみてください)

ゲーム画面

次のレッスンでは、四角形だけでなく円も描画していきます。

オンライン相談

つまづいたときは

ランダムキャンバス
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.