【初心者向け】第二回 メモ帳だけでゲーム作ってみた〈数独・ナンプレ編〉

2020年11月26日

今回も、パソコンに標準で入っている「メモ帳」を使って、数独・ナンプレパズルを作っていきたいと思います！

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

今回作るもの

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

  1. 準備編　←前回
  2. 数独の枠を表示させよう！　←今回
  3. 数独の数字を表示させよう！
  4. キー入力で動かせるようにしよう！
  5. キー入力で数字を入力できるようにしよう！
  6. 完成させよう！！

この〈数独・ナンプレ編〉では、全六回に分けて少しずつ作っていきたいと思います！

そして、今回は数独の枠や線を表示していきたいと思います！

完成イメージは以下のとおりです！

まだまだ完成には遠いですが、数独っぽくはなってきていますね！

是非最後まで読んでください！

下準備

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sudoku</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="450" height="450" id="canvas" style="border:1px solid black"></canvas>

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

一つ一つ説明すると…

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

それが今回、450（px）：450（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(450, 450);
  CONTEXT.stroke();
</script>

一行ずつ説明すると…

CONTEXT.beginPath();

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

そして次の行の、

CONTEXT.moveTo(0, 0);

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

そしてその次に、

CONTEXT.lineTo(450, 450);

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

そして最後の、

CONTEXT.stroke();

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

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

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

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

例えば…

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

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

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

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

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

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

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

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

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

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

ということですね。

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

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

このマス目を作るには、縦に8本、横に8本の線を引けばいいですね！

太い線を表示する

まずは、太くなっている部分の線４本から表示してみましょう！

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

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

CONTEXT.beginPath();
CONTEXT.moveTo(150, 0);
CONTEXT.lineTo(150, 450);
CONTEXT.stroke();

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

CONTEXT.moveTo(0, 150);
CONTEXT.lineTo(450, 150);
CONTEXT.stroke();

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

＊２回目以降は「beginPath」が必要ありません。

ブラウザで確認すると、４つの線が引かれているはずです！

ですが少し上の完成図より、細いですね。

これは太さを指定していないため、初期設定の細い線になっています。

なので、太くするために、

CONTEXT.lineWidth = 太さ（px）;

という１行を追加します。

今回は 5 (px) にします。

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

CONTEXT.lineWidth = 5;

CONTEXT.beginPath();
CONTEXT.moveTo(150, 0);
CONTEXT.lineTo(150, 450);
CONTEXT.stroke();

これで線が太くなるはずです！

細い線を表示する

では最後に、細いほうの線を引いていきましょう。

細いほうは縦横合計１２本あるので、長くなってしまいますが、コピペを駆使して書いてみましょう。

いきなり答えのコードを下に書くので、少し考えたい方はスクロールを止めて考えましょう！

…さっきの続き

CONTEXT.lineWidth = 1;

CONTEXT.moveTo(50, 0);
CONTEXT.lineTo(50, 450);
CONTEXT.stroke();

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

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

CONTEXT.moveTo(250, 0);
CONTEXT.lineTo(250, 450);
CONTEXT.stroke();

CONTEXT.moveTo(350, 0);
CONTEXT.lineTo(350, 450);
CONTEXT.stroke();

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

CONTEXT.moveTo(0, 50);
CONTEXT.lineTo(450, 50);
CONTEXT.stroke();

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

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

CONTEXT.moveTo(0, 250);
CONTEXT.lineTo(450, 250);
CONTEXT.stroke();

CONTEXT.moveTo(0, 350);
CONTEXT.lineTo(450, 350);
CONTEXT.stroke();

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

基本的には数字を変えるだけですね！

あと、最初に線を細くするための１行を忘れないようにしましょう！

これで完成イメージと同じようになるはずです！


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

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

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

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

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

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

Sample_Gameダウンロード

第二回はここまで！

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

線を引けてマス目が完成すると、少しずつ完成に向かっているのが感じられますね！

次回は、数独の数字を表示するコードを書いていきたいと思います！

長くなってしまいましたが、

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

第三回はこちらから！

数独・ナンプレナンプレ,プログラミング,メモ帳,HTML,javascript,初心者,数独

Posted by ただの大学生