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

2020年12月26日2020年12月30日

1. 今回作るもの
2. コードを書いていこう！
3. うまくいかなかった方向け
4. 第五回はここまで！

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

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

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

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

今回作るもの

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

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

そして、今回はキーボード入力で駒を置けるようにしていきたいと思います！

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

黒と白の駒を順番に置かれるようになっていますね！

まだ、駒はひっくりかえせませんが、オセロの完成は見えてきましたね！

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

コードを書いていこう！

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

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

ですが、今回から少しずつ難しくなっていくかもしれません。

ゆっくり理解しながら進めていきましょう！

変数をつくる

ではまず初めに、変数を作っていきます。

…
let y = 0;

let turn = "●";

let field = [
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "〇", "●", "", "", ""],
  ["", "", "", "●", "〇", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", ""]
];
…

「turn」という変数を作りました。

この変数には、今黒か白かどっちのターンなのかを入れます。

オセロでは黒が先行らしいので、最初に黒丸を入れておきます。

＊ついでに、前回まで真ん中の4つの駒以外にも2つほどテストのために置いていましたが、ここで消去しておきます。

関数をつくる

では、駒を置くための関数を１つ作りましょう。

駒は英語で「piece」らしいので、「putPiece」という関数を作ります！

function movePointer(e) {
  …省略…
}

function putPiece() {

}

「movePointer」の下に書きました！

駒を置くための処理はここに書いていきます！

キー入力で置けるようにする

では、キーボードの「Enter」を押したら駒が置けるようにしましょう。

駒を置く処理はまだ書いていませんが、「putPiece」に書いていくので、「putPiece」が処理されるようにしましょう。

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;
    }
  }else if (e.key == "Enter") {
    putPiece();
  }

  drawField();
}

最後に、else ifが付いただけですね。

駒を置けるようにする

では本題の、駒を置く処理を書いていきましょう。

ここで、前回作った、xとyの変数を使っていくので、おさらいをしましょう。

ここで、左下の白丸を取り出したければ、field[6][2]とすると取り出すことが出来ます。

つまり、field[y][x]とすることで、多次元配列の中のxとyに対応した場所に駒を記録できますね。

まず初めに、その置きたい場所に駒がすでに置かれていてはいけないので、何もないことを確認するif文を書きましょう。

function putPiece() {
  if (field[y][x] == "") {

  }
}

そして次に、今どっちの色のターンなのかが分からないといけないので、さらに中にif文を書きます。

function putPiece() {
  if (field[y][x] == "") {
    if (turn == "●") {

    }else if (turn == "〇") {

    }
  }
}

あとは、その場所に黒丸か白丸かを置く（＝多次元配列に丸を入れる）ので、


function putPiece() {
  if (field[y][x] == "") {
    if (turn == "●") {
      field[y][x] = "●";
    }else if (turn == "〇") {
      field[y][x] = "〇";
    }
  }
}

このように書けます！

そして最後に忘れちゃいけないのが、置いた後に相手のターンにしてあげないとだめですね。

これはif文を使いこのように書けます。

function putPiece() {
  if (field[y][x] == "") {
    if (turn == "●") {
      field[y][x] = "●";
    }else if (turn == "〇") {
      field[y][x] = "〇";
    }
  }

  if (turn == "●") {
    turn = "〇"
  }else if (turn == "〇") {
    turn = "●"
  }
}

駒を置いたら、今と逆の色のターンにしてあげればいいですね！

これで完成です！

ポインターが指している場所に、黒か白の駒が置かれるようになったはずです！