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

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

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

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

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


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

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

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

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


1つ目:簡単な実装

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

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

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

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までのランダムな数に調整しています!

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


2つ目:三角関数を実装した処理

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

これはなぜかと言うと、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をかけています。

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

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

お疲れ様です‼


最後に

というわけで今回はブロック崩しでゲームのスタート画面やゲームオーバー画面などを作ってみました!

かなりシンプルに作りましたので、いろいろ調べてみてカスタマイズしてみても面白いかもしれないですね!

また、今回作ったファイルを置いておきますので、分からない部分があればこちらも活用してみて下さい!

長くなってしまいましたが、

最後まで読んでいただきありがとうございました!

このブログでは、他にも初心者向けのプログラミングの記事やゲーム紹介の記事を書いていますので、良ければ是非読んでみて下さい!

おすすめ記事: