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

2020年10月31日

今回も、前回までと同様にパソコンの「メモ帳」機能を使って、「数独」を作っていきたいと思います！

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

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

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

今回も、前回までと同様にパソコンにある「メモ帳」だけを使って、「数独」を作っていきたいと思います！今回作るもの前回は、キーボード入力で動かせるポインターを作りましたね！今回で「0」のマスは表示しないように設定します […]

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

今回作るもの

前回は、キーボード入力で数字を入れられるようにしましたね！

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

そして、今回は最終回として数独として完成させていきたいと思います！

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

分かりやすいように、もとからある数字と入力した数字の色を分けます。

さらにすべての数字が正しく入力出来たら、上からアラートというもので「クリア！」と表示したいと思います！

コードを書いていこう！

では最終回のコードを書いていきましょう！

すべてのマスに正しい数字が入れられているかの判定のコードが少し難しいかもしれませんが、
ゆっくり進めていきましょう～！

答えの多次元配列を作る

では、最後の変数として、答えを記憶しておくための多次元配列を作りましょう。

  …
  [0, 0, 0, 0, 0, 0, 0, 0, 0]
];

let answer = [
  [6, 9, 5, 8, 2, 3, 4, 1, 7],
  [7, 1, 3, 4, 6, 5, 9, 8, 2],
  [4, 8, 2, 1, 9, 7, 6, 3, 5],
  [9, 2, 4, 6, 3, 1, 7, 5, 8],
  [1, 5, 6, 9, 7, 8, 2, 4, 3],
  [8, 3, 7, 5, 4, 2, 1, 9, 6],
  [5, 6, 9, 2, 8, 4, 3, 7, 1],
  [2, 7, 1, 3, 5, 9, 8, 6, 4],
  [3, 4, 8, 7, 1, 6, 5, 2, 9]
];

この数独の答えは、もちろん自分で一度解いてもいいですが、この数独の問題は以下のサイトからとってきてるので、そちらを確認しても大丈夫です！

こちらのページ：http://nanpre.adg5.com/xlsx_down.php

問題１を使っています！
一応下にも大きく答えを書いておきます。

文字の色を変える

完成イメージにあるように、元からある変えられない数字と自分が入力できる数字の見分けが付くように、色を変えたいと思います。

今回はもとからある数字を青色に、入力できる数字を赤にしたいと思いますが、ここも自分好みの色に変えましょう！

数字の色を変えるには、

CONTEXT.fillStyle = "色の名前";

というものを使いましょう。

＊色の名前は英語で書きましょう。

数字を表示するコードは今、numberとfieldの数字を足すようになっていますが、片方が「0」になるようにしていますので、if文を使って以下のように書けますね！

for (let i = 0; i < 9; i++) {
  for (let j = 0; j < 9; j++) {
    if (number[i][j] == 0) {
      CONTEXT.fillStyle = "red";
    } else {
      CONTEXT.fillStyle = "blue";
    }
    if (number[i][j] + field[i][j] != 0) {
      CONTEXT.fillText(number[i][j] + field[i][j], 25 + 50 * j, 35 + 50 * i);
    }
  }
}

真ん中の、if else if文ですね！

numberが「0」のときは、fieldのほうに数字が入っている（入力された数字がある）ので、それをif文でうまく場合分けしていますね！

あとは色の名前を好きに変えましょう！

クリアの判定を作る

では最後に、数字が正しく入力されているときに、「クリア」と表示するようにしましょう！

こちらにコードは少し難しいので、いきなり答えを書いてのちに解説をするという形にしたいと思います。

function movePointer(e) {
  if (e.key == "ArrowRight") {
    …省略…
  }else if (e.keyCode >= 48 && e.keyCode <= 57) {
    …省略…
  }
  CONTEXT.clearRect(0, 0, 450, 450);
  drawField();

  let checker = true;
  for (let i = 0; i < 9; i++) {
    for (let j = 0; j < 9; j++) {
      if (number[i][j] + field[i][j] != answer[i][j]) {
        checker = false;
      }
    }
  }

  if (checker == true) {
    alert("クリア！");
  }
}

初めに「checker」という変数を新しく作り、「true」というのを代入しています！

そして、すべてのマスに対して、numberとfieldを足した数字とanswerの数字が同じかを確認していますね！

また、「!=」は「==」の逆で、「違う」という意味があるので、すべてのマスをチェックして、もしどこかに数字が違うますがあれば、「checker」を「false」に変えることにしています！

そして最後に、「checker」が「true」の時（すべてのマスの数字が正しく入っているとき）をif文で分けて、

alert(～)

というものを使って、上からアラートを出します！

このコードはなかなか難しいと思いますが、ゆっくり理解していきましょう！

このコードができたことで、クリアの判定ができるようになりました！

是非１度遊んでみて、きちんと動くか確認してみましょう！