次はプレイヤー（飛行機）を描画させてみましょう。

飛行機画像のアップロード

それではまず、ブロックと同じように飛行機画像をオンライエディタにアップロードしましょう。
以下の2つの画像をダウンロードして、ゲームの背景画像を設定しよう1 と同じ手順で、オンライエディタにアップロードしてください。

飛行機画像の描画

続いて、ゲームの背景画像を設定しよう2 と同じ手順で、飛行機画像を描画します。

オンラインエディタの一番上の行に、次のコードを追加してください。

let airplaneUpImage;
let airplaneDownImage;

画像データを保持するための変数 airplaneUpImage と airplaneDownImage を宣言しました。
上向きの飛行機と下向きの飛行機、2つ分です。

次に、 setup 関数を次のように変更してください。

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  skyImage = loadImage("sky.jpeg");
  airplaneUpImage = loadImage("airplaneUp.png");
  airplaneDownImage = loadImage("airplaneDown.png");
  blockImage = loadImage("block.jpeg");
  block = { x: 200, y: 200, w: 30, h: 30 };
}

以下のコードを追加しています。

airplaneUpImage = loadImage("airplaneUp.png");
airplaneDownImage = loadImage("airplaneDown.png");

この部分で、変数 airplaneUpImage と airplaneDownImage にアップロードした画像をセットしました。

次に、drawGame 関数を次のように変更してください。

function drawGame() {
  image(skyImage, 200, 200, 400, 400);
  image(airplaneDownImage, 100, 100, 50, 50);
  image(blockImage, block.x, block.y, block.w, block.h);
}

これで、変数 airplaneDownImage に格納されている画像が描画されるようになります。
今回は、(X座標, Y座標)=(100, 100)の位置に、サイズ50×50で描画するように設定しました。

それではゲームを起動してみましょう。

プレイヤー（飛行機）の画像が描画されました！

現時点ではまだ、ゲーム画面上の固定された位置に、下向きの飛行機を描画しただけになります。
次回以降のレッスンで、飛行機の動きと、動きに応じて上向きの飛行機を描画する処理を記述していきます。