今回のレッスンではコースに変化をつけていきます。

今回は次のような曲線のコースにしたいと思います。

本講座では、三角関数のsin関数を使ってこの曲線を表現します。

三角関数のsin関数は次のようなグラフになります。
周期的に変化する曲線なので、今回のコースにぴったりですね。
このsin関数を使って四角形のX座標を変化させていきます。

draw 関数のコードを次のように変更してください。

function draw() {
  for (let i = 0; i < roads.length; i++) {
    roads[i].y += 1;
    if (roads[i].y >= 410) {
      roads[i].x = 200 + 100 * sin(frameCount * 0.01);
      roads[i].y = -10;
    }
  }
  background(0);
  drawRoads();
  drawPlayer();
}

次のコードを追加しました。

roads[i].x = 200 + 100 * sin(frameCount * 0.01);

四角形が画面下に消えて、画面上に持ってくるときに、
sin関数を使ってX座標を設定しています。

sin関数は0を中心に-1〜1をとる関数なので、ゲーム画面の座標に合うように調整を加えています。
まず、 200 を加えることによって、画面の真ん中を中心に変化するようにしています。
次に、100 をかけることによって、画面横方向に大きく変化するようにしています。

最後に frameCount * 0.01 の部分ですが、
frameCount にはゲームの現在のフレーム数が格納されています。
フレーム数は、 draw 関数が実行されるたびにどんどん1ずつ増えていく数です。
これに 0.01 をかけることで、sin関数がゆっくり変化するようにしています。

それではゲームを実行してみましょう。

上のようになっていれば成功です！

100 や 0.01 の数字を変化させてみると、コースの形が変わります。
ぜひ色々と試してみてください。