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

今回もメモ帳だけで、HTMLJavaScriptを用いてブロック崩しを作っていきたいと思います!

  1. 準備編
  2. ボールを作ろう!
  3. 動くバーを作ろう!
  4. ブロックを作ろう! ←前回
  5. 完成させよう! ←今回

前回の第四回には、ボールが当たると壊れるブロックを作りました!

そして今回は、ブロック崩しの最終回として、今作っているものをもっとゲームっぽくするために、いろいろと少しずつ変えていきたいと思います!

今までの四回を見ていない方はぜひそちらを先に見てください!


色を変えてみよう!

前回作ったものは、白黒で質素ですね!

ここで、ボールやバー、ブロックにを付けてみましょう!

色の設定はすごく簡単!

ボールやバーの表示の前に、

CONTEXT.fillStyle = "red";

といったコードを入れればOKです!

今回は、ボールをオレンジ、バーを、ブロックをにしてみました!

…
CONTEXT.fillStyle = "green";
CONTEXT.fillRect(bar_x, bar_y, bar_width, bar_height);
…
CONTEXT.fillStyle = "orange";
CONTEXT.arc(ball_x, ball_y, ball_r, 0, 2 * Math.PI);
…
CONTEXT.fillStyle = "red";
CONTEXT.fillRect(block[i][0], block[i][1], block_width, block_height);
…

のように、それぞれの表示するコードの上に書けばOKです!

野菜みたいになっちゃいましたね笑

好きな色を英語で入力して、カラフルにしましょう!


ボールをだんだん速くしよう!

このままでは難易度的に簡単すぎますね!

なので、ブロックがなくなればなくなるほどボールのスピードを速くしましょう!

今回はブロックが一つ崩れるごとに、スピードを「5」から「6」に上げましょう!

ここで気を付けないといけないのが、
ball_speed_x, yは、今は「5」と「-5」のどちらかですね。

なので、ball_speed_x, yが正の時(0より大きいとき)は、

ball_speed_x = ball_speed_x + 1;
ball_speed_y = ball_speed_y + 1;

逆に、ball_speed_x, yが負の時(0より小さいとき)は、

ball_speed_x = ball_speed_x - 1;
ball_speed_y = ball_speed_y - 1;

としなければいけないですね。

なのでここでもif文を使って場合分けをしましょう!

ブロックとボールが当たったか判定する部分に今のを書き込みましょう!

とても長くなってしまうので、先に書きこむことをまとめます。

if (ball_speed_x > 0){
  ball_speed_x = ball_speed_x + 1;
} else {
  ball_speed_x = ball_speed_x - 1;
}
if (ball_speed_y > 0){
  ball_speed_y = ball_speed_y + 1;
} else {
  ball_speed_y = ball_speed_y - 1;
}

この上の分を、下の(ここに書き込む)と書いてある部分に書き込みましょう!

(コピペでもOKです!めんどくさいですよね。)

if (ball_x + ball_r >= block[i][0] && ball_x <= block[i][0] ) {
        if (ball_y >= block[i][1] && ball_y <= block[i][1] + block_height) {
          block[i][2] = true;
          ball_speed_x = - ball_speed_x;
          (ここに書き込む)
        }
      }

      if (ball_x >= block[i][0] + block_width && ball_x - ball_r <= block[i][0] + block_width) {
        if (ball_y >= block[i][1] && ball_y <= block[i][1] + block_height) {
          block[i][2] = true;
          ball_speed_x = - ball_speed_x;
          (ここに書き込む)
        }
      }

      if (ball_y + ball_r >= block[i][1] && ball_y <= block[i][1] ) {
        if (ball_x >= block[i][0] && ball_x <= block[i][0] + block_width) {
          block[i][2] = true;
          ball_speed_y = - ball_speed_y;
          (ここに書き込む)
        }
      }

      if (ball_y >= block[i][1] + block_height && ball_y - ball_r <= block[i][1] + block_height) {
        if (ball_x >= block[i][0] && ball_x <= block[i][0] + block_width) {
          block[i][2] = true;
          ball_speed_y = - ball_speed_y;
          (ここに書き込む)
        }
      }

(うまく関数を使ってまとめてみてもいいですね!)

ですが、このままでは、ボールが早くなりすぎて、バーをすり抜けてしまうことも出てくるでしょう!

なので、ボールのスピードの最大を「10」にしましょう!

つまり、

スピードが「10」以上なら、スピードを「10」にする

というコードを組み込みましょう。

これを先ほどと同様に、「10」と「-10」に対応させるため、

if (ball_speed_x > 10) {
  ball_speed_x = 10;
} else if (ball_speed_x < -10) {
  ball_speed_x = -10;
}

if (ball_speed_y > 10) {
  ball_speed_y = 10;
} else if (ball_speed_y < -10) {
  ball_speed_y = -10;
}

このようにしましょう!

あとは最後にどこにこれを入れるかですね!

実はどこでもいいんですが、今回は、

…
if (ball_speed_x > 10) {
  ball_speed_x = 10;
} else if (ball_speed_x < -10) {
  ball_speed_x = -10;
}

if (ball_speed_y > 10) {
  ball_speed_y = 10;
} else if (ball_speed_y < -10) {
  ball_speed_y = -10;
}

ball_x = ball_x + ball_speed_x;
ball_y = ball_y + ball_speed_y;
    
CONTEXT.beginPath();
CONTEXT.fillStyle = "orange";
CONTEXT.arc(ball_x, ball_y, ball_r, 0, 2 * Math.PI);
CONTEXT.fill();
…

のように、ボールを動かす前に入れましょう!


完成!

ということで、これで「ブロック崩し」が完成しました!✨

もっと自分好みにカスタマイズしたい方は、ぜひ変数の数字をたくさん変えてみましょう!

(例えば、block_widthを60に変えてみて、ブロックを横長にしたり)

今回作ったコードでは、変数の数字を少し変えるだけで全然変わったゲーム性を持つブロック崩しに仕上げることができます!

是非いろいろ挑戦してみてください!

もしよければ自分が作った作品のスクリーンショットなどをTwitterなどに送っていただけるとすごく喜びます!


最後に

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

このブログでは、ほかのゲームをメモ帳で作ったり、別のソフトを使ってゲームの開発をしたり、面白いゲームを紹介していたりしますので、

良ければぜひほかの記事も読んでみてください!

ここをクリックでメモ帳プログラミングの記事一覧に戻ることができます!

また、感想などあれば、コメントやTwitterの方でどしどし送ってください!