【中級者向け】第一回メモ帳だけでゲーム作ってみた〈ぷよぷよ編・続〉

2020年11月5日

1. 今回作るもの
2. コードを書いていこう！
3. うまくいかなかった方向け
4. 今回はここまで！

今回からなんと、七回続いていたメモ帳プログラミングのぷよぷよシリーズの続編を始めていきたいと思います！

前編の第一回のURLも載っけて置きます！

【中級者向け】第一回メモ帳だけでゲーム作ってみた〈ぷよぷよ編〉

プログラミングの知識は少し持っているけど、ゲーム作るのにはいろいろと準備したりソフト入れたりしないといけないか…

今回作るもの

続編として始めていきます「ぷよぷよ編・続」では、全５回に分けて進めていきたいと思います！

落ちる場所を表示しよう！　←今回
壁にぶつかっている状態でも回転できるようにしよう！
設置する前にすこし動かせるようにしよう！
スコアを表示しよう！
コードをまとめてきれいにしよう！

続編では、主にぷよぷよとしての完成度を上げていきたいと思います！

そして今回は、下に置かれるぷよが表示されるようにしていきたいと思います！

完成イメージは以下のとおりです。

ぷよの下に置かれる場所が表示されていますね！

コードを書いていこう！

というわけでさっそくコードを書いていきましょう！

続編は、前編と違い説明を少なくしていきたいと思います。

なので、少し難しいと感じるかもしれませんが、同じようなコードを組んでいくことになるので、前編のほうをまた読み返すことによってわかる場面も多いと思います！

自分のスピードで進めていきましょう～♪

関数を作る

まず初めに、今回作っていく関数を作っていきましょう！

function resetFall(e) {
  …省略…
}

let timer = setInterval(downPuyo, 1000 / 60);

function drawDropPuyo() {

}

function drawField() {
   …省略…
}

「drawDropPuyo」という関数を作りました！

ここに下に表示させる落ちる場所のコードを書いていきたいと思います！

さっきの関数をぷよが表示するときに実行させる

では次に、先ほど作った「drawDropPuyo」をぷよが表示されるときに実行されるようにしましょう！

これはすごく簡単で、ぷよが表示するコードに「draDropPuyo();」を書き込むだけです！

…
function drawField() {
  CONTEXT.clearRect(0, 0, 400, 600);
  CONTEXT.beginPath();
  CONTEXT.moveTo(300, 0);
  CONTEXT.lineTo(300, 600);
  CONTEXT.stroke();

  drawNextPuyo();

  if (stop == false) {
    drawDropPuyo();

    switch (color[0]) {
      case 1:
      CONTEXT.fillStyle = "red";
      break;
      case 2:
      …

もちろん、ぷよが下について連鎖が起きているときには表示させたくないので、「stop == false」のときだけ実行するif文がすでにあると思うので、そこに追記しましょう！

置かれる場所を表示させるコードを書いていく

では今回の目的であった置かれるぷよの場所を表示するコードを書いていきましょう！

もちろん書く場所は最初に作った「drawDropPuyo」という関数の中ですよ！

書いていくコードとしては、どこに落ちるかを計算してその場所にぷよよりは２周りほど小さい丸を表示するといったものですね！

そしてどこに落ちるかというのを計算するには、forループとif文で下にぷよが置かれているかおかれていないかというのを１つずつチェックしていきます！

まずは、ゲームを始めて１つめのぷよの置かれる場所を表示しましょう。

まだなにもぷよが置かれていないので、一番下に表示されるはずですね！

ですが次にぷよが置かれているときを考えるため、forループを使ってこのように書きましょう！

function drawDropPuyo() {
  for (let i = Math.ceil(position[1]); i < 12; i++) {
    if (i >= 11 || (i + child[1]) >= 11) {
      CONTEXT.beginPath();
      CONTEXT.arc(position[0] * 50 + 25, i * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      CONTEXT.beginPath();
      CONTEXT.arc((position[0] + child[0]) * 50 + 25, (i + child[1]) * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      break;
    }
  }
}

＊表示する丸の大きさは少し小さくするので、半径の大きさを「5」に設定しました！

まずは、ぷよの位置のy座標を知りたいので、「Math.ceil(position[1])」で（ceilは切り上げ）を「i」に入れて繰り返しを始めました！

そして、その「i」が１つ１つ増やしていき（y座標が増えていくので、画面でいう下のほうになっていく）、下に着いたらそこに表示させるようにしています！

また、「break;」という新しいものが出てきましたね！

「break」というものを書くと、forループを途中でやめて抜け出すことができます！

この状況では必要ないのですが、続きのコードを書いていくうえで必要になってくるので、今は「break」というものがあるということだけ覚えておいてください！

さらに、このままでは色の設定がうまくいってないので、switch文を使って色の設定をしないとだめですね！

function drawDropPuyo() {
  for (let i = Math.ceil(position[1]); i < 12; i++) {
    if (i >= 11 || (i + child[1]) >= 11) {
      switch (color[1]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc(position[0] * 50 + 25, i * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      switch (color[0]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc((position[0] + child[0]) * 50 + 25, (i + child[1]) * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      break;
    }
  }
}

これでオッケーですね！

では次に２つ目以降のぷよについて考えていきましょう。

２つ目以降のぷよはすでに置かれているぷよがないかどうかを調べていかないといけないので、少し難しいです。

function drawDropPuyo() {
  for (let i = Math.ceil(position[1]); i < 12; i++) {
    if (i >= 11 || (i + child[1]) >= 11) {
      switch (color[1]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc(position[0] * 50 + 25, i * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      switch (color[0]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc((position[0] + child[0]) * 50 + 25, (i + child[1]) * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      break;
    }else if (field[i + 1][position[0]] > 0 || field[i + child[1] + 1][position[0] + child[0]] > 0) {
      switch (color[1]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc(position[0] * 50 + 25, i * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      switch (color[0]) {
        case 1:
        CONTEXT.fillStyle = "red";
        break;
        case 2:
        CONTEXT.fillStyle = "yellow";
        break;
        case 3:
        CONTEXT.fillStyle = "blue";
        break;
        case 4:
        CONTEXT.fillStyle = "green";
        break;
      }
      CONTEXT.beginPath();
      CONTEXT.arc((position[0] + child[0]) * 50 + 25, (i + child[1]) * 50 + 25, 5, 0, 2 * Math.PI);
      CONTEXT.fill();
      break;
    }
  }
}

とても長くなりましたが、一番大事なのはelse ifの括弧の中です！

else if (field[i + 1][position[0]] > 0 || field[i + child[1] + 1][position[0] + child[0]] > 0)

親ぷよか子ぷよのどちらかの下にぷよがあるときに、その上に表示したいため、「i + 1」の場所（１つ下の場所）を調べて、そこにぷよがあるときにはその一個上に表示するといった形になっています！

ここは長くて非常にややこしいと思いますが、大体理解出来たら十分だと思います！

そしてこれで完成です！
完成イメージと同じように動作しているはずです！