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

2020年10月28日2020年10月31日

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

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

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

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

今回も、前回までと同様にパソコンにある「メモ帳」だけを使って、「数独」を作っていきたいと思います！是非最後ま…

今回作るもの

前回は、キーボード入力で動かせるポインターを作りましたね！

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

そして、今回はキーボード入力で数字を入力できるようにしたいと思います！

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

今回で「0」のマスは表示しないように設定します！

また、数字を好きに入力できるようにしますので、数独として遊べるようになります！

完成が見えてきましたね！

コードを書いていこう！

では今回はさっそく前回の続きでメモ帳にコードを書いていきましょう！

今回は始める前に知っておかないといけないプログラミング知識はありません！

なのでゆっくり進めていきましょう～！

「0」を表示させないようにする

まず初めに、第３回目からあった、空白のマスに「0」が表示されてしまう問題を解決しましょう。

実はこれはすごく簡単で、数字を表示させるコードにif文を１つ追加するだけです！

数字を表示させるコードの場所はわかりますか？
探してみてください！

追加する条件は…

その場所のマスの数字が0以外の時に、数字を表示する

という形にすればいいですね！

そしてこの0以外というのは、「==」の反対の「!=」（≠の意味）というのを使って…

…
CONTEXT.textAlign = "center";

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

CONTEXT.lineWidth = 4;
…

真ん中の部分のように書けます！

これでブラウザで確認すれば、「0」が表示されなくなっているはずです！

数字を入力する下準備

数字を入力するコードを書いていく前に、準備としてまずは変数を１つ作りたいと思います！

…
let y = 0;

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

let field = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0]
];

「number」という多次元配列はすでにできていると思うので、新しく書かないといけないのは下の「field」というものです。

数独では、元から書かれている数字と、プレイヤーが書き込む数字の２種類がありますね。

ここでは「number」には元から決まっている数字、「field」にはキーボードで入力した数字を入れるといったように使い分けをしていきたいと思います。

この２つを用意することによって、数字を表示させるコードを少し変えないといけないので、先にそちらを変更します。

数字を表示させるコードは先ほど書いたif文のところですね。

その場所を下のように書き換えましょう。

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

「number」と「field」にある数字を足し合わせていますね。

なぜこうなるかというと、元から決まっている数字があるマスには、プレイヤーが数字を入力することができないので、「field」のその場所は「0」になりますね。

また逆も同じで、プレイヤーが入力できるマスには、元から決まっている数字がなく、「0」がその場所に入っているはずです。

なので、「0」を足し合わせる、ということになるので結果的に表示される数字には影響がないですね！

少しわかりにくいかもしれませんが、実際にブラウザで確認してみたり、紙などに書き起こしてみたりすればわかるかもしれませんよ！

数字を入力するための関数を作る

では次に数字を入力するための関数を作っていきたいと思います。

こちらはいきなりコードを書くので、これがどういう意味かを頑張って理解してみましょう！

function movePointer(e) {
  …省略…
}

function putNumber(n) {
  if (number[y][x] == 0) {
    field[y][x] = n;
  }
}

数字を入力する関数として「putNumber」というものを作りました！

引数があることにも注目ですね！

また、変数の「x, y」が出てきましたね。
忘れている方も多いと思うので、どういう意味かを指す画像を置いておきます。

これを見たうえで、この関数がどの様な意味になるのかを考えてみましょう！

ここから解説を書いていきますので、まだ考えたい方はスクロールを止めましょう！

ではここから先ほどのコードの解説を書いていきます！

xとyはポインターの位置によって数字が変わるようになっていましたね。

そしてポインターの場所に対応している「field」の場所に、引数の「n」を入れるようになっています。

なので、「n」は１～９の数字になることも分かりますね！

また、もとから入っている数字がある部分には入力できないようにしないといけないので、if文をつかって、「number」のその位置に数字が入ってない（０である）ことを確認しています！

キーボード入力で数字が入力できるようにする

では最後にキーボードの１～９を押すとポインターのある場所に数字が入れられるようにしていきたいと思います。

また、数字を間違えて入れてしまって消したいと思うこともあるので、「0」を押すと「0」を入力して、数字を消すようにしましょう！

ちょっとその前に…

キーボード入力の前に、キーには数字が割り当てられているというお話をします。

キーコードと呼ばれるものですが、例えば「a」というキーには65番が割り当てられています。

そして今回入力したい０～９の数字のキーコードは以下のようになっています。

キー	0	1	2	3	4	5	6	7	8	9
キーコード	48	49	50	51	52	53	54	55	56	57

もしこのキーコードから、その数字が何なのかを調べたかったら、

キーコード – 48

という計算で出せますね！

上の「ちょっとその前に…」でも書いていますが、今回はキーコードというものを使いたいと思います。

いきなり数字を入力するコードを書くので、どういう意味かを理解してみましょう！

function movePointer(e) {
  if (e.key == "ArrowRight") {
    if (x < 8) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x > 0) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y < 8) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y > 0) {
      y = y - 1;
    }
  }else if (e.keyCode >= 48 && e.keyCode <= 57) {
    putNumber(e.keyCode - 48);
  }
  CONTEXT.clearRect(0, 0, 450, 450);
  drawField();
}

＊keyCodeのCは大文字ですよ！

最後の else if文ですね！

まず、０から９のキーを押しているかを確認するために、キーコードが48～57であるかをチェックしていますね！

そして、先ほども書いた通り、キーコード – 48をすればその数字が何かわかるようになっているので、関数の「putNumber」の引数にそのまま入れて、数字を入力できるようにしています！

これで完成です！

ポインターで刺している場所に、押したキーの数字が入力されているはずです！

また、「0」を押せばその場所の数字が消えるようにもなっているはずです！