【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈スライドパズル編〉

今回も、パソコンに入っている「メモ帳」だけで、HTMLとJavaScriptを用いて「スライドパズル」を作っていきたいと思います！

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

今回作るもの

前回は、「スライドパズル」の準備として、真っ白なゲーム画面を作りましたね！

  1. 準備編　←前回
  2. 数字を表示させよう！　←今回
  3. 要らないマスを塗りつぶそう！
  4. 数字を動かせるようにしよう！
  5. 完成させよう！

この〈スライドパズル編〉では、全5回にわけて作っていきたいと思います！

そして今回は、数字を表示させていきたいと思います！

下準備

前回は、HTMLを使う練習をしましたが、前回のままでは少し不完全だったので、少しだけ修正をしたいと思います！

前回作ったもののままでは、パソコンが正しくHTMLと認識しなかったり、文字化けが起こってしまったりする可能性があるので、それを無くすためのコードを書きたいと思います。

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

どこが変わったかわかるでしょうか？

そうですね。1行目と4行目に新しいものが追加されていますね。

簡単に説明すると、

<!DOCTYPE html>

というのは、ブラウザにHTMLであることを認識させることができます。

そして、

<meta charset="utf-8">

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

（少し難しいですが、ここは全然理解しなくてもOKです！）

そしてもう一つ！

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

と、canvasタグの中を少し変えましょう！

一つ一つ説明すると…

まず、「width」とは日本語で、「幅」なので、キャンバス（＝ゲーム画面）の横の長さを指し、それに対して「height」は「高さ」なので、キャンバスの縦の長さを指していますね。

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

今回はスライドパズルを作るので、正方形の形にしましたが、自分の作るゲームに合わせた大きさにするといいでしょう！

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

今回必要になる知識

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

それは、変数です！

変数については別の記事で詳しく説明しましたので、そちらを参考にしてください！

コードを書いていこう！

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

ですが、これからはJavaScriptという、HTMLを動かすためのものを書いていき、
第一回とは全く別のものを作っていくことになるため、
少し書き方がHTMLと変わってきますが、慣れていきましょう！

ゲーム画面の設定

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

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

この二行を書き写してみましょう！
（constの左側のスペースは見やすくするために入れているものなので、入れなくても大丈夫です！）

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

一行ずつ説明しますと

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

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

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

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

そして、

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

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

線を表示させてみよう！

数字の前に、まずは線を表示させてみて練習しましょう！

まずは下の通りに入力してみましょう！

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

  CONTEXT.beginPath();
  CONTEXT.moveTo(0, 0);
  CONTEXT.lineTo(400, 400);
  CONTEXT.stroke();
</script>

一行ずつ説明すると…

CONTEXT.beginPath();

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

そして次の行の、

CONTEXT.moveTo(0, 0);

で、座標（0, 0）の場所に書き始める場所を指定しました。
（座標については後で簡単に解説します。）

そしてその次に、

CONTEXT.lineTo(400, 400);

で、座標（400, 400）の場所を書き終える場所を指定しました。

そして最後の、

CONTEXT.stroke();

で、指定した書き始めの場所から書き終わりの場所まで線を引きました！

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

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

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

例えば…

CONTEXT.beginPath();
CONTEXT.moveTo(10, 50);
CONTEXT.lineTo(350, 200);
CONTEXT.stroke();

＊数字以外のところは変えないでください！

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

上の例のようにしたのなら、下の画像のようになっているはずです！

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

すると、このキャンバスの座標について少しわかるかもしれません。

キャンバスのx座標、y座標はこのようになっています！

いろいろと数字が書いてあったややこしいですが、

座標は（x座標, y座標）の順番で、

x座標の数字を大きくすればするほど右に行く
y座標の数字を大きくすればするほど下に行く

ということですね。

座標空間については中学生のころに習っているはずですが、y軸が逆だったり少し違った点もありますが、慣れましょう！

今回は、下の画像のように、正方形を 4×4 に分けたいと思います。

この16マスを作るには、縦に3本、横に3本の合計6本の線を引けば分けることができますね。

少しコードが長くなってしまいますが、どれがどの線を引いているか考えながら写してみましょう！

CONTEXT.beginPath();
CONTEXT.moveTo(100, 0);
CONTEXT.lineTo(100, 400);
CONTEXT.stroke();

CONTEXT.moveTo(200, 0);
CONTEXT.lineTo(200, 400);
CONTEXT.stroke();

CONTEXT.moveTo(300, 0);
CONTEXT.lineTo(300, 400);
CONTEXT.stroke();

CONTEXT.moveTo(0, 100);
CONTEXT.lineTo(400, 100);
CONTEXT.stroke();

CONTEXT.moveTo(0, 200);
CONTEXT.lineTo(400, 200);
CONTEXT.stroke();

CONTEXT.moveTo(0, 300);
CONTEXT.lineTo(400, 300);
CONTEXT.stroke();

これでマス目は完成ですね！

あとは最後に数字を表示させましょう！

数字を表示させよう！

まずは先ほど書いた、線を表示させるコードの下に、下の3文を入力してみましょう！

CONTEXT.font = "50px serif";
CONTEXT.textAlign = "center";
CONTEXT.fillText(1, 100, 100);

すると、数字の「1」が表示されたはずです！

一行目の、

CONTEXT.font = "50px serif";

というのは、50pxの文字の大きさで、「serif」というフォントで表示させる、といった意味があります。
なので、文字を大きくしたければ100pxなどに変更してみましょう！

そして二行目の、

CONTEXT.textAlign = "center";

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

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

文字が真ん中に来ます

右寄せ（＝right）なら、

文字が右に来ます

そして最後の行の、

CONTEXT.fillText(1, 100, 100);

括弧の中は、

fillText(表示させる文字, x座標, y座標 )

といった意味を持っています。

このfillTextをうまく使って、数字を下の画像のように表示させてみましょう！

こんな感じ！

コードはこのようになります！

CONTEXT.font = "50px serif";
CONTEXT.textAlign = "center";
CONTEXT.fillText(1, 150, 70);
CONTEXT.fillText(2, 250, 70);
CONTEXT.fillText(3, 350, 70);
CONTEXT.fillText(4, 50, 170);
CONTEXT.fillText(5, 150, 170);
CONTEXT.fillText(6, 250, 170);
CONTEXT.fillText(7, 350, 170);
CONTEXT.fillText(8, 50, 270);
CONTEXT.fillText(9, 150, 270);
CONTEXT.fillText(10, 250, 270);
CONTEXT.fillText(11, 350, 270);
CONTEXT.fillText(12, 50, 370);
CONTEXT.fillText(13, 150, 370);
CONTEXT.fillText(14, 250, 370);
CONTEXT.fillText(15, 350, 370);

これでスライドパズルの数字を表示できました！

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

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

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

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

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

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

Sample_Gameダウンロード

ということで第二回はここまでとします！

次回は、今回作ったものを、よりスライドパズルっぽくするために、要らないマスを黒で塗りつぶすなど細かい調整をしたいと思います！

長くなってしまいましたが、最後まで読んでいただきありがとうございました！

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

第三回はこちらから！

スライドパズルスライドパズル,プログラミング,メモ帳,HTML,javascript,初心者

Posted by ただの大学生