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

2020年11月9日2020年12月1日

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

今回も、前回までと同様にパソコンに標準装備されているメモ帳だけを使って、あの有名なパズルゲーム「ぷよぷよ」を作り、本家に近づけていきたいと思います！

前回の記事をまだ読んでいない方は、是非そちらを先に読んでください！

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

今回も、前回までと同様にパソコンに標準装備されているメモ帳だけを使って、あの有名なパズルゲーム「ぷよぷよ」を作…

今回作るもの

前回は、壁やぷよが横にある状態でも回転できるようにしましたね。

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

そして今回は、設置する前にぷよを動かせるようにして、操作性をグンと良くして行きたいと思います！

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

置く前に猶予があることによってさまざまな操作ができるようになっていますね！

操作性を上げるコードを組むのは、今回が最後になりますね～

コードを書いていこう！

ではさっそくコードを書いていきましょう☺

先ほども書いた通り、操作性を上げるのは今回で最後ですが、すごく操作性が良くなって遊んでいて楽しくなってきます！

是非最後まで読んで、完成させましょう！

前回のコードに追加する

今回、ぷよを設置する前に猶予を持たすことによって、前回のコードのままでは少しおかしくなってしまうことがあります。

なのでまず初めに、前回書いたコードに少し変更を加えていきます。

と言っても変える部分としては、壁やぷよが両端にあって180度回すしかないときのコードです。

こちらを180度回すだけでなく、1マス上に移動するように変更を加えます。

else {
  child[1] = -child[1];
  position[1] -= 1;
  direction = direction + 180;
}

＊同じ変更を加える場所は４か所あり、それらのすべてを変更しましょう！

１マス上に移動するには、positionのy座標を1減らせばいいですね。

ちなみに「-=」は「+=」のマイナスバージョンで、上のコードなら「１減らす」という意味になります。

変数を１つ作る

では次に今回使う変数を作りましょう。

…
let direction = 90;

let down_speed = 0.02;
let counter = 0;

let stop = false;
…

書く場所はどこでもいいですが、ぷよを落とすのに関係するので、「down_speed」の下に書いておくと後で探しやすいでしょう。

そして地面にぷよが付いたときに、この「counter」の数字を増やしていき、その数字が60になった時に（一定時間たった時に）ぷよが置かれるように変更を加えていきます。

「down_puyo」にぷよを置くまでの猶予を持たせる

では次に本題の、ぷよを置くまでの猶予を持たせましょう。

このぷよぷよのゲームでは、1秒間に60回計算しなおすようになっていましたね。

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

1000/60（ミリ秒）に一回「down_puyo」が実行されるようにしたからですね！

なので、ぷよを置くまでの猶予を今回は１秒とするので、「down_puyo」が実行されたときに1つだけ「counter」が増えるようにしたら、「counter」が60になった時にぷよを設置するといったコードにすればいいですね。

なので、「down_puyo」を以下のように書き換えましょう！

function downPuyo() {
  if (stop == false) {
    position[1] += down_speed;
    if (position[1] >= 11 || position[1] + child[1] >= 11) {
      if (counter > 60) {
        field[Math.floor(position[1])][Math.floor(position[0])] = color[1];
        field[Math.floor(position[1] + child[1])][Math.floor(position[0] + child[0])] = color[0];

        stop = true;

        checkField();
      }
      counter++;
    }else if (field[Math.floor(position[1]) + 1][Math.floor(position[0])] > 0 || field[Math.floor(position[1] + child[1]) + 1][Math.floor(position[0] + child[0])] > 0) {
      if (counter > 60) {
        field[Math.floor(position[1])][Math.floor(position[0])] = color[1];
        field[Math.floor(position[1] + child[1])][Math.floor(position[0] + child[0])] = color[0];

        stop = true;

        checkField();
      }
      counter++;
    }
  }
  drawField();
}

これで猶予を持たせることはできたのですが、少しこのままではおかしくなる部分があるので、そこだけ改善していきましょう。

ぷよが下に通り過ぎていく

先ほどまでのコードを実行すると、ぷよが地面に着いたときに画面を超えて下のほうに行ってしまいます。

これはなぜかというと、ぷよが置かれるまでの猶予は追加しましたが、その猶予を待っている間もぷよが下に進んでいってしまうからです。

なので、もし地面やぷよが下にあるときには下に進まないようにしましょう。

function downPuyo() {
  if (stop == false) {
    position[1] += down_speed;
    if (position[1] >= 11 || position[1] + child[1] >= 11) {
      if (counter > 60) {
        field[Math.floor(position[1])][Math.floor(position[0])] = color[1];
        field[Math.floor(position[1] + child[1])][Math.floor(position[0] + child[0])] = color[0];

        stop = true;

        checkField();
      }else {
        position[1] -= down_speed;
      }
      counter++;
    }else if (field[Math.floor(position[1]) + 1][Math.floor(position[0])] > 0 || field[Math.floor(position[1] + child[1]) + 1][Math.floor(position[0] + child[0])] > 0) {
      if (counter > 60) {
        field[Math.floor(position[1])][Math.floor(position[0])] = color[1];
        field[Math.floor(position[1] + child[1])][Math.floor(position[0] + child[0])] = color[0];

        stop = true;

        checkField();
      }else {
        position[1] -= down_speed;
      }
      counter++;
    }
  }
  drawField();
}

少し不格好ですが、一度進ませておいて、下に地面かぷよがあったら上にまた戻るといったコードにしています。

これで下は抜けなくなるはずですね。

二つ目以降のぷよに猶予がない

では次に２つ目以降のぷよに猶予がない問題を解決しましょう。

これはいたって簡単で、「counter」を0に戻していないからです。

なので、ぷよが置かれて新しいぷよになるときに「counter」も「0」に戻しましょう。

function nextPuyo() {
  color = next_puyo;
  next_puyo = next_next_puyo;
  next_next_puyo = [Math.floor(Math.random() * 4 + 1), Math.floor(Math.random() * 4 + 1)];

  position = [2, 1];
  child = [0, -1];
  direction = 90;
  counter = 0;
}

「nextPuyo」というのが次のぷよに移行する際の処理なので、ここに書き込むだけですね！

これで完成です！