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

2020年9月27日2020年11月15日

1. 必要なもの
2. 今回から作っていくゲーム
3. プログラミングを始めよう！
4. 今回作るもの
5. 下準備
6. 多次元配列を使ってフィールドを作る
7. ぷよを表示させる
8. うまくいかなかった方向け
9. 第一回はここまで！

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

と思ったことはありませんか？

そんな方にご紹介したいのが、パソコンにもともと入っている「メモ帳」だけを使ったプログラミングです。

プログラミング言語としては、JavaScriptという簡単なものを使い、簡単にブラウザゲームを作ることができます！

JavaScriptを今まで触ったことがない人でもすぐ始められる言語となっているので、是非自分のパソコンのメモ帳でプログラミングを始めてみましょう！

必要なもの

・パソコン
→どのパソコンにも標準装備されている「メモ帳」」だけを使うので、ほかのソフトは要りません！

・基礎的なプログラミングの知識
→中級者向けの記事となっていて、プログラミングに少し慣れていなければ難しい内容になっていると思います。

プログラミングを今までやったことがない方や、JavaScriptの書き方を一切知らない人は、是非、初心者向けの記事を先に読んでください！

初心者向け記事まとめ

今回から作っていくゲーム

今回から作っていくゲームは、（タイトルにも書いてありますが…）

「ぷよぷよ」みたいなゲームを作っていきたいと思います。

皆さんのなかでプレイしたことがある人もいるのではないでしょうか？

日本を代表するパズルゲームといって過言ではないほど有名なゲームですね！

（この記事を書いているときの最新作は、任天堂switchの「ぷよぷよeスポーツ」です。）

同じ色のぷよを4つ繋げて消して、それをうまく組み合わせて連鎖を作るというシンプルなゲームです！

今回はこれを、パソコンの「メモ帳」だけを使って作っていきたいと思います。

プログラミングを始めよう！

では早速メモ帳を開いて、プログラミングを始めていきましょう。

先ほども少し書きましたが、こちらは中級者向けの記事となっているので、
先にしっかり簡単なものから練習したいという方は、初心者向けの記事を先に読むことをおすすめします。

初心者向け記事まとめ

今回作るもの

このシリーズは全6回に分けて進めていきたいと思います。

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

そして今回は、ぷよぷよのフィールドを作り、ぷよを置いて見たいと思います。

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

本家のぷよぷよに比べたらだいぶ質素ですが、第一回なのでこんなもんです。

下準備

まずは、ゲーム画面を作るための必要なHTMLのタグを書いていきましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tetris</title>
  </head>
  <body>
    <canvas width="300" height="600" id="canvas" style="border:1px solid black"></canvas>
    <script>
    
    </script>
  </body>
</html>

初心者向けの記事を読んだことがあることは一度書いたことがありますね。

今回はぷよぷよを作るため、縦長のcanvasにしています。

そして、ゲーム画面の設定も書き足しましょう。

<script>
  const CANVAS = document.getElementById("canvas");
  const CONTEXT = CANVAS.getContext("2d");
</script>

これで、下準備は完成ですね！

次は多次元配列を使ってフィールドを作る準備をしていきましょう。

多次元配列を使ってフィールドを作る

次に多次元配列を使って、ぷよを置くフィールドを作っていきましょう。

ぷよぷよは、横6マス×縦12マスとなっているので、それに対応するような多次元配列を作ってみます。

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

let field = [
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0]
];

そして、例えば下のように変えてみると

let field = [
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0],
  [0, 0, 1, 0, 0, 0],
  [0, 2, 2, 0, 0, 0],
  [1, 2, 1, 3, 4, 4]
];

完成イメージのようにぷよが数字に対応する形で表示されるようにしたいと思います！

ぷよを表示させる

では、次に先ほど作った多次元配列の中の数字に対応してぷよが表示されるようにします！

まずは、ぷよ表示用の関数を作りましょう。

…
  [1, 2, 1, 3, 4, 4]
];

function drawField(){

}

drawFieldという名前にしてみました。

そして次に、ぷよを先ほど作った多次元配列に合うように表示させていくんですが…

一度にすべて表示させようとすると難しくなるので、まずは、field[0][0]の部分だけ表示してみましょう。

今回は、fieldという多次元配列の中の数字が、

1なら、赤色のぷよ
2なら、黄色のぷよ
3なら、青色のぷよ
4なら、緑色のぷよ

ということにします。（もちろん0なら何もないという状態です）

なので、field[0][0]は左上の場所に当たるので、switch文を使いこのように書けますね。

if (field[0][0] > 0) {
  switch (field[0][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.fillRect(50, 50, 50, 50);
}

今回は、ゲーム画面の大きさを、横300px、縦600pxにしてるため、一マスは50pxになりますね！

あとは、これを繰り返しをうまく使ってすべてのフィールドに対応させましょう。

function drawField() {
  for (let i = 0; i < 12; i++) {
    for (let j = 0; j < 6; j++) {
      if (field[i][j] > 0) {
        switch (field[i][j]) {
          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.fillRect(j * 50, i * 50, 50, 50);
      }
    }
  }
}

drawField();

最後に関数を実行させるために、「drawField();」と書くのを忘れないようにしましょうね！

これで実行すれば、多次元配列の中の数字に対応する色でその場所にぷよが表示されるはず！