コースを作ろう(補足)
次のレッスンが少し難易度が高いので、ここで補足レッスンをはさみます。
本レッスンは飛ばして次に進んでも問題はありません。
次のレッスンに取り組んでみて、よくわからないと思ったら本レッスンを読んでみてください。
次にやりたいことは、四角形を複数作ってコースを作ることでした。
単純に考えれば、前回のレッスンでこうなっていたコードを
function drawRoads() { fill(255); rect(200, 200, 150, 20); }
こうすれば実現はできます。
function drawRoads() { fill(255); rect(200, 0, 150, 20); rect(200, 20, 150, 20); rect(200, 40, 150, 20); ...(中略)... rect(200, 380, 150, 20); rect(200, 400, 150, 20); }
単純に、四角形を描画するコードをたくさん書いてみました。
しかし、これはプログラミングの考え方としてはあまり良くありません。
プログラミングでは、同じような処理を行う場合にコードをコピペして何度も書くことは良くないとされています。
このような場合は、 繰り返し処理 で記述しましょう。
(繰り返し処理について詳しく知りたい方は、こちらの解説をご覧ください→ 繰り返し処理とは - 入門コース )
繰り返し処理で記述すると、次のようになります。
function drawRoads() { fill(255); for(let i = 0; i < 21: i++) { rect(200, 20 * i, 150, 20); } }
コードがだいぶスッキリしましたね。
ゲームを起動してみてください。四角形が複数描画されて、コースができていると思います。
四角形を複数描画するだけであれば、これでOKです。
しかし、今後のレッスンでは、これらの四角形を動かしていきたいと考えています。
このコードでは四角形の座標は固定されてしまっているため、動かすことができません。
そこで、四角形の座標を変数で保持することにします。
今、四角形は21個あります。
これらの座標を保持するために、変数を21個分用意するのはあまり良くありません。
このような場合は、配列を活用します。
(配列について詳しく知りたい方は、こちらの解説をご覧ください→ 配列とは - 入門コース )
ではまず次のように配列を宣言してみましょう。
let roadsX = []; let roadsY = [];
これで、配列 roadsX
に21個の四角形のX座標を、配列 roadsY
に21個の四角形のY座標を格納することができるようになりました。
これでも良いのですが、もう一歩踏み込んで考えてみます。
四角形のX座標とY座標とは関連のあるデータです。
これらを保持するのにそれぞれ別々の配列を用意するよりは、1つにまとめたほうが良さそうです。
そこで、オブジェクトの配列として定義しようと思います。
(オブジェクトについて詳しく知りたい方は、こちらの解説をご覧ください→ オブジェクトとは - 入門コース )
オブジェクトとしては次のように定義しようと思います。
{ x: X座標の値, y: Y座標の値, }
配列の定義は次のようにします。ここに要素としてオブジェクトを追加していきます。
let roads = [];
配列 roads
に要素としてオブジェクトを追加する関数 createRoads
を定義します。
function createRoads() { roads = []; for (let i = 0; i < 21; i++) { roads.push({ x: 200, y: 20 * i, }); } }
createRoads
関数は setup
内で呼び出します。
createRoads
関数が実行されることで、配列 roads
は次のような状態になります。
roads = [ {x: 200, y: 0}, {x: 200, y: 20}, {x: 200, y: 40}, ...(中略)... {x: 200, y: 400}, ]
これで準備は整いました。
最後に drawRoads
関数を次のように変更することで、配列 roads
に入っている要素のオブジェクトを1つ1つ取得して、四角形を描画できます。
function drawRoads() { fill(255); for (let i = 0; i < roads.length; i++) { rect(roads[i].x, roads[i].y, 150, 20); } }
よくわからなくなってしまった方は、このページの下部にコード全文を載せていますので、確認してみてください。
それではゲームを起動してみましょう。
このような画面になっていれば、成功です!
次のレッスンでは、上記の内容をより簡潔に説明しています。