JavaScriptでオセロを作る① ゲーム盤の作成

2021年 06月 22日

タグ：

JavaScript

オセロ

プログラミング能力を向上させるためには実際に使ってみることが欠かせません。
今回はオセロをJavaScriptで実装してみます。

オセロに必要な要素としては、

盤面をクリックして黒または白の石が交互に置けること。（見た目）
石を置いたときに、自分の石が異なる色の石を挟んでいたら裏返す。（ゲームのルール・ロジック）

の２つが要件が考えられますので、これを分けて実装していきます。

ゲーム盤の作成

まずは見た目の部分であるゲーム盤を実装していきましょう。

マスの仕様としては、クリックするたびに黒のcss属性または白のcss属性を適用し石を置くことを表現します。

今が黒のターンか白のターンかは count 変数を定義し管理します。

HTMLとJavaScriptは別ファイルにまとめ、HTMLからJavaScriptを読み込むようにします。
なお、JavaScriptの関数宣言は全てアロー関数で記述します。

HTML

<!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: repeat(8,1fr);
            width: 800px;
        }
        #board div {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            background-color: green;
        }
        #board .black{
            color: black;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }
        #board .white{
            color: white;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div id="board"></div>
</body>
<script src="./othello.js"></script>
</html>

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();
}