前回のレッスンで、キーボードを押すと四角形を出現させることができたので、
今回は四角形の位置をランダムに変えてみましょう。

ランダムに変えるという処理をプログラミングで実現するためには、乱数というものを使います。

乱数について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
乱数とは - 入門コース

それでは、 keyPressed 関数を次のように変更してみましょう。

function keyPressed() {
  let randomX = random(W);
  let randomY = random(H);

  fill(0);
  rect(randomX, randomY, 50, 50);
}

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

let randomX = random(W);
let randomY = random(H);

まずこの部分で、四角形のX座標を保持するための変数 randomX と
四角形のY座標を保持するための変数 randomY を宣言し、乱数を使ってランダムな数値を代入しています。

random(W);

変数 W の値は800でした。よって、変数 randomX には0〜800までの間のランダムな数値が代入されます。

random(H);

こちらも同様です。

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

rect(randomX, randomY, 50, 50);

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

それではゲームを起動してみましょう。
キーボードを適当に叩いて、ランダムな位置に四角形が描画されていれば成功です！ （ゲーム画面上をクリックしてからでないとキーボードが反応しない場合がありますので、まずゲーム画面のどこかをクリックしてから試してみてください）

次のレッスンでは四角形のサイズを変えていきます。