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

2020年12月11日

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

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

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

今回作るもの

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

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

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

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

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

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

今回必要になる知識

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

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

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

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

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

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

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

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

コードを書いていこう！

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

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

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

関数を使ってまとめる

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

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

まずは、前回作った数字を表示させるコードを「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というのは、線の太さを指定するものです。

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

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

そして最後に、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();
}

下の五行ですね。

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

そして、

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を１つだけ増やせばいいことになりますね！

なので、

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」を追加して完了です！

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

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

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

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

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

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

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

Sample_Gameダウンロード

第四回はここまで！

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

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

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

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

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

第五回はこちらから！

オセロオセロ,プログラミング,HTML,javascript,初心者

Posted by ただの大学生