JavaScriptで◯×ゲーム（三目並べ）を作る

2021年 06月 08日

タグ：

JavaScript

クイズゲーム

◯×ゲームを作ろう

プログラミング能力を向上させるためには実際に使ってみることが欠かせません。
今回は初心者向けの課題としてピッタリと言われる◯×ゲーム（三目並べ）をJavaScriptで書いてみました。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .board {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            width: 450px;
        }

        .board div {
            height: 150px;
            width: 150px;
            border: 1px solid black;
            line-height: 150px;
        }

        .maru {
            color: red;
            font-size: 80px;
            text-align: center;
            
        }

        .batu {
            color: blue;
            font-size: 80px;
            text-align: center;
        }
        .win {
            height: 50px;
            width: 450px;
            margin-top:10px;
            padding: 10px;
            border: 1px solid black;
            font-size: x-large;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="board">
    </div>
</body>
<script>
    // 手数を数える
    let count = 0;
    // どのマスがクリックされたかを記録する配列
    const checkList = Array(9).fill(0);
    // 下記と同じ
    // const checkList = [0, 0, 0, 0, 0, 0, 0, 0, 0]

    // イベントの入った９個のマスを作成
    for (let i = 0; i < 9; i++) {
        const masu = document.createElement("div");

        masu.addEventListener("click", ()=> {
            // 同じ箇所はクリックさせない
            if (checkList[i] === 0) {
                // 手番の確認
                if (count % 2 === 0) {
                    masu.setAttribute("class", "maru");
                    masu.textContent = "◯"
                    checkList[i] = "◯"
                } else {
                    masu.setAttribute("class", "batu");
                    masu.textContent = "×"
                    checkList[i] = "×"
                }
                // 手数を進める
                count++;
            }
        })
        document.querySelector(".board").appendChild(masu);
    }

    // boardをクリックする度に勝敗の判定する
    document.querySelector(".board").addEventListener("click", function () {
        // チェック用の配列を作る
        // タテ
        columnA = [checkList[0],checkList[3],checkList[6]]
        columnB = [checkList[1],checkList[4],checkList[7]]
        columnC = [checkList[2],checkList[5],checkList[8]]
        // ヨコ
        rowA = [checkList[0],checkList[1],checkList[2]]
        rowB = [checkList[3],checkList[4],checkList[5]]
        rowC = [checkList[6],checkList[7],checkList[8]]
        // ナナメ
        diagonalA = [checkList[0],checkList[4],checkList[8]]
        diagonalB = [checkList[2],checkList[4],checkList[6]]

        // everyは配列の要素が全て同じ時にtrueを返す
        // everyがtrueを返したら、checkListを全て埋めてクリックできなくする。
        function checkWin(checkArray){
            if (checkArray.every(n=>n === "◯")){
                // checkListを全て埋める
                checkList.fill("1");
                // 勝敗を表示する
                const winA = document.createElement("div");
                winA.textContent = "Aの勝ち！";
                winA.setAttribute("class","win");
                document.body.appendChild(winA)

            } else if (checkArray.every(n=>n === "×")){
                // checkListを全て埋める
                checkList.fill("1");
                // 勝敗を表示する
                const winB = document.createElement("div");
                winB.textContent = "Bの勝ち！";
                winB.setAttribute("class","win");
                document.body.appendChild(winB)
            }
        }

        checkWin(columnA);
        checkWin(columnB);
        checkWin(columnC);
        checkWin(rowA);
        checkWin(rowB);
        checkWin(rowC);
        checkWin(diagonalA);
        checkWin(diagonalB);
    })

</script>

</html>

もっと簡潔に書ける気がする。

配列とevery()メソッドを使い、勝敗の条件判定を行う。

クリックしたら◯か×に変わるという機能は比較的簡単ですが、勝敗を判定する部分が少し難しいです。
素直にif文を使い条件分岐を書き込みまくるのも一つの手ですが、配列専用のメソッドであるevery() を使うと良いです。

// 偶数の配列
evenNumber = [2,4,6,8,10];

const checkEven = evenNumber.every((n) => n%2 === 0)

console.log(checkEven) // true

上記の文で((n) => n%2)という部分はアロー関数式と呼びます。配列から要素を順番に取り出してnという名前を仮に付け、そのnに対して式を評価しています。 アローというのは => のマークが矢印に見えるからだとか。