JSで実施された機雷掃海プロジェクトの概要

この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。

プロジェクト展示画像

プロジェクト準備

同様に、ルートディレクトリに3つのフォルダとindex.htmlファイルを準備します。

それから2枚の写真（地雷と旗）

次にHTML構造

html

まず、ゲームコンテンツエリアの最も外側のdivはmineという名前です

<div id="私の">
</div>

次は、ゲームコンテンツ領域の上部にある 4 つのボタンです。これらを表すために 4 つのボタンタグを使用し、div で囲みます。

プライマリボタンに初期選択スタイルを設定します

<div class="レベル">
    <button class="active">プライマリ</button>
    <button>中級</button>
    <button>詳細設定</button>
    <button>再起動</button>
</div>

次は地雷原であるゲームエリアです。

<div class="gameBox">
</div>

最後はプロンプトエリアです

<div class="info">
    残りの地雷: <span class="mineNum"></span>
    <br>
    <span class="tips">左クリックで地雷を撤去、右クリックで旗を立て、もう一度右クリックで旗を撤去します</span>
</div>

最後に、最終的なコードを次のように統合します。

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>JS マインスイーパ</title>
    <link rel="スタイルシート" href="CSS/index.css" >
    <link rel="icon" href="favicon.ico" >
</head>

<本文>
    <div id="私の">
        <div class="レベル">
            <button class="active">プライマリ</button>
            <button>中級</button>
            <button>詳細設定</button>
            <button>再起動</button>
        </div>
        <div class="gameBox">
        </div>
        <div class="info">
            残りの地雷: <span class="mineNum"></span>
            <br>
            <span class="tips">左クリックで地雷を撤去、右クリックで旗を立て、もう一度右クリックで旗を撤去します</span>
        </div>
    </div>
    <script src="JS/index.js"></script>
</本文>

</html>

CS

まず、メインコンテンツを鉱山の最も外側の領域の中央に配置します。

＃私の {
    マージン: 50px 自動;
}

その後、レベルdivとその中のボタンにスタイルを追加します。

そして、デフォルトのアクティブスタイルを追加します

。レベル {
    テキスト配置: 中央;
    下マージン: 10px;
}

.レベルボタン{
    パディング: 5px 15px;
    背景色: #02a4ad;
    境界線: なし;
    色: #fff;
    境界線の半径: 3px;
    アウトライン: なし;
    カーソル: ポインタ;
}

.レベルボタン.アクティブ{
    背景色: #00abff;
}

その後、テーブルタグとtdタグを再定義しました。マインスイーパーのメインゲームエリアはテーブルタグを通じて実装されます。

テーブル {
    境界線の間隔: 1px;
    背景色: #929196;
    マージン: 0 自動;
}

td {
    パディング: 0;
    幅: 20px;
    高さ: 20px;
    背景色: #ccc;
    境界線: 2px 実線;
    境界線の色: #fff #a1a1a1 #a1a1a1 #fff;
    テキスト配置: 中央;
    行の高さ: 20px;
    フォントの太さ: 太字;

}

次はプロンプトエリアのスタイルです

。情報 {
    上マージン: 10px;
    テキスト配置: 中央;
}

.ヒント {
    色: 赤;
    フォントサイズ: 16px;
}

最後に、いくつかのスタイルを事前に定義します

例えば、鉱山のスタイルやチェスの駒のスタイルなど

。私の {
    背景: #d9d9d9 url(../images/mine.png) 繰り返しなし 中央;
    背景サイズ: カバー;
}
。フラグ {
    背景: #ccc url(../images/flag.png) 繰り返しなし 中央;
    背景サイズ: カバー;
}

最後に、ゲームでは、一部のブロックに数字が表示されます。これは、ブロックの周囲にある地雷の数を表します。

td.ゼロ{
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
}

td.one {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #0332fe;
}

td.2 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #019f02;
}

td.3 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff2600;
}

td.4 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #93208f;
}

td.5 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff7f29;
}

td.6 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff3fff;
}

td.7 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #3fffbf;
}

td.8 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #22ee0f;
}

まとめると、CSSコードを統合した後の完全なCSSコードは次のようになります。

＃私の {
    マージン: 50px 自動;

}

。レベル {
    テキスト配置: 中央;
    下マージン: 10px;
}

.レベルボタン{
    パディング: 5px 15px;
    背景色: #02a4ad;
    境界線: なし;
    色: #fff;
    境界線の半径: 3px;
    アウトライン: なし;
    カーソル: ポインタ;
}

.レベルボタン.アクティブ{
    背景色: #00abff;
}

テーブル {
    境界線の間隔: 1px;
    背景色: #929196;
    マージン: 0 自動;
}

td {
    パディング: 0;
    幅: 20px;
    高さ: 20px;
    背景色: #ccc;
    境界線: 2px 実線;
    境界線の色: #fff #a1a1a1 #a1a1a1 #fff;
    テキスト配置: 中央;
    行の高さ: 20px;
    フォントの太さ: 太字;

}

.ヒント {
    色: 赤;
    フォントサイズ: 16px;
}

。私の {
    背景: #d9d9d9 url(../images/mine.png) 繰り返しなし 中央;
    背景サイズ: カバー;
}

。フラグ {
    背景: #ccc url(../images/flag.png) 繰り返しなし 中央;
    背景サイズ: カバー;
}

。情報 {
    上マージン: 10px;
    テキスト配置: 中央;
}


td.ゼロ{
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
}

td.one {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #0332fe;
}

td.2 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #019f02;
}

td.3 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff2600;
}

td.4 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #93208f;
}

td.5 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff7f29;
}

td.6 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #ff3fff;
}

td.7 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #3fffbf;
}

td.8 {
    背景色: #d9d9d9;
    境界線の色: #d9d9d9;
    色: #22ee0f;
}

JavaScript

アイデア

今回はプロトタイプチェーンでプログラミングします

まず、私のコンストラクタを書いてみましょう

鉱山建設業者

関数Mine(tr, td, mineNum) {
    this.tr = tr; // tr は行数を示しますthis.td = td; // td は列数を示しますthis.mineNum = mineNum; // mineNum は地雷の数を示しますthis.squares = []; // すべてのマス目の情報を格納します。これは行と列の順序で並べられた 2 次元配列であり、行と列のモードでアクセスしますthis.tds = []; // すべてのセルの DOM を格納します
    this.surplusMine = mineNum; // 残りの地雷の数this.allRight = false; // マークされた赤い旗を右クリックして、それらがすべて地雷であるかどうかを確認し、ユーザーがゲームを正常にプレイしたかどうかを判断しますthis.parent = document.querySelector('.gameBox');
}

ランダムな地雷配置を生成する

コンストラクターに、行数、列数、必要な地雷の数という 3 つのパラメーターを渡しました。私たちのアイデアは次のとおりです。ゲームはテーブルでプレイされ、テーブルには合計 tr * td の正方形があります。次に、長さ tr * td の配列を作成し、配列に値を割り当てます。各値は正方形に対応し、最後に配列をシャッフルして最初の mineNum (必要な地雷の数) を取り出します。これらの mineNum の正方形は、地雷の正方形に対応します。

次にjsコードを記述します

Mine.prototype.randomNum = 関数（）{
    var square = new Array(this.tr * this.td); // セルの合計数に等しい長さの空の配列を生成します for (var i = 0; i < square.length; i++) {
        平方[i] = i;
    }
    // 配列シャッフル square.sort(function () {
        0.5 を返す - Math.random()
    });
    square.slice(0, this.mineNum) を返します。
};

テーブルを作成する

上記では地雷の位置を取り出しましたが、ゲームエリアを作成するときには必要ありません。作成時にロジックを記述できます。小さな四角をクリックすると、その位置が地雷か空かが判断できます。

そのため、まずテーブルを作成するためのjsコードを記述します

Mine.prototype.createDom = 関数（）{
    var これ = これ;
    var テーブル = document.createElement('テーブル');
    for (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        this.tds[i] = [];
        for (var j = 0; j < this.td; j++) { // 列 var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // 作成されたすべてのtdsを配列に追加します。domTd.pos = [i, j]; // グリッドに対応する行と列をグリッドに追加し、この値を通じて配列から対応するデータを取得できるようにします。domTd.onmousedown = function () {
                This.play(event, this); // 大きな This はインスタンス オブジェクトを参照し、小さな this はクリックされた domTd を参照します 
            };

            // if (this.squares[i][j].type == 'mine') {
            // domTd.className = 'mine';
            // }
            // if (this.squares[i][j].type == 'number') {
            // domTd.innerHTML = this.squares[i][j].value;
            // }

            domTr.appendChild(domTd);
        }
        テーブルに子要素を追加します。
    }
    this.parent.innerHTML = ''; // 複数回のクリックを避けて複数のテーブルを作成します this.parent.appendChild(table);
};

これは、ブロックをクリックした後、それが地雷かスペースかを判断するためのものです。

再生関数を書く前に、他のロジックを書く必要があります。

初期化関数

Mine.prototype.init = 関数（）{
    // this.randomNum();
    var rn = this.randomNum(); // グリッド内の地雷の位置 var n = -1; // 対応するインデックスグリッドを見つけるために使用 for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        (var j = 0; j < this.td; j++) の場合 {
            // 配列内のブロックのデータを取得するには、行と列の形式を使用してアクセスします。// ブロックの周囲のブロックを見つけるには、座標形式を使用してアクセスします。// 行と列の形式は、座標形式 x と y の逆です。n++;
            (rn.indexOf(n) != -1) の場合 {
                // この条件が満たされた場合、現在ループしているインデックスが地雷配列内に見つかったことを意味し、このインデックスは地雷に対応することを意味します this.squares[i][j] = {
                    タイプ: 'mine'、
                    x: j,
                    y: 私
                };

            } それ以外 {
                this.squares[i][j] = {
                    タイプ: '数値'、
                    x: j,
                    y: 私、
                    値: 0
                };
            }
        }
    }

    this.updateNum();
    このメソッドは、Dom を作成します。

    this.parent.oncontextmenu = 関数（）{
        false を返します。
        // 右クリックメニューイベントを防止する}

    // 残りの地雷の数 this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};

getAround() 関数

// 正方形の周りの8つのグリッドを見つける Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = 平方y;
    var result = []; // 見つかったグリッドの座標を返します（2次元配列）
    (var i = x - 1; i <= x + 1; i++) の場合 {
        (var j = y - 1; j <= y + 1; j++) の場合 {
            もし (i < 0 ||
                0 未満
                i > this.td - 1 ||
                j > this.tr - 1 ||
                // 上記の式は境界を示しています (i == x && j == y) ||
                // 自分自身へのループを示します this.squares[j][i].type == 'mine'
                // （周囲のグリッドの）地雷へのループを示します（i と j は座標を表し、四角形は行と列を格納することに注意してください）
            ）{
                続く;
            }
            // 配列内のデータを取得するために必要となるため、行と列の形式で返す必要があります result.push([j, i]);
        }
    }
    結果を返します。
}

updateNum() 関数

// すべての数字を更新 Mine.prototype.updateNum = function () {
    (var i = 0; i < this.tr; i++) の場合 {
        (var j = 0; j < this.td; j++) の場合 {
            // Leiの周りの数字を更新するには if (this.squares[i][j].type == 'number') {
                続く;
            }
            var num = this.getAround(this.squares[i][j]); // 各地雷の周囲の数字を取得します for (var k = 0; k < num.length; k++) {
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
};

再生機能

Mine.prototype.play = 関数 (ev, obj) {
    var これ = これ;
    if (ev.which == 1 && obj.className != 'flag') { // 次の条件は、ユーザーが右クリックした後にクリックしないことです // 左ボタンがクリックされました var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['0', '1', '2', '3', '4', '5', '6', '7', '8'];
        // cl はクラス名を格納します

        curSquare.type == '数値'の場合{
            // ユーザーが数字をクリックしました obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // 数字のゼロをクリックした場合 if (curSquare.value == 0) {
                /* 
                    再帰的思考: 
                    1. 自分自身を表示する 2. 周囲を検索する 1) 周囲を表示する（周囲の値がゼロでない場合は、ここで表示し、それ以上検索する必要はありません）
                        2) 値がゼロの場合、a. 自身を表示し、b. 周囲を検索します (周囲の値がゼロでない場合は、ここで表示し、それ以上検索する必要はありません)
                                I. 表示自体 II. 周囲を検索（周囲の値がゼロでない場合は、ここに表示し、再度検索する必要はありません）
                                    。 。 。 。 。 。
                 */

                obj.innerHTML = ''; // 空として表示される function getAllZero(square) {
                    var around = This.getAround(square); // N 個の周囲の正方形が見つかりました for (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // 行 var y = around[i][1]; // 列 This.tds[x][y].className = cl[This.squares[x][y].value];

                        （This.squares[x][y].value == 0）の場合{
                            // 特定のグリッドを中心としてグリッドがゼロであることがわかった場合は、呼び出しを続行します（再帰）
                            if (!This.tds[x][y].check) {
                                // 対応する td に属性を追加します。見つかった場合、値は true になり、関数呼び出しスタックの問題を防ぐため、次回は再度見つかりません。This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } それ以外 {
                            // あるグリッドを中心にして求めた4辺の値がゼロでない場合は数値を表示する This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } それ以外 {
            // ユーザーが地雷をクリックしました this.gameOver(obj);
        }
    }
    （ev.which == 3）の場合{
        // ユーザーが右ボタンをクリックしました // 右クリックが数字の場合はクリックできません if (obj.className && obj.className != 'flag') {
            戻る;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // スイッチクラス if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            this.allRight を true に設定します。
        } それ以外 {
            this.allRight は false です。
        }

        obj.className == 'フラグ'の場合{
            this.mineNumDom.innerHTML = --this.surplusMine;
        } それ以外 {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }

        if (this.surplusMine == 0) {
            // 残りの地雷の数は 0 で、ユーザーがすべての赤旗をマークしたことを示しています。この時点で、ゲームが成功したか終了したかを判断する必要があります if (this.allRight == true) {
                // この条件は真であり、ユーザーがすべての正しい項目をマークしたことを示します。alert('おめでとうございます。ゲームに合格しました');
                (i = 0; i < this.tr; i++) の場合 {
                    (j = 0; j < this.td; j++) の場合 {
                        this.tds[i][j].onmousedown = null;
                    }
                }

            } それ以外 {
                alert('ゲームに失敗しました');
                ゲームオーバー();
            }
        }
    }
}

ゲームオーバー機能

Mine.prototype.gameOver = 関数(clickTd) {
    /* 
        1. すべての地雷を表示する 2. すべてのグリッドのクリックイベントをキャンセルする 3. クリックしたグリッドを赤くマークする */
    (i = 0; i < this.tr; i++) の場合 {
        (j = 0; j < this.td; j++) の場合 {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = '私のもの';
            }
            this.tds[i][j].onmousedown = null;
        }
    }
    if (クリックTd) {
        clickTd.style.backgroundColor = '#f00';
    }
}

最後に、他の機能をいくつか追加します

他の

// ボタン機能を追加します var btns = document.getElementsByTagName('button');
var mine = null; // 生成されたインスタンスを保存するために使用される var ln = 0; // 現在選択されている状態を処理するために使用される var arr = [
    [9, 9, 10],
    [16、16、40]、
    [28、28、99]
]; // 行、列、地雷の異なるレベル for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = 関数（）{
        btns[ln].className = '';
        this.className = 'アクティブ';
        鉱山 = 新しい鉱山(arr[i][0]、arr[i][1]、arr[i][2]);
        mine.init();
        ln = i;
    }
}
btns[0].onclick(); // 初期化 btns[3].onclick = function () {
    (var i = 0; i < btns.length - 1; i++) {
        if (btns[i].className == 'active') {
            btns[i].onclick();
        }
    }
}

js 統合コード

関数Mine(tr, td, mineNum) {
    this.tr = tr; // tr は行数を示しますthis.td = td; // td は列数を示しますthis.mineNum = mineNum; // mineNum は地雷の数を示しますthis.squares = []; // すべてのマス目の情報を格納します。これは行と列の順序で並べられた 2 次元配列であり、行と列のモードでアクセスしますthis.tds = []; // すべてのセルの DOM を格納します
    this.surplusMine = mineNum; // 残りの地雷の数this.allRight = false; // マークされた赤い旗を右クリックして、それらがすべて地雷であるかどうかを確認し、ユーザーがゲームを正常にプレイしたかどうかを判断しますthis.parent = document.querySelector('.gameBox');
}

// n個の重複しない数字を生成する Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // セルの合計数に等しい長さの空の配列を生成します for (var i = 0; i < square.length; i++) {
        平方[i] = i;
    }
    // 配列シャッフル square.sort(function () {
        0.5 を返す - Math.random()
    });
    square.slice(0, this.mineNum) を返します。
};

// テーブルを作成する Mine.prototype.createDom = function () {
    var これ = これ;
    var テーブル = document.createElement('テーブル');
    for (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        this.tds[i] = [];
        for (var j = 0; j < this.td; j++) { // 列 var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // 作成されたすべてのtdsを配列に追加します。domTd.pos = [i, j]; // グリッドに対応する行と列をグリッドに追加し、この値を通じて配列から対応するデータを取得できるようにします。domTd.onmousedown = function () {
                This.play(event, this); // 大きな This はインスタンス オブジェクトを参照し、小さな this はクリックされた domTd を参照します 
            };

            // if (this.squares[i][j].type == 'mine') {
            // domTd.className = 'mine';
            // }
            // if (this.squares[i][j].type == 'number') {
            // domTd.innerHTML = this.squares[i][j].value;
            // }

            domTr.appendChild(domTd);
        }
        テーブルに子要素を追加します。
    }
    this.parent.innerHTML = ''; // 複数回のクリックを避けて複数のテーブルを作成します this.parent.appendChild(table);
};

Mine.prototype.init = 関数（）{
    // this.randomNum();
    var rn = this.randomNum(); // グリッド内の地雷の位置 var n = -1; // 対応するインデックスグリッドを見つけるために使用 for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        (var j = 0; j < this.td; j++) の場合 {
            // 配列内のブロックのデータを取得するには、行と列の形式を使用してアクセスします。// ブロックの周囲のブロックを見つけるには、座標形式を使用してアクセスします。// 行と列の形式は、座標形式 x と y の逆です。n++;
            (rn.indexOf(n) != -1) の場合 {
                // この条件が満たされた場合、現在ループしているインデックスが地雷配列内に見つかったことを意味し、このインデックスは地雷に対応することを意味します this.squares[i][j] = {
                    タイプ: 'mine'、
                    x: j,
                    y: 私
                };

            } それ以外 {
                this.squares[i][j] = {
                    タイプ: '数値'、
                    x: j,
                    y: 私、
                    値: 0
                };
            }
        }
    }

    this.updateNum();
    このメソッドは、Dom を作成します。

    this.parent.oncontextmenu = 関数（）{
        false を返します。
        // 右クリックメニューイベントを防止する}

    // 残りの地雷の数 this.mineNumDom = document.querySelector('.mineNum');
    this.mineNumDom.innerHTML = this.surplusMine;
};


// 正方形の周りの8つのグリッドを見つける Mine.prototype.getAround = function (square) {
    var x = square.x,
        y = 平方y;
    var result = []; // 見つかったグリッドの座標を返します（2次元配列）
    (var i = x - 1; i <= x + 1; i++) の場合 {
        (var j = y - 1; j <= y + 1; j++) の場合 {
            もし (i < 0 ||
                0 未満
                i > this.td - 1 ||
                j > this.tr - 1 ||
                // 上記の式は境界を示しています (i == x && j == y) ||
                // 自分自身へのループを示します this.squares[j][i].type == 'mine'
                // （周囲のグリッドの）地雷へのループを示します（i と j は座標を表し、四角形は行と列を格納することに注意してください）
            ）{
                続く;
            }
            // 配列内のデータを取得するために必要となるため、行と列の形式で返す必要があります result.push([j, i]);
        }
    }
    結果を返します。
}

// すべての数字を更新 Mine.prototype.updateNum = function () {
    (var i = 0; i < this.tr; i++) の場合 {
        (var j = 0; j < this.td; j++) の場合 {
            // Leiの周りの数字を更新するには if (this.squares[i][j].type == 'number') {
                続く;
            }
            var num = this.getAround(this.squares[i][j]); // 各地雷の周囲の数字を取得します for (var k = 0; k < num.length; k++) {
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
};

Mine.prototype.play = 関数 (ev, obj) {
    var これ = これ;
    if (ev.which == 1 && obj.className != 'flag') { // 次の条件は、ユーザーが右クリックした後にクリックしないことです // 左ボタンがクリックされました var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['0', '1', '2', '3', '4', '5', '6', '7', '8'];
        // cl はクラス名を格納します

        curSquare.type == '数値'の場合{
            // ユーザーが数字をクリックしました obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // 数字のゼロをクリックした場合 if (curSquare.value == 0) {
                /* 
                    再帰的思考: 
                    1. 自分自身を表示する 2. 周囲を検索する 1) 周囲を表示する（周囲の値がゼロでない場合は、ここで表示し、それ以上検索する必要はありません）
                        2) 値がゼロの場合、a. 自身を表示し、b. 周囲を検索します (周囲の値がゼロでない場合は、ここで表示し、それ以上検索する必要はありません)
                                I. 表示自体 II. 周囲を検索（周囲の値がゼロでない場合は、ここに表示し、再度検索する必要はありません）
                                    。 。 。 。 。 。
                 */

                obj.innerHTML = ''; // 空として表示される function getAllZero(square) {
                    var around = This.getAround(square); // N 個の周囲の正方形が見つかりました for (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // 行 var y = around[i][1]; // 列 This.tds[x][y].className = cl[This.squares[x][y].value];

                        (This.squares[x][y].value == 0)の場合{
                            // 特定のグリッドを中心としてグリッドがゼロであることがわかった場合は、呼び出しを続行します（再帰）
                            if (!This.tds[x][y].check) {
                                // 対応する td に属性を追加します。見つかった場合、値は true になり、関数呼び出しスタックの問題を防ぐため、次回は再度見つかりません。This.tds[x][y].check = true;
                                getAllZero(This.squares[x][y]);
                            }

                        } それ以外 {
                            // あるグリッドを中心にして求めた4辺の値がゼロでない場合は数値を表示する This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(curSquare);
            }

        } それ以外 {
            // ユーザーが地雷をクリックしました this.gameOver(obj);
        }
    }
    （ev.which == 3）の場合{
        // ユーザーが右ボタンをクリックしました // 右クリックが数字の場合はクリックできません if (obj.className && obj.className != 'flag') {
            戻る;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // スイッチクラス if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            this.allRight を true に設定します。
        } それ以外 {
            this.allRight は false です。
        }

        obj.className == 'フラグ'の場合{
            this.mineNumDom.innerHTML = --this.surplusMine;
        } それ以外 {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }

        if (this.surplusMine == 0) {
            // 残りの地雷の数は 0 で、ユーザーがすべての赤旗をマークしたことを示しています。この時点で、ゲームが成功したか終了したかを判断する必要があります if (this.allRight == true) {
                // この条件は真であり、ユーザーがすべての正しい項目をマークしたことを示します。alert('おめでとうございます。ゲームに合格しました');
                (i = 0; i < this.tr; i++) の場合 {
                    (j = 0; j < this.td; j++) の場合 {
                        this.tds[i][j].onmousedown = null;
                    }
                }

            } それ以外 {
                alert('ゲームに失敗しました');
                ゲームオーバー();
            }
        }
    }
}

// ゲーム失敗 function Mine.prototype.gameOver = function (clickTd) {
    /* 
        1. すべての地雷を表示する 2. すべてのグリッドのクリックイベントをキャンセルする 3. クリックしたグリッドを赤くマークする */
    (i = 0; i < this.tr; i++) の場合 {
        (j = 0; j < this.td; j++) の場合 {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = '私のもの';
            }
            this.tds[i][j].onmousedown = null;
        }
    }
    if (クリックTd) {
        クリックTd.style.backgroundColor = '#f00';
    }
}

// var mine = new Mine(28, 28, 99);
// mine.init();

// ボタン機能を追加します var btns = document.getElementsByTagName('button');
var mine = null; // 生成されたインスタンスを保存するために使用される var ln = 0; // 現在選択されている状態を処理するために使用される var arr = [
    [9, 9, 10],
    [16、16、40]、
    [28、28、99]
]; // 行、列、地雷の異なるレベル for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = 関数（）{
        btns[ln].className = '';
        this.className = 'アクティブ';
        鉱山 = 新しい鉱山(arr[i][0]、arr[i][1]、arr[i][2]);
        mine.init();
        ln = i;
    }
}
btns[0].onclick(); // 初期化 btns[3].onclick = function () {
    (var i = 0; i < btns.length - 1; i++) {
        if (btns[i].className == 'active') {
            btns[i].onclick();
        }
    }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: