【初心者向け】番外編２　メモ帳だけでゲーム作ってみた〈ブロック崩し編〉

2022年4月22日

どうも、こんにちは。
ただの大学生です。

今回は、メモ帳だけでゲーム作ってみたのブロック崩しの番外編２として、最初にボールがランダムな方向を向いて進むようにしていきたいと思います！

ブロック崩しの記事をまだ見たことがない方は是非そちらから読んで、ブロック崩しを作ってみましょう！

【初心者向け】第一回メモ帳だけでゲーム作ってみた〈ブロック崩し編〉

「プログラミングって難しいソフトとか入れないとできないよね？」そう考えている方はきっと多いはず。でも実際は…

まだ、前回の記事をまだ読んでいないかたは是非こちらも読んでみて下さい！
ゲームを開始するためにキーを押す処理などを実装していますので是非！

【初心者向け】番外編１　メモ帳だけでゲーム作ってみた〈ブロック崩し編〉

どうも、こんにちは。ただの大学生です。今回は、メモ帳だけでゲーム作ってみたのブロック崩しの番外編の１として、…

1. ボールをランダムな向きに進ませるには？
2. １つ目：簡単な実装
3. ２つ目：三角関数を実装した処理
4. 最後に

ボールをランダムな向きに進ませるには？

今回、ボールをランダムな向きに進ませる案として、２通りの方法をご説明していきたいと思います！

１つ目の処理は比較的誰でも分かりやすい内容にしていて、２つ目の処理は高校数学の内容を挟みますので、是非皆さん自身に合った処理を実装してみましょう。

また、チャレンジしてみたい方は是非二つとも実装してみて、どちらがどのように違うか考えてみましょう！

１つ目：簡単な実装

ではまず初めに簡単な方法からやってみましょう！

前回の番外編で、スペースキーを押すとゲームが始まるようにしましたが、これはスペースキーを押すと、ボールにスピードを与えることでゲーム開始ということにしていました。

なので、スペースキーを押した際にボールのスピードがランダムになるようなコードにすればうまくいくはずです。

JavaScriptには、0から1のランダムな数を生成する関数があるのでそれを用いて、ボールのにランダムで出るようにしてみます。

      if (e.code == "Space") {
        if (ball_speed_x == 0 && ball_speed_y == 0) {
          document.getElementById("gameStatus").innerHTML = "全て壊したらクリア‼";
          ball_speed_x = 5;
          ball_speed_y = -5;

          for (let i = 0; i < block.length; i++) {
            block[i][2] = false;
          }
        }
      }

このコードの、ball_speed_xとyをうまくランダムにしていきます。

具体的には、

ball_speed_xは左右に動く変数なので、-10から+10までのランダムな数に、
ball_speed_yは上下に動く変数で、最初は必ず上に進まないといけないので、-10から0までのランダムな数に

していきたいと思います！

Math.random()という関数を使えば、0から1のランダムな数を出せるのですが、そこに掛け算や足し算をしてあげることによって上の条件を満たすようにしてみましょう。

少し考えてみて、下のコードを見てみましょう！

      if (e.code == "Space") {
        if (ball_speed_x == 0 && ball_speed_y == 0) {
          document.getElementById("gameStatus").innerHTML = "全て壊したらクリア‼";
          ball_speed_x = Math.random() * 20 - 10;
          ball_speed_y = Math.random() * -10;

          for (let i = 0; i < block.length; i++) {
            block[i][2] = false;
          }
        }
      }

Math.random() * 20 – 10とすることで、0から1のランダムな数を、0から20のランダムな数にして、最後に10を引くことで-10から10のランダムな数になるように調整しています。

yの方も同じようにして-10から0までのランダムな数に調整しています！

これでうまく最初の動く方向がランダムになるはずです！

２つ目：三角関数を実装した処理

先ほどの処理でももちろん大丈夫なのですが、実際に動かしてみるとボールのスピードにばらつきがあることが分かると思います。

これはなぜかと言うと、xとyの動くスピードをランダムにしたためです。

ではスピードを変えずに最初に進む向きだけランダムにしたければどうすればいいのかとなると、ここで高校数学で学んできた三角関数というのを用いることになります。

（180度まで拡張した三角関数なので数2かな？）

そしてここでは角度をランダムにすることによってランダムなスピードを得られるようになって、その時のball_speed_xがcosΘ、ball_speed_yがsinΘになるようにします。

sinやcosはMath.sin(角度)とすることで計算することが出来ますし、またここでの角度は弧度法にしなければならないので、円周率（π）をつかわないといけませんが、Math.PIで出すことが出来ます。

ではそれを踏まえたうえでコードがどうなるか考えて下を見てみましょう。

      if (e.code == "Space") {
        if (ball_speed_x == 0 && ball_speed_y == 0) {
          document.getElementById("gameStatus").innerHTML = "全て壊したらクリア‼";
          let radian = Math.random() * Math.PI;
          ball_speed_x = 10 * Math.cos(radian);
          ball_speed_y = -10 * Math.sin(radian);

          for (let i = 0; i < block.length; i++) {
            block[i][2] = false;
          }
        }
      }

まず初めにradionというランダムな角度の変数を作りました！

今回は180度方向でランダムにすればよかったので0から1のランダムな数にπをかけることで、弧度法で0からπ（180度）のランダムな角度を得ています。

そしてそれをcosとsinでスピードに変換しています。

また、sinとcosは最大値が1なので、スピードを調整するために10をかけています。

これは皆さんの好きな数値にしましょう！

これで、おそらくボールがスピードは同じでランダムな向きで飛ぶようになったはずです！

お疲れ様です‼