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

2020年10月31日

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

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


今回作るもの

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

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

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

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

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

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

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


コードを書いていこう!

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

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

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


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

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

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

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

追加する条件は…

その場所のマスの数字が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」が表示されなくなっているはずです!


数字を入力する下準備

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

…
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」というものです。

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

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

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

数字を表示させるコードは先ほど書いた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」は1~9の数字になることも分かりますね!

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


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

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

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

ちょっとその前に…

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

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

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

キー0123456789
キーコード48495051525354555657

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

キーコード – 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文ですね!

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

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

これで完成です!

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

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


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

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

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

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

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

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


第五回はここまで!

ということで第五回はここまでとしたいと思います!

数字を入力できるようになると、数独として遊べるようになりましたね!

次回は最終回として、ゲームクリア時の演出を追加するなど、細かい部分を追加していきます!

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

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

第六回はこちらから!