なんちゃってまるばつゲームをつくりました【Javascript】

javascript

ウェブページで遊べる「なんちゃって○×ゲーム」をつくりました。
HTMLとCSSで表示部分を作成し、動きはjavascriptで実装しました。
マス目をクリックしたら〇か×が表示されるだけのシンプルなものです。機会があれば勝敗の判定をつけたいです。。

サンプルページはこちらです。まずは実際の動作を確認してください!

まるばつゲーム | えむ家のメモ帳

ソースコードを確認

まるばつゲームはHTMLとCSS、javascript(JS)で作成しました。
作成手順のポイントをメモしておきます。

ページの構造をHTMLで作る

HTMLでゲームの外枠部分だけをつくります。マス目はtableタグの中にJSで動的に書き出すので空にします。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="container">
        <table id="board"></table>
    </div>
</body>
</html>

ページの装飾をCSSで指定する

CSSでオセロのマス目のようなデザインにします。

#container {
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #999;
    max-width: 100%;
    background: green;
    text-align: center;
}

td {
    border: 1px solid #fff;
    width: 50px;
    height: 50px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;

}

javascriptでマス目を作成してイベントを設定する

JSのコード全体はこんな感じになりました。
ポイントだけメモしておきます。

window.addEventListener('DOMContentLoaded', () => {// ページ読込後に実行
    let board = document.getElementById("board");
    let xy = 3;
    let count = 0;

    for (let i = 0; i < xy; i++) {
        let tr = document.createElement("tr");
        for (let j = 0; j < xy; j++) {
            let td = document.createElement("td");
            const option = { once: true };

            td.className = `cell ${j}-${i}`;
            tr.appendChild(td);

            td.addEventListener('click', (event) => {
                let self = event.target;
                let pice = count++ % 2 == 0 ? "○" : "×";
                self.textContent = pice;
                if (count == xy * xy) {
                    setTimeout(() => {
                        alert('終了しました。');
                    }, 300);
                }

            }, option);
        }
        board.appendChild(tr);
    }
});

まるばつゲームのマス目を指定して動的に書き出す

変数xyの値は作成する縦横のマス目の数です。初期値が3なので、全部で9個のマス目ができます。この値を変更すると表示されるマス目も変わります。

let xy = 3;

マス目をクリックした時に発生するイベントは1回のみ

マス目をクリックした時に発生するイベントは「addEventListener」で設定しますが、複数回クリックすると挙動がおかしくなるので、発火するのは1回だけにします。

一回だけ発火させるには「addEventListener」のオプション「once」をtrueに設定します。

const option = { once: true };
element.addEventListener('click', (event) => {
    let self = event.target;
    // 変数[self]に対して実行したい処理を記述
}, option);

クリックした時、〇か×どちらを表示するかの判定

マス目をクリックした時、クリックした数をカウントして、偶数だったら「〇」。奇数だったら「×」を表示します。
以下のコードでは判定と同時にカウントの数を1つ増やしています。

let pice = count++ % 2 == 0 ? "○" : "×";

すべてのマス目をクリックしたらゲーム終了

全てのマス目をクリックしたらゲーム終了です。終了の判定は、マス目全体の数とクリック数が同じ数になった時にします。ゲームが終わったら“終了しました”のアラートを表示します。

アラートが表示されるタイミングが、デフォルトだと少し早いように感じたので、setTimeoutで若干遅く表示します。

if (count == xy * xy) {
    setTimeout(() => {
        alert('終了しました。');
    }, 300);
}

まとめ

単純なまるばつゲームですが、プログラムで作成するのは難しかったです。。
都度ブラッシュアップしていきます!

コメント