コードを関数にまとめて整理しよう

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

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

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

まず、現在の 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 関数:ゲームを描画する関数

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

ループして動くブロック

オンライン相談

つまづいたときは

フライトゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.