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

ビンゴ条件の判定

ビンゴの成立を判定するためには、縦・横・斜めの５＋５＋２＝１２通りの組み合わせについて、判定を行う必要があります。

これはcheckList配列から素直に１２個の配列を作成し、それぞれの配列に対してビンゴが成立しているか確認しましょう。

条件判定はclickイベントが発生する度に行う必要があります。
makeMasu関数の中のイベント要素の中に入れても良いですが、コードが複雑になるので、条件判定専用のイベント要素を作成するのがおすすめかなと思います。

横方向(Row)の判定

横方向の判定を行う配列を素直に作るとこんな感じです。

checkList = []

const makeMasu = (i) => {
    const masu = document.createElement("div");

    // コマの番号を５で割った余りからどの列かを出す
    const col = i % 5;
    const randomNumber = Math.floor(Math.random() * 15 + col * 15 + 1);
    // randomNumber = col

    checkList.push(randomNumber);
    masu.textContent = randomNumber;

    masu.addEventListener("click", (evt) => {
        evt.target.textContent = "◯";
        checkList[i] = "◯"
    })
    document.querySelector(".bingocard").appendChild(masu);
}

for (let i = 0; i < 25; i++) {
    makeMasu(i);
}

// ここから条件判定
// 読みにくくなるので分割した

document.body.addEventListener("click", () => {
    checkRow0 = [checkList[0], checkList[1], checkList[2], checkList[3], checkList[4]]
    console.log(checkRow0)
})

ここで、sliceメソッドを使ってみましょう。
sliceは指定した範囲の配列から新しい配列を作成してくれます。

下記のコードから、問題なく動作していることがわかります。

// ここから条件判定
// 読みにくくなるので分割した

document.body.addEventListener("click", () => {
    checkRow0 = [checkList[0], checkList[1], checkList[2], checkList[3], checkList[4]]
    console.log(checkRow0)
    checkRow1 = checkList.slice(5, 10)
    console.log(checkRow1)
})

縦方向(Column)の判定

横方向の判定も素直に書く方法の他に、filterメソッドを使う方法があります。 filterは普段は第一引数しか取りませんが、第二引数を設定すると、その引数には配列の要素の位置の数が格納されます。こんな仕様知らなかった・・。

document.body.addEventListener("click", () => {
    // 横方向
    checkRow0 = checkList.slice(0,5);
    checkRow1 = checkList.slice(5, 10);
    checkRow2 = checkList.slice(10, 15);
    checkRow3 = checkList.slice(15, 20);
    checkRow4 = checkList.slice(20,25);

    // 縦方向
    checkCol0 = [checkList[0], checkList[5], checkList[10], checkList[15], checkList[20]]
    // 確認
    console.log(checkCol0)
    checkCol1 = bingoBoard.flat().filter((n,i) => i % 5 === 1);
    console.log(checkCol1)
})

ビンゴの判定

// ここから条件判定

const checkArray = (array) => {
    const result = array.every(n => n === "◯")
    return result;
}

document.body.addEventListener("click", () => {
    checkRow0 = checkList.slice(0,5);
    checkRow1 = checkList.slice(5, 10);
    checkRow2 = checkList.slice(10, 15);
    checkRow3 = checkList.slice(15, 20);
    checkRow4 = checkList.slice(20,25);

    checkCol0 = checkList.filter((n,i) => i % 5 === 0);
    checkCol1 = checkList.filter((n,i) => i % 5 === 1);
    checkCol2 = checkList.filter((n,i) => i % 5 === 2);
    checkCol3 = checkList.filter((n,i) => i % 5 === 3);
    checkCol4 = checkList.filter((n,i) => i % 5 === 4);

    checkNaname1 = [checkList[0], checkList[6], checkList[12], checkList[18], checkList[24]];
    checkNaname2 = [checkList[4], checkList[8], checkList[12], checkList[16], checkList[20]];


}