ここで一度、コードを関数にまとめて整理しておきましょう。

一連のまとまりのある処理を関数にまとめて整理しておくと、
コードの量が増えてきたときにも読みやすいコードになります。

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

まず、現在の draw 関数の中身は以下のようになっていますね。

function draw() {
  block.x--;
  if (block.x < -block.w / 2) {
    block.x = 400 + block.w / 2;
  }
  image(skyImage, 200, 200, 400, 400);
  image(blockImage, block.x, block.y, block.w, block.h);
}

このコードは大きく分けると、
前半：ブロックの位置を計算している
後半：ゲーム画面を描画している
となっています。

そこで、前半と後半に分けて関数としてまとめておきましょう。

次のようにコードを変更してください。

function draw() {
  updateGame();
  drawGame();
}

function updateGame() {
  block.x--;
  if (block.x < -block.w / 2) {
    block.x = 400 + block.w / 2;
  }
}

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

前半の処理を updateGame 関数に、
後半の処理を drawGame 関数にまとめ、
それら2つの関数を draw 関数から呼び出す形としました。

関数としてまとめただけなので、コード全体の処理内容は変わっていません。
updateGame 関数と drawGame 関数と名付けたことで、コードの意味もわかりやすくなりました。

• updateGame 関数：ゲームの状態を更新する関数
• drawGame 関数：ゲームを描画する関数

それではゲームを起動して、前回と同様に動くことを確認しておきましょう。