ゲーム画面上に、障害物となるブロックを描画してみましょう。

ブロック画像のアップロード

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

ブロック画像の描画

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

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

let blockImage;

画像データを保持するための変数 blockImage を宣言しました。

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

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  skyImage = loadImage("sky.jpeg");
  blockImage = loadImage("block.jpeg");
}

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

blockImage = loadImage("block.jpeg");

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

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

function draw() {
  image(skyImage, 200, 200, 400, 400);
  image(blockImage, 200, 200, 30, 30);
}

これで、変数 blockImage に格納されている画像が描画されるようになります。
今回は、ゲーム画面の中心に、サイズ30×30で描画するように設定しました。

コードの変更は以上になります。
無事にコードを書けたでしょうか？
よくわからなくなってしまった方は、このページ下部にコード全文を載せていますので、確認してみてください。

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

ブロック画像が描画されました！