ゲームの最終形は次のようなものでした。
四角形や円がランダムに出現していますが、これはキーボードを叩く度に出現するようになっています。

まずこのレッスンでは、キーボードを叩くと四角形が出現するというコードを書いてみましょう。

キーボードが押されたことを検出するには、 keyPressed 関数を使います。
これはライブラリに予め用意されている関数で、キーボードが押されると実行されます。

それでは、オンラインエディタのコードの一番下の行に、以下のコードを追加してみましょう。

function keyPressed() {
  fill(0);
  rect(100, 100, 50, 50);
}

これで、キーボードが押されると四角形を描画するという処理を記述することができました。

fill(0);

このコードで、四角形の色を黒に指定しています。

rect(100, 100, 50, 50);

このコードで、X座標100・Y座標100・横幅50・縦幅50の四角形を描画しています。
四角形を描画するには rect を使います。

rect(X座標, Y座標, 横幅, 縦幅);

のように指定します。

それではゲームを起動してみましょう。
コードが上手く書けているか不安な方は、このページ下部にコード全部を掲載していますので、確認してみてください。

ゲームを起動して、適当にキーボードを押すと、黒い四角形が出現します。
（ゲーム画面上をクリックしてからでないとキーボードが反応しない場合がありますので、まずゲーム画面のどこかをクリックしてから試してみてください）

無事に四角形が出現したでしょうか？

次回以降のレッスンでは、四角形の位置や色をランダムに変えてみようと思います。