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

2020年10月5日

今回も、メモ帳だけを使って、あの有名なパズルゲームの「ぷよぷよ」をつくっていきたいとおもいます。

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

今回作るもの

前回は、ぷよが上から落ちてきた、下に付くと新しいぷよが上にまた出てくるようなコードを書きましたね。

  1. ぷよぷよのフィールドを作ろう！
  2. ぷよを上から落としてみよう！　←前回
  3. ぷよを操作できるようにしてみよう！　←今回
  4. ぷよを回転できるようにしてみよう！
  5. ぷよが下に落ちるようにしよう！
  6. 連鎖をできるようにしよう！
  7. 次のぷよが何なのかわかるようにしてみよう！

今回は、ぷよを左右と下方向に操作できるようにしていきます！

操作ができるようになると、ゲームが少しずつ遊べるようになってきて、楽しいですよ！

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

連鎖や回転はまだですが、動かせるようになるだけで一気にぷよぷよ本家に近づいてきましたね！

コードを書いていこう！

前回までと同様に、コードをメモ帳に書いていきましょう！

今回は、またまた条件分岐をちょこちょこ使っていきますが、コード自体が前回と似ている部分が多いので、前回よりは簡単だと思います！

キーボード入力を検知する

まず初めに、キーボードが押されたことがわかるように、検知するためのコードを2行書きます。

書く場所はどこでも大丈夫なのですが、これ以降このコードをいじることはないので、上の方に書くことをお勧めします。

…
const CONTEXT = CANVAS.getContext("2d");

document.addEventListener("keydown", movePuyo);
document.addEventListener("keyup", resetFall);

let field = [
…

上の例では、最初の設定と多次元配列の間に書いていますね！

初心者向けメモ帳プログラミングの記事を読んだ方は書いたことがあると思いますが、「addEventListener」というものを使って、キーボードが押されたことを検知しています。

そして、上の方の（keydownと書いてある方）で、キーボードが押されたことを検知して、下の方の（keyupと書いてある方）で、キーボードが離れたことを検知しています。

中級者向けの記事なので、ここについては詳しく書かないので、もう少し詳しく理解したい方は、初心者向けのメモ帳プログラミングの記事を読んでください！

記事一覧に飛ぶ

関数を作る

では次に、キーボードが押されたときにぷよを動かすための関数を2つ書いていきます。

これが先ほど書いた、キーボードが押されたことを検知した後にさせる処理になりますね！

function downPuyo() {
＊＊省略＊＊
}

function movePuyo(e){

}

function resetFall(e){

}

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

movePuyoとresetFallという2つを作りました。

どのキーが押されたかによって処理を変えなければいけないので、引数の「e」というのを設定しています。

下矢印キーを押すとぷよが早く落ちるようにする

まずは初めに、下矢印キーを押されたら、ぷよの落下が早くなる方にしましょう。

これの実装はいたって簡単で、ぷよの落下の時に使った変数を思い出せば簡単です！

キーが押されている間は「down_speed」を適当な数字に上げればいいですね！

そして、キーが離されたときに、「down_speed」をもとの速さに戻しましょう。

function movePuyo(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.2;
  }
}

function resetFall(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.02;
  }
}

こうなりますね。

ここでは速さを「0.2」にしていますが、実際に試してみて、自分の好きな速さに調整しましょう。

左右矢印キーを押すと左右に移動させる

では次に、左右の矢印キーが押されたときに左右に動かす処理を考えて行きましょう。

まずは右から考えて行きましょう。


変数 position の意味

右キーが押されたら、例えば、position = [1, 2]だったら、[2, 2]のように、x座標の数字を1つ大きくすればいいですね。

なので、まずは先ほどのif文にelse ifという形でつなげて書いて見ましょう。

function movePuyo(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.2;
  }else if (e.key == "ArrowRight") {
    position[0] = position[0] + 1;
  }
}

こんな感じですね。

ですがもちろんこのままではうまくいきません。

まず、postionのx座標は、0から5までしかだめですね。

右側に行けるのは、positionのx座標が4以下の時なので、子ぷよと親ぷよの2つを考えて、こう書けます。

function movePuyo(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.2;
  }else if (e.key == "ArrowRight") {
    if (position[0] <= 4 && position[0] + child[0] <= 4) {
      position[0] = position[0] + 1;
    }
  }
}

＊「&&」は、「～かつ～」という意味があります。
　少し難しい言い方だと「AND」に当たりますね。

これで、壁にあたっても大丈夫になりましたが、ぷよが右側にあるかをチェックできていません。

なので、次は右にぷよがあるかのチェックをしましょう。

前回は「Math.floor」という「切り捨て」をうまく使いましたが、今回は「Math.ceil」という「切り上げ」をうまく使ってコードを書いて見ます。

function movePuyo(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.2;
  }else if (e.key == "ArrowRight") {
    if (position[0] <= 4 && position[0] + child[0] <= 4) {
      if (field[Math.ceil(position[1])][position[0] + 1] == 0 && field[Math.ceil(position[1]) + child[1]][position[0] + 1 + child[0]] == 0) {
        position[0] = position[0] + 1;
      }
    }
  }
}

if文がたくさんあって「{」、「}」もごちゃごちゃしますので、気を付けて書きましょう。

これで実行すれば、右側にぷよがあると、右キーを押しても動かなくなったはずです！

これで右側は完成です！
後は左側ですね！

一度自分で考えて作ってから下のコードを見てみてましょう！

function movePuyo(e){
  if (e.key == "ArrowDown") {
    down_speed = 0.2;
  }else if (e.key == "ArrowRight") {
    if (position[0] <= 4 && position[0] + child[0] <= 4) {
      if (field[Math.ceil(position[1])][position[0] + 1] == 0 && field[Math.ceil(position[1]) + child[1]][position[0] + 1 + child[0]] == 0) {
        position[0] = position[0] + 1;
      }
    }
  }else if (e.key == "ArrowLeft") {
    if (position[0] >= 1 && position[0] + child[0] >= 1) {
      if (field[Math.ceil(position[1])][position[0] - 1] == 0 && field[Math.ceil(position[1]) + child[1]][position[0] - 1 + child[0]] == 0) {
        position[0] = position[0] - 1;
      }
    }
  }
}

こんな感じですね！

数字が少し変わるだけで、右も左もほとんど同じですね！

これでぷよを下だけでなく、右にも左にも動かせるようになりました！

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

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

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

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

Sample_Gameダウンロード

今回はここまで！

というわけで、第三回はここまでとしたいと思います！

操作ができるようになってくると、少しずつ完成していっているのが感じられてうれしいですね！。

その嬉しい気持ちをバネにして次回も頑張っていきましょう！

次回は、ぷよをキーボード入力で、回転できるようにしたいと思います！！

長くなってしまいましたが、

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

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

第四回はこちらから！

ぷよぷよぷよぷよ,プログラミング,メモ帳,HTML,javascript,中級者

Posted by ただの大学生