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

2020年11月20日

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

是非最後まで読んで、完成させましょう!

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


今回作るもの

前回は、数独の数字を表示しましたね!

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

そして、今回は動かせるポインターを作りたいと思います!

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

オレンジ色になっているのがポインターですね!

マス目の色とポインターの色は自分好みの色に変えることができますので、好きな感じに仕上げましょう!


今回必要になる知識

今回もコードを書いていくうえで、必要になってくる知識が2つほどあります。

まず1つ目が、関数です!

関数については、下記の記事で詳しくまとめたので、是非参考にしてみてください!

【誰でもわかる!】関数とは

プログラミングを勉強していく中で、関数とは非常に便利な存在です! 完全に理解して使いこなせるようになるまでは、少し時間がかかるかもしれません… ですが、使いこなせるとプログラムがきれいになるなど様々なメリットがあるため、 […]

そして、2つ目は条件分岐です!

条件分岐についてもまとめた記事があるので、参考にしてください!

【誰でもわかる!】条件分岐とは

プログラミングを勉強していく中でとても大事になってくるのが条件分岐です。ゲームでの当たり判定など条件分岐はとてもよく使われるものです! 今回は主にJavascriptの条件分岐について詳しく書いていきますが、ほかの有名な […]


コードを書いていこう!

ここから実際に前回の続きでメモ帳にコードを書いていきましょう。

今回は、関数と条件分岐を使っていくので、またまた少し難しく感じるかもしれません

もし、理解に時間がかかりそうなら次に進めても全然大丈夫です!

プログラミングでは同じようなコードを使うことが多いので、またいつか同じようなコードを使うときに理解すれば大丈夫ですよ~!


関数を使ってまとめる

前回は、繰り返しを使ってコードをまとめ、短くしました!

そして、今回はまず初めに、
先ほどご紹介した「関数」を使って見やすくしていきたいと思います!

まずは、前回作った数字を表示させるコードを「drawField」という関数にしましょう!

  [0, 4, 8, 7, 1, 6, 0, 2, 0]
];

function drawField() {
  CONTEXT.lineWidth = 5;

  …省略…

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

drawField();

</script>

function drawField()~ の部分で、仕事の内容を決めて、

最後の「drawField();」で、その仕事を呼び出していますね!

そしてもう一つ!

キーが押されたときに、ポインターを動かす処理を「movePointer」という名前の関数として新しく作りましょう!

drawField();

function movePointer(e) {
  
}

</script>

今回は、押されたキーによって、右に行くか左に行くか処理を変えるため、
「e」という引数を設定しました!

これで、関数はおしまいです!

これで実行しても、前回と同じようにカードが表示されるはずです!


変数を作る

では次に、今回使う変数を作っていきましょう!

前回作った配列の上に追加していきます!

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

let x = 0;
let y = 0;

let number = [
  [6, 0, 5, 0, 0, 3, 4, 0, 0],
…

ポインター用のxとyという変数を作りました。

そしてこのxとyはこのように対応させて使いたいと思います!

つまり、x = 3, y = 4のときには、ポインターが9を指すようにします!

実際にコードを組まないとわからないこともあるので、次に進めましょう!


ポインターを表示させる

では次に、今作ったxとyを使ってポインターを表示させてみましょう!

drawFieldの最後の部分にコードを追加します!

function drawField() {

  …省略…

  CONTEXT.font = "30px serif";
  CONTEXT.textAlign = "center";


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

  CONTEXT.lineWidth = 4;
  CONTEXT.strokeStyle = "orange";
  CONTEXT.beginPath();
  CONTEXT.rect(x * 50, y * 50, 50, 50);
  CONTEXT.stroke();
}

最後の五行ですね!

CONTEXT.strokeStyle = "orange";

このコードで線の色を指定します!
好きな色の名前を入力しましょう!

CONTEXT.rect(x * 50, y * 50, 50, 50);

このコードで、四角形を引きます。

rect(始まりのx座標, 始まりのy座標, 横幅, 縦の幅);

という意味があります!

最初はx = 0, y = 0なので、左上のマスが四角で囲われるはずです!

また、xとyの値を変えると、対応した場所に四角で囲われるようになるはずです!

ついでに…

function drawField() {
  CONTEXT.strokeStyle = "green";
  CONTEXT.lineWidth = 5;

drawFieldの初めにも、色の設定を追加しておきましょう。

これでマス目の線も好きな色に設定できるようになります!


キーボードの入力を検知する

ポインターを動かす処理を実際に書いていく前に、キーボードの入力を検知するためのコードを1行だけ書きます!

多次元配列の下に書きましょう!

  [0, 4, 8, 7, 1, 6, 0, 2, 0]
];

document.addEventListener("keydown", movePointer);

これについて詳しく説明すると難しくなってしまうので、簡単に説明すると…

キーボードのキーのどれかが押されたときに、
「movePointer」という仕事をする

といった意味があります。


ポインターを動かす処理を書いていく

ということでここで本題です!

先ほど作った、「movePointer」という関数に、ポインターを動かす処理を書いていきましょう!

まず初めに、条件分岐を用いて、どのキーが押されたかを判別するコードを書きます!

function movePointer(e) {
  if (e.key == "ArrowRight") {

    }
  }else if (e.key == "ArrowLeft") {

    }
  }else if (e.key == "ArrowDown") {

    }
  }else if (e.key == "ArrowUp") {

    }
  }
}

先ほども少し説明しましたが、どのキーが入力されたかが引数によってわかるので、

引数の「key」が「ArrowRight」(右矢印キー)なら~

といったように条件で分けました。

そしてここから、先ほど作った変数の「x」と「y」を使っていきます。

念のためもう一回のっけておきます

右キーを押されたときに右にポインターを動かすには、xを1つだけ増やせばいいことになりますね!

なので、

function movePointer(e) {
  if (e.key == "ArrowRight") {
    x = x + 1;
  }else if (e.key == "ArrowLeft") {

    }
  }else if (e.key == "ArrowDown") {

    }
  }else if (e.key == "ArrowUp") {

    }
  }
}

と書けますね!

ですが、一つ気を付けないといけないのが、

xの値が8のとき(ポインターが一番右を差しているとき)は右には行けないですね!

なので、条件分岐をうまく使い、

function movePointer(e) {
  if (e.key == "ArrowRight") {
    if (x < 8) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {

  }else if (e.key == "ArrowDown") {

  }else if (e.key == "ArrowUp") {

  }
}

このように、xが8未満の時だけ、xを1つ増やすという処理にすればいいですね!

あとは、ほかも同じように考えて、

左キーが押されたら、xの値を1つ減らす
下キーが押されたら、yの値を1つ増やす
上キーが押されたら、yの値を1つ減らす

となることから、

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;
    }
  }
}

このように書けばいいですね!

あとは、キーボードが押された後に、

1.画面を一度真っ白に戻す
2.線と数字とポインターを再表示する

といった手順で画面を更新すればいいですね!

画面を真っ白に戻すには、画面の一部分を消す「clearRect」というものを用いて、

clearRect(x座標, y座標, 横幅, 縦の幅);

を画面の端っこから端まで消せばいいので、

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;
    }
  }

  CONTEXT.clearRect(0, 0, 450, 450);
  drawField();
}

これで、今回の目標は達成です!

ポインターが矢印キーで動かせるようになっているはずです1

少しずつですが、できていくのを見るのは楽しいですね♪


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

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

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

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

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

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


第四回はここまで!

ということで第四回はここまでとします!

ポインターを動かせることができて、少しずつ完成が見えてきましたね!

次回は、数字をポインターを使って入力できるようにしていきたいと思います!

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

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

第五回はこちらから!