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

2020年11月14日

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

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


今回作るもの

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

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

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

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

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

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


コードを書いていこう!

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

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

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


前回のコードに追加する

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

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

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

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

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

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

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

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


変数を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」が実行されるようにしたからですね!

なので、ぷよを置くまでの猶予を今回は1秒とするので、「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();
}

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

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


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

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

これはいたって簡単で、「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」というのが次のぷよに移行する際の処理なので、ここに書き込むだけですね!

これで完成です!


うまくいかなかった方向け

うまくいかなかった方は、まずエラーが出ていないか確認しましょう!

エラーの確認方法については、別の記事で詳しくまとめたので、ぜひそちらを参考にしてください!

【初心者向け】 JavaScriptの エラーの直し方

自分が作ったコードがうまく動かないってこと、プログラミングで本当によく起きますよね?私なんて、10回トライして9回エラーでうまくいかないなんてこともよくあります。 でもそんなときどこが間違っているか、自分の目ですべて探す […]

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードを比較してみましょう!


今回はここまで!

というわけで続編の第三回はここまでとしたいと思います!

次回は、連鎖の得点計算をして、スコアを表示できるようにしていきたいと思います!

というわけで長くなってしまいましたが、

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

ご感想などあればコメントやTwitterにどしどしお寄せください!

第四回はこちらから!

第四回は製作中です。
もう少しお待ちください。