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

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

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

今回作るもの

前回は「神経衰弱」の準備として、真っ白なゲーム画面を作りました！

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

この〈神経衰弱編〉では、全六回に分けて少しずつ作っていきたいと思います！

そして、今回はカードの枠と数字を表示させていきたいと思います。

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

少し質素ですが、次回から数字やトランプのマークを入れていくとそれっぽくなってきます！

また、カードは16枚とします！　←これ大事

下準備

前回は、HTMLを使う練習をしましたが、前回のままでは少し不十分なので、少しだけ修正を施したいと思います。

前回作ったものでは、

パソコンが正しくHTMLを認識しなかったり、
文字化けが起こってしまったりする可能性があるので、

まずはそれを無くすためのコードを書いていきたいと思います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple Game</title>
  </head>
  <body>
     <canvas style="border:1px solid black"></canvas>
     <script>
     </script>
  </body>
</html>

一行目と四行目に新しい文字列が追加されていますね！

一行目の

<!DOCTYPE html>

という部分で、ブラウザにHTMLであることを認識させ、

<meta charset="utf-8">

という部分で、文字化けを起こさないようにしています。

＊少し難しいですが、全然理解する必要もないので安心してください！

そしてもう一つ！

canvasタグを下のように変えましょう！

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

一つ一つ説明すると…

widthというのは、日本語で「幅」という意味もあることから、キャンバス（＝ゲーム画面）の横の長さを指し、

それに対してheightは「高さ」という意味から、キャンバスの縦の長さを指しています！

そしてそれが今回、500（px）：500（px）にしているので、正方形の画面になりますね！

そして、idというのは、その名前の通り、キャンバス（＝ゲーム画面）にIDを振りました。
後でも説明しますが、ゲーム画面に何かを表示させるときにこのIDを使います。

今回必要になる知識

今回実際にコードを書いていく上で、知っていた方がいいプログラミングの知識が一つだけあります！

それが、変数です！

変数については、この記事で詳しくまとめましたので、ぜひ見てください！

【誰でもわかる！】変数とは

プログラミングの勉強を始めたときに最初に学ぶのが、「変数」と呼ばれるものです。 変数を知ることはプログラミング…

コードを書いていこう！

先ほどの下準備や第一回では、HTMLというものを主に書いてきました。

ですが、ここからはJavaScriptという、HTMLを動かすためのものを作っていきます！
そして、HTMLとは書き方が大きく変わってきますが、少しずつ慣れていきましょう！

ゲーム画面の設定

まずは手始めに、JavaScriptがキャンバス（＝ゲーム画面）がどこにあるかわかるように、先ほど指定したIDで教えてあげましょう！

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

この二行を書き写しましょう！
＊左側のスペースは見やすくするために入れたもので、入れなくてもOKです！

この二行は少し難しいので、完全に理解はしなくて大丈夫ですが…

一行ずつ説明しますと

const CANVAS = document.getElementById("canvas");

constは、変えることのできない変数でしたね。

「document」は「メモ帳」、「getElementById(～)」は「～とIDが付いたものを探す」、「.」は「の」と訳すと…

「CANVAS」を「メモ帳の中の”canvas”というIDが付いたものにする」といった意味があります。

そして、

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

は、2Dともあるように、「CANVAS（＝ゲーム画面）を2Dの設定にしたものを、CONTEXTとする」といった意味があります。

変数を作ろう！

では次に、今回使う変数を作ってみましょう！

今回まず作る変数は、カードの横の長さ（＝width）と縦の長さ（＝height）です！

先ほど書いたものの続きに書いて見ましょう！

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

let card_width = 60;
let card_height = 80;

横の長さを60、縦の長さを80にしたので、縦長のカードになることがわかれば十分です！

四角を表示させてみよう！

では、次にカードの枠を作るために、四角形の線を表示させてみましょう！

まずは深く考えず、下の通りに入力してみましょう！

…
let card_height = 80;

CONTEXT.beginPath();
CONTEXT.rect(100, 100, 100, 100);
CONTEXT.stroke();

簡単に説明しますと…

CONTEXT.beginPath();

というのは、ここから、CONTEXT（＝ゲーム画面）に「線を書き始めるよー」という指示をしました。

そして次の行の、

CONTEXT.rect(100, 100, 100, 100);

で、キャンバスに四角形を表示する指示を出しました。
（括弧の中の数字については後で詳しく説明します！）

そしてその次に、

CONTEXT.stroke();

で、先ほど指定した四角形の形に線を引かせました！

これで、Internet ExplorerやChromeなどのブラウザで確認してみましょう！
するとどうなりますか？

下の画像のようになっていれば成功です！

左上の方に四角形が表れていたらOK!

では、ここで先ほど書いたものの、数字だけ変えてみましょう！

例えば…

CONTEXT.beginPath();
CONTEXT.rect(200, 300, 40, 60);
CONTEXT.stroke();

これでまた、ブラウザで確認してみましょう！
するとどうなるでしょうか？

上の例のように数字を変えたのなら、下の画像のようになっているはず！

四角形の場所と、大きさが変わっているはず！

何度か数字を変えてみて、どのようになるか試してみましょう！

すると、先ほどの（）の中の数字について少しわかるかもしれません！

先ほどの括弧の中の数字ははこのようになっています！

rect( x座標, y座標, 横の長さ, 縦の長さ);

x座標やy座標は、前のスライドパズル編で説明した通り、このようになっています！

そして、今回はカードを表示したいので、先ほど作った変数を用いて、以下のようにしましょう！

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

これでブラウザで確認してみましょう！
すると下の画像のように、左上にカードの形の四角形が引かれていますね！

これで一枚目は完成！

あとは、これを16枚分書くだけですね！

少し長くなりますが、頑張って写してみましょう！

＊2枚目以降は、「CONTEXT.beginPath();」の指示は要りません！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

うまくコピー＆ペーストを使いましょう！

これで実行すればおそらく最初の完成イメージで見たものと同じになると思います！

最初に見たやつ

これでカードの枠は表示できましたね！

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

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

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

もしうまくいかなかった方のために、サンプルコードを用意しました。
ダウンロードして、自分のコードのどこが間違っているのか、これを見て確認してみてください！

Sample_Gameダウンロード

今回はここまで！

思っている通りに作ることができると、やっぱりうれしいですよね！

その嬉しさをバネにして、これからも頑張っていきましょう！

長くなりましたが、

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

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

第三回はこちらから！

神経衰弱プログラミング,メモ帳,神経衰弱,HTML,javascript,初心者

Posted by ただの大学生