理系公務員のプログラミング日記

オセロのルール（ロジック）を詳細に定義する

オセロのルール部分を実装していきます。
最初に要件として定義したルールは「石を置いたときに、自分の石が異なる色の石を挟んでいたら裏返す。」でした。

このルールをより詳細に定義すると、

1. 石を置き、これをAとする。Aの上下左右斜めを調べて、Aの色と異なる色の石がないかを調べる。
2. 異なる色の石があれば、それをBとする。Bの隣の石の色を調べる。
3. Bの隣に何もない（または盤の端）なら終了する。（裏返すものがないときは、Aは無効になる）
4. Bの隣の石をCとする。CがAと同じ色であればBをAと同じ色に変更する。
5. CがBと同じ色であれば、Cの隣の石を確認する。
6. Cの隣に何もないなら終了する。
7. Cの隣の石をDとする。DがAと同じ色であればBとCを同じ色に変更する。
8. DがB,Cと同じ色であれば、Dの隣の石を確認する。（以下略）

現在の盤の石の色を管理する。（１次元の場合）

上記で定義したルールを実際に実装しようとするなら、現在の盤の石の色を管理する仕組みが必要です。
そのために盤の状態を管理させる配列を実装します。

話を難解にしないために、８×１マスの１次元の場合で考えます。

JavaScript

let count = 0;

// クリックイベントに反応して石を書くマスの要素を作る
const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            square.setAttribute("class", "black");
            square.textContent = "●";
        } else {
            square.setAttribute("class", "white");
            square.textContent = "◯";
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

// setSquareを64回繰り返して盤を作る
for (let i = 0; i < 64; i++) {
    setSquare();
}

リファクタリングを行う

見た目は実装できたので次のゲームのルールについてのコードを書く前に、今回書いたコードを見直し、改善点がないか検討します。
(この作業を リファクタリング といいます。)

オセロのルールを考えると、 「石を黒にする・白にする」という処理は頻繁に出てきそう です。
この部分を関数として抽出したいと思います。

JavaScript よく使う処理を関数として抽出する

let count = 0;

const setBlack = (element) => {
    element.setAttribute("class", "black");
    element.textContent = "●";
}

const setWhite = (element) => {
    element.setAttribute("class", "white");
    element.textContent = "●";
}

const setSquare = () => {
    const square = document.createElement("div");
    square.addEventListener("click", () => {
        if (count % 2 === 0) {
            setBlack(square);
        } else {
            setWhite(square);
        }
        count++;
    })
    document.getElementById("board").appendChild(square)
}

for (let i = 0; i < 64 i++) {
    setSquare();
}