ブロックをループさせて動かそう

現時点では、ブロックが画面の左に消えていくと、そのまま消えたままになっています。
そこで今回のレッスンでは、画面の左に消えたブロックを画面右に復活させて、ループするようにしましょう。

ループして動くブロック

ブロックが画面の左に消えたときに、画面右に復活させるという処理をコードで実現する場合、
条件分岐を利用します。

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

それでは、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 を足した値を指定しています。これで画面右端ちょうどになります。

それではゲームを起動してみましょう。
ブロックがループして動くようになったと思います!

ループして動くブロック

オンライン相談

つまづいたときは

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

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.