ブロックをループさせて動かそう
現時点では、ブロックが画面の左に消えていくと、そのまま消えたままになっています。
そこで今回のレッスンでは、画面の左に消えたブロックを画面右に復活させて、ループするようにしましょう。
ブロックが画面の左に消えたときに、画面右に復活させるという処理をコードで実現する場合、
条件分岐を利用します。
条件分岐について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
条件分岐 - 入門コース
それでは、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); }
以下のコードを追加しました。
if (block.x < -block.w / 2) { block.x = 400 + block.w / 2; }
この条件分岐のコードで、ブロックが画面左に消えた場合、画面右に移動する処理を記述しています。
if (block.x < -block.w / 2)
もしブロックのX座標が、画面左に消えたらという条件を指定しています。
-block.w / 2
としているのは、このときにちょうどブロックが画面左に消えるためです(下記画像参照)。
block.x = 400 + block.w / 2;
そしてこのコードで、ブロックを画面右に移動しています。
ゲーム画面の横幅400に、block.w / 2
を足した値を指定しています。これで画面右端ちょうどになります。
それではゲームを起動してみましょう。
ブロックがループして動くようになったと思います!