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

2020年10月17日

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

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


今回作るもの

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

  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を使います。


今回必要になる知識

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

それが、変数です!

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

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

プログラミングの勉強を始めたときに最初に学ぶのが、「変数」と呼ばれるものです。 変数を知ることはプログラミングを知ることと同じといっても過言ではありません! この記事では、主にJavaScriptの変数について解説します […]


コードを書いていこう!

先ほどの下準備や第一回では、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();

うまくコピー&ペーストを使いましょう!

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

最初に見たやつ

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


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

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

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

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

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

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


今回はここまで!

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

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

長くなりましたが、

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

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

第三回はこちらから!