コードを関数にまとめて整理しよう
ここで一度、コードを関数にまとめて整理しておきましょう。
一連のまとまりのある処理を関数にまとめて整理しておくと、
コードの量が増えてきたときにも読みやすいコードになります。
関数について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
関数とは - 入門コース
まず、現在の 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
関数:ゲームを描画する関数
それではゲームを起動して、前回と同様に動くことを確認しておきましょう。