【初心者向け】第四回 メモ帳だけでゲーム作ってみた〈オセロ編〉

2020年12月11日

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

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

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


今回作るもの

前回は、オセロの駒を表示させましたね!

  1. 準備編
  2. オセロの盤を表示させよう!
  3. オセロの駒を表示させよう! ←前回
  4. キー入力で動かせるようにしよう! 今回
  5. キー入力で駒を置けるようにしよう!
  6. 駒が裏返るようにしよう!

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

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

ポインターが赤く囲われていて、キーボードの矢印キーで好きに動かせるようになっています!

また、今回でマス目の色とポインターの色を自由に変えられるようにしますので、好みのカラーにしてみましょう!


今回必要になる知識

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

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

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

そこまで難しくないと思いますので、簡単に理解しておきましょう!

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

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

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

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


コードを書いていこう!

ではさっそく前回と同様にコードを書いていきましょう!

今回は、関数と条件分岐を使っていきますが、繰り返しよりかは分かりやすいと思いますので、前回よりかは簡単だと思います!

最後まで頑張っていきましょう!


関数を使ってまとめる

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

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

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

… 
   ["", "", "", "", "", "", "", ""]
  ];

  function drawField() {
    CONTEXT.beginPath();
    for (let i = 50; i <= 350; i = i + 50) {
      …中略…
    }
  
    CONTEXT.font = "40px serif";
    CONTEXT.textAlign = "center";
    CONTEXT.fillText(field[1][1], 75, 90);
  }

  drawField();

</script>
…

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

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

そしてもう一つ!

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

  …
  drawField();

  function movePointer(e) {
  
  }

</script>
…

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

これで、関数はお終いです!

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


変数を作る

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

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

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

let x = 0;
let y = 0;

let field = [
…

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

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

つまり、左上の黒丸を指すときには、x = 1, y = 1となるようにしたいと思います!

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


ポインターを表示させる前の下準備

次に、ポインターを表示させる前に、前回までのコードに少し加える部分があるので、追記します。

function drawField() {
  CONTEXT.clearRect(0, 0, 400, 400);

  CONTEXT.lineWidth = 1;
  CONTEXT.strokeStyle = "black";
  CONTEXT.beginPath();
  for (let i = 50; i <= 350; i = i + 50) {
    CONTEXT.moveTo(i, 0);
    CONTEXT.lineTo(i, 400);
    CONTEXT.stroke();

    CONTEXT.moveTo(0, i);
    CONTEXT.lineTo(400, i);
    CONTEXT.stroke();
  }

  CONTEXT.font = "40px serif";
  CONTEXT.textAlign = "center";
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      CONTEXT.fillText(field[i][j], 25 + 50 * j, 40 + 50 * i);
    }
  }
}

2、4、5行目に新しいものが追加されていますね。

まず初めに、clearRectというのは画面を消すコードです。

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

という使い方をしますので、これで画面がすべて消されるようになります。

なぜこれを追加するかというと、ポインターを移動したときにポインターを再表示させるのですが、画面を消さないと上からまたポインターが表示されおかしくなってしまいます。

実際にこの行を消して試してみてもいいですね。

そして次に、lineWidthというのは、線の太さを指定するものです。

前回は特に設定していなかったので、初期設定の1だったんですが、今回あえて設定しました。

これはあとで線の太さを4に変えたりするので、ここで線の設定を1に戻すようになっています。

そして最後に、strokeStyleというので線の色を設定しています。

こちらも初期設定は黒なんですが、ポインターを表示させるときに別の色に変えるので、黒に戻すようになっています。

線の色を変えたければここに、「orange」や「blue」など英語名で入れましょう。

これで準備はおしまいです~


ポインターを表示させる

では本題の、先ほど作ったxとyという変数を使いながらポインターを表示させていきたいと思います。

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

function drawField() {
  CONTEXT.clearRect(0, 0, 400, 400);

  CONTEXT.lineWidth = 1;
  CONTEXT.strokeStyle = "black";
  CONTEXT.beginPath();
  for (let i = 50; i <= 350; i = i + 50) {
    CONTEXT.moveTo(i, 0);
    CONTEXT.lineTo(i, 400);
    CONTEXT.stroke();

    CONTEXT.moveTo(0, i);
    CONTEXT.lineTo(400, i);
    CONTEXT.stroke();
  }

  CONTEXT.font = "40px serif";
  CONTEXT.textAlign = "center";
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      CONTEXT.fillText(field[i][j], 25 + 50 * j, 40 + 50 * i);
    }
  }

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

下の五行ですね。

上の2つの部分はすでに解説をしましたね。

そして、

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

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

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

という意味があります!

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

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


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

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

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

document.addEventListener("keydown", movePointer);

let x = 0;
…

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

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

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


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

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

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

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

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

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

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

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

  }

  drawField();
}

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

引数の「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の値が7のとき(ポインターが一番右を差しているとき)は右には行けないですね!

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

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

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

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

  }
}

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

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

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

となることから、

function movePointer(e) {
  if (e.key == "ArrowRight") {
    if (x < 7) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x > 0) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y < 7) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y > 0) {
      y = y - 1;
    }
  }
}

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

後は最後に画面を更新しないといけないので、

function movePointer(e) {
  if (e.key == "ArrowRight") {
    if (x < 7) {
      x = x + 1;
    }
  }else if (e.key == "ArrowLeft") {
    if (x > 0) {
      x = x - 1;
    }
  }else if (e.key == "ArrowDown") {
    if (y < 7) {
      y = y + 1;
    }
  }else if (e.key == "ArrowUp") {
    if (y > 0) {
      y = y - 1;
    }
  }

  drawField();
}

最後に「drawField」を追加して完了です!

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

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

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


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

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

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

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


第四回はここまで!

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

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

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

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

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

第五回はこちらから!