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

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

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

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


今回作るもの

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

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

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

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

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

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


コードを書いていこう!

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

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


答えの多次元配列を作る

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

  …
  [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

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


文字の色を変える

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

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

数字の色を変えるには、

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(~)

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

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

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

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


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

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

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

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

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

それでもうまくいかなければ、下のサンプルコードをダウンロードして、自分のコードを比較してみましょう!


完成!

ということで、これで「数独・ナンプレ」の完成です!

数独として遊べるゲームが完成しましたね!

数独の問題を作ってもいいし、もっと難しいものを持ってきて遊べるようにしてもいいですね!

是非、ゲームのスクリーンショットなどと共に感想を聞かせてください!

コメントやTwitterにどんなことでもいいので、ご感想いただけたらすごく喜びます!

ということで、長くなってしまいましたが、

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

このブログでは、ぷよぷよ以外にも様々なゲームの作り方をご紹介しているので、ぜひ読んでみてください!

おすすめの記事:

【超おすすめ】あまり知られていない隠れた神ゲー〈3選〉

みなさんはゲームは好きですか? このブログの運営主のただの大学生は、ゲームが大大好きです。 今まで様々なハードで様々なゲームをプレイしてきました! なので、メチャクチャ有名なゲームから、意外と知られていない無名のゲームを […]

また、ほかにもメモ帳を使ったプログラミングをお探しの方は、まとめたページがあるので、そちらもぜひ見てください!

クリックで飛べます:メモ帳プログラミング一覧