コースを作ろう(補足)

次のレッスンが少し難易度が高いので、ここで補足レッスンをはさみます。
本レッスンは飛ばして次に進んでも問題はありません。
次のレッスンに取り組んでみて、よくわからないと思ったら本レッスンを読んでみてください。

次にやりたいことは、四角形を複数作ってコースを作ることでした。

単純に考えれば、前回のレッスンでこうなっていたコードを

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); } }

よくわからなくなってしまった方は、このページの下部にコード全文を載せていますので、確認してみてください。

それではゲームを起動してみましょう。

コースが生成されたゲーム画面

このような画面になっていれば、成功です!

次のレッスンでは、上記の内容をより簡潔に説明しています。

オンライン相談

つまづいたときは

レーシングゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.