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

2022年2月21日

1. ゲームのスタートを作る
2. スペースを押すとゲームが始まるようにする
3. ゲームクリアを表示する
4. ゲームオーバーを表示する
5. 最後に

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

今回は、メモ帳だけでゲーム作ってみたのブロック崩しの番外編の１として、ゲームのリスタートを行えるようにしていきたいと思います！

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

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

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

ゲームのスタートを作る

ではまず初めに、ゲームオーバーを作ってリスタートが行えるようにするため、ゲームを開始するためのスタート画面的なものを作っていきましょう！

今回はスペースキーを押したらゲームが始まるようにしたいので、「スペースを押すとスタート‼」と画面に表示します。

画面に表示する方法はいろいろありますが、今回はHTMLのhタグを使います。

今まで書いてきたコードの上の方にあるBodyタグの部分に以下のように追記しましょう。

<body>
  <h1 id="gameStatus">スペースを押すとスタート‼</h1>
  <canvas width="500" height="800" style="border:1px solid black" id="canvas"></canvas>

あとでこの部分を他の表示に変えるので、「gameStatus」というIDを振りました。

これでゲームの開始が分かりやすくなりましたね！

あとはボールが勝手に動かないように、スペースを押すまでボールが動かないようにします。

ball_speed_x,yという変数でボールの速さを決定していたので、それを0に設定します。

let ball_speed_x = 0;
let ball_speed_y = 0;

この変数はすでに作っているはずなので、そこをどちらも0に変更しましょう。

これでボールが勝手に動くことはなくなったはずです！

スペースを押すとゲームが始まるようにする

では次にスペースを押すとゲームが始まるようにしていきましょう。

キーを押したときの処理は、左右の移動の際に作ったのでそこに追記していく形になります。

今回は、スペースを押したときに、ボールが止まっていたら、先ほどの文字の部分に「全て壊したらクリア‼」と表示してボールを動かすコードを作ります。

また、ゲームオーバーをした際にもスペースを押せばリスタートできるように、ブロックの状態をすべて壊されていない状態に戻すコードも差し込みます。

いろいろ作り方はありますので是非自身で考えてみて下さい！

私のコードは下に載せておきます！

    function keyDown(e) {
      if (e.code == "ArrowRight") {
        right_pressed = true;
      }
      if (e.code == "ArrowLeft") {
        left_pressed = true;
      }

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

「Space」の部分が追記した部分です。

これでスペースを押すとゲームが始まるようになるはずです。

また、blockという配列にブロックの状態が入っていて、それを「false」（壊れていない状態）に戻しているので、あとでゲームクリアやゲームオーバーの際にスペースを押すとゲームがリスタートできるようになっています！

ゲームクリアを表示する

ではゲームオーバーの前に、ゲームクリアを表示するコードを追加しましょう。

これはブロックを表示する際に、ブロックがすべて壊されているかをチェックして、壊されていたらゲームクリアを表示するという形にします。

ブロックの情報は配列の中に入っていて、配列の中がすべて「true」（ブロックが壊れている状態）になっているか調べる必要があります。

そしてそのコードの実装は少し難しいのですが、以下のように書けます。

    function drawBlock() {
      let flag = true;
      for (let i = 0; i < block.length; i++) {
        if (block[i][2] == false) {
          flag = false;
        }
      }

      for (let i = 0; i < block.length; i++) {
        if (block[i][2] == false) {
          CONTEXT.fillStyle = "red";
          CONTEXT.fillRect(block[i][0], block[i][1], block_width, block_height);
        }
      }
    }

最初の繰り返しが追記した部分ですが、「flag」という変数を作り、配列のすべてをチェックして、一つでも「false」があったらその「flag」を「false」に変えることによって、すべて「true」であることをチェックしています。

あとはこの「flag」が「true」であることを条件分岐で確認して、「ゲームクリア‼（スペースでリスタート）」と表示して、ボールのスピードを0に戻しましょう。

    function drawBlock() {
      let flag = true;
      for (let i = 0; i < block.length; i++) {
        if (block[i][2] == false) {
          flag = false;
        }
      }

      if (flag == true) {
        document.getElementById("gameStatus").innerHTML = "ゲームクリア‼（スペースでリスタート）";
        ball_speed_x = 0;
        ball_speed_y = 0;
      }


      for (let i = 0; i < block.length; i++) {
        if (block[i][2] == false) {
          CONTEXT.fillStyle = "red";
          CONTEXT.fillRect(block[i][0], block[i][1], block_width, block_height);
        }
      }
    }

これですべて壊した状態になったら、ゲームクリアと表示されるようになります！

ゲームオーバーを表示する

では今回の最後の、ゲームオーバーを作ってリスタートできるようにしましょう。

これは意外と簡単で、ボールの位置が画面外（y座標が画面の高さより大きい状態）の時にゲームオーバーと表示するだけです。

なのでこんな感じで書けます。

      …ボールを動かす処理…
      if (ball_x >= bar_x && ball_x <= bar_x + bar_width) {
        if (ball_y + ball_r >= bar_y && ball_y + ball_r <= bar_y + bar_height) {
          ball_speed_y = - ball_speed_y;
        }
      }

      if (0 + ball_r > ball_x + ball_speed_x) {
        ball_speed_x = - ball_speed_x;
      }

      if (0 + ball_r > ball_y + ball_speed_y) {
        ball_speed_y = - ball_speed_y;
      }

      if (ball_y > canvas_height) {
        document.getElementById("gameStatus").innerHTML = "ゲームオーバー‼（スペースでリスタート）";
        ball_speed_x = 0;
        ball_speed_y = 0;

        ball_x = 250;
        ball_y = 700;
      }

最後の条件分岐のところですね。

また、ボールの位置をリセットしないといけないので、ここに書いておきます。

これでゲームオーバーが実装でき、またスペースを押すとゲームがリスタートできるようになりました！