【初心者向け】第三回メモ帳だけでゲーム作ってみた〈神経衰弱編〉

2021年1月28日

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

今回も、前回までと同様に、パソコンに標準装備されている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います！

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

【初心者向け】第二回メモ帳だけでゲーム作ってみた〈神経衰弱編〉

今回も、パソコンに標準で入っている「メモ帳」を使って、「神経衰弱」を作っていきたいと思います！前回の記事をま…

今回作るもの

前回は、カードの枠だけを表示させましたね！

準備編
カードの枠を表示させよう！　←前回
カードの数字を表示させよう！　←今回
キー入力で動かせるようにしよう！
キー入力でカードをひっくり返すようにしよう！
乱数を使ってカードを並べ替えよう！

そして、第三回では、枠だけでなく数字やトランプの柄も表示させていきたいと思います！

今回の完成イメージは以下の通りです！

今回の目標である数字やトランプの柄を表示させるのはもちろん、

前回は、16枚しかカードの枠を作りませんでしたが、
これを1からKまでの13枚を、4種類で52枚にしたいと思います！

今回必要になる知識

今回も実際にコードを書いていく上で、知っていた方がいい知識が2つあります！

まず一つ目が、配列です！

配列については、以下の記事で詳しくまとめたので、参考にしてください！

【誰でもわかる！】配列とは

皆さんは「配列」という言葉を聞いたことはありますか？プログラミングを学習していくうえで、たまに使う程度かもし…

そして、二つ目が繰り返しです！

繰り返しについても、以下の記事で詳しくまとめたので、ぜひ参考にしてください！

【誰でもわかる！】繰り返しとは

みなさんは「forループ」や「whileループ」などという言葉は聞いたことはありますか？ループとついているこ…

コードを書いていこう！

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

今回から少しややこしくなってきますが、完全に理解するまでじっくり考えるのではなく、大体わかったから次に進めよう程度で大丈夫ですよ～！

変数を作るなど、下準備をする

まずは、今回使う変数を作りましょう。

変数といっても今回は配列を作ります！

その配列に、トランプの柄と数字を入れておきます！

まずは、カードが16枚の状態なので、1から4までを配列に入れましょう！

…
let card_height = 80;

let card = [
  ["♤1", "♤2", "♤3", "♤4"],
  ["♧1", "♧2", "♧3", "♧4"],
  ["♡1", "♡2", "♡3", "♡4"],
  ["♢1", "♢2", "♢3", "♢4"]
];
…

「♤」や「♡」のマークは、日本語で「すぺーど」や「はーと」と入力して変換すれば出ると思いますが、もしうまくいかなければコピーして使いましょう！

また、「,」や「""」にも注意しましょう！

そして、次に今回作るコードの下準備として、柄や数字の大きさと、そのフォントなどを調整するためのコードを書きます！

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

CONTEXT.font = "40px 'ＭＳ ゴシック'";
CONTEXT.textAlign = "center";

＊「ＭＳ」が全角文字だったり、「’」がややこしいかもしれませんので、コピペしていただいても全然大丈夫です。

スライドパズル編を読んでくださった方は一度見たことがあるかもしれませんが、
簡単にご説明しますと…

一つ目の、

CONTEXT.font = "40px 'ＭＳ ゴシック'";

というのは、40pxの文字の大きさで、「ＭＳゴシック」というフォントで表示させる、といった意味があります。

今回はあらかじめ調整していて、40pxがちょうどの大きさになるはずです！

そして二行目の、

CONTEXT.textAlign = "center";

は、textAlignは文字位置を決めていて、今回は「center」なので中央にしています。

つまり文字位置が中央（＝center）なら、

文字が真ん中に来ます

もし右寄せ（＝right）なら、

文字が右に来ます

これもあらかじめ調整していて、文字位置を中央にすることでうまくいくようになっています！

トランプの柄と数字を表示させる（16枚）

次に、16枚でトランプの柄と数字を表示させてみましょう！

表示させるには、

CONTEXT.fillText(表示する文字, x座標, y座標);

を使いましょう！

そして、配列の中に表示する文字を入れていますが…

おさらいですが…

例えば

let c = card[1][2];

とすると、cは「♧3」になりますね！

＊コンピューターが数字を数え始める時に「0」があることに注意しましょう！

まず最初の「♤1」を表示させるには、前回作ったコードの間に下のように書きましょう！

…
CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][0], 100, 110);

CONTEXT.rect(170, 60, card_width, card_height);
…

これで実行すれば、「♤1」だけが左上に表示されるはずです！

次に「♤2」「♤3」「♤4」を表示させるコードを書いていきます！

これらを表示させるコードはこのようになります！

…
CONTEXT.rect(170, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][1], 200, 110);

CONTEXT.rect(270, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][2], 300, 110);

CONTEXT.rect(370, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][3], 400, 110);
…

これを後3種類分書かなければならないのですが、明らかに面倒くさいですよね！

そんな時に使えるのが、「繰り返し」です！

繰り返しを使って、スペードのカードを表示させるコードをまとめると…

CONTEXT.rect(70, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][0], 100, 110);

CONTEXT.rect(170, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][1], 200, 110);

CONTEXT.rect(270, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][2], 300, 110);

CONTEXT.rect(370, 60, card_width, card_height);
CONTEXT.stroke();

CONTEXT.fillText(card[0][3], 400, 110);

を、下のようにまとめることができます！

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 60, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[0][i], 100 + 100 * i, 110);
}

これですっきりしましたね！

後は、これを4種類分作ってみましょう！

少しどのようなコードにすればよいか考えてから、下のコードを真似してみましょう！

…
CONTEXT.beginPath();

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 60, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[0][i], 100 + 100 * i, 110);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 160, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[1][i], 100 + 100 * i, 210);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 260, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[2][i], 100 + 100 * i, 310);
}

for (let i = 0; i < 4; i++) {
  CONTEXT.rect(70 + 100 * i, 360, card_width, card_height);
  CONTEXT.stroke();

  CONTEXT.fillText(card[3][i], 100 + 100 * i, 410);
}

そして、勘のいい方はお気づきかもしれませんが、
これもまた繰り返しを使ってすっきりまとめることができそうですね…？

上の4つの繰り返しをまとめると、このようにすることができます！

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 4; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

ここは少しややこしくなってきますが、難しく考えずに真似してみましょう！

ということで、これで16枚ではありますが、トランプの柄と数字を表示することができました！

16枚から52枚へ

では今度は、先ほど作った16枚のカードを52枚に変えていきましょう！

まず初めに、ゲーム画面がこのままの大きさでは足らないので、横に伸ばして大きくしましょう！

ゲーム画面の大きさの設定は、canvasタグの中に書きましたね！

<canvas width="1400" height="500" id="canvas" style="border:1px solid black"></canvas>

ここでは、横の長さを1400まで伸ばしました！

かなり横長になりましたね笑

では次に、配列を52枚に変えましょう。

let card = [
  ["♤A", "♤2", "♤3", "♤4", "♤5", "♤6", "♤7", "♤8", "♤9", "♤10", "♤J", "♤Q", "♤K"],
  ["♧A", "♧2", "♧3", "♧4", "♧5", "♧6", "♧7", "♧8", "♧9", "♧10", "♧J", "♧Q", "♧K"],
  ["♡A", "♡2", "♡3", "♡4", "♡5", "♡6", "♡7", "♡8", "♡9", "♡10", "♡J", "♡Q", "♡K"],
  ["♢A", "♢2", "♢3", "♢4", "♢5", "♢6", "♢7", "♢8", "♢9", "♢10", "♢J", "♢Q", "♢K"]
];

4までだったのを13までに延ばしただけですね！

＊トランプっぽくするために、「1」を「A」に変えました！

そして最後に表示させるカードの枚数を52枚に変更しましょう！

これは実は非常に簡単で、

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 13; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

この、先ほど書いた繰り返しの、たった1部分を変えるだけでなんと、52枚を表示させることができちゃいます！

そこを変えるのか少しだけ考えてから次のコードを見てみましょう！

for (let j = 0; j < 4; j++) {
  for (let i = 0; i < 13; i++) {
    CONTEXT.rect(70 + 100 * i, 60 + 100 * j, card_width, card_height);
    CONTEXT.stroke();
    CONTEXT.fillText(card[j][i], 100 + 100 * i, 110 + 100 * j);
  }
}

そうです。

なんと繰り返しの終わる条件の部分を「13」という数字に変えるだけです！

なぜこうなるかぜひ考えてみてください！

というわけで、これで実行すれば最初に見た完成イメージと同じ画面が見れるはず！