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

2020年12月6日

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

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

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

今回作るもの

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

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

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

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

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

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

今回必要になる知識

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

まず１つ目が、関数です！

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

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

プログラミングを勉強していく中で、関数とは非常に便利な存在です！ 完全に理解して使いこなせるようになるまでは、…

そして、２つ目は条件分岐です！

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

コードを書いていこう！

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

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

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

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

関数を使ってまとめる

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

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

まずは、前回作った数字を表示させるコードを「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のときには、ポインターが９を指すようにします！

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

ポインターを表示させる

では次に、今作った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を１つだけ増やせばいいことになりますね！

なので、

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が８未満の時だけ、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;
    }
  }
}

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

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

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

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

画面を真っ白に戻すには、画面の一部分を消す「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();
}

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

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

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

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

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

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

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

Sample_Gameダウンロード

第四回はここまで！

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

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

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

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

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

第五回はこちらから！

数独・ナンプレナンプレ,プログラミング,メモ帳,HTML,javascript,初心者,数独

Posted by ただの大学生