jsは古典的なマインスイーパゲームを実装します

この記事の例では、古典的なマインスイーパゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

プロジェクト構造

成果を達成する

思考プロセス

1. 基本的なレイアウトを書き出す
2. jsを使用して掃海用のテーブルを生成する
3. 乱数を使用してテーブル内の地雷をインデックスする
4. テーブルを初期化する
5. 地雷の座標に基づいて地雷の周囲に数字を生成する
6. クリックイベントは、マウスの左ボタンクリックとマウスの右ボタンクリックに分かれています。
7. 左クリックは、地雷をクリックする場合と、地雷をクリックしない場合の 2 つの状況に分けられます。
8. 地雷をクリックすると、すべての地雷が表示され、他のスタイルは変更されず、どのテーブルでもクリックイベントを実行できなくなります（左クリックも右クリックも機能しません）。
9. クリックした数字が地雷でない場合は、クリックした数字が 0 の場合と、クリックした数字が 0 でない場合の 2 つのケースに分けられます。
10. ゼロでない場合は、数字のみを表示する必要があります
11. 0 の場合は、再帰を使用して周囲のテーブルを走査します。0 の場合は、非ゼロ値が検出されるまで 0 を再帰的に表示し続けます。
12. 上記の手順 6 に引き続き、右クリックすると、小さな赤い旗が表示され、残りの地雷の数が -1 になります。
13. 残りの機雷の数が 0 になったとき、小さな赤い旗の下にあるすべての機雷があるかどうかを判断します。すべての機雷がある場合は掃海艇は成功し、ない場合は掃海艇は失敗します。
14. ボタンに機能を追加します。9 回 9->10 個の地雷、16 回 16->40 個の地雷、28 回 28、99 個の地雷、および再起動ボタン

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link rel="スタイルシート" href="./css/style.css" rel="外部nofollow" >
</head>

<本文>
    <div class="footer">残りの地雷の数: <span class="mineNum"></span></div>
    <div class="gameBox">

    </div>
    <div class="header">
        <button class="active">プライマリ</button>
        <button>中級</button>
        <button>詳細設定</button>
        <button>再起動</button>
    </div>
    <script src="./js/main.js"></script>
</本文>
</html>

CSS スタイルシート

* {
    パディング: 0;
    マージン: 0;
}

.ヘッダー{
    マージン: 10px 自動 自動 自動;
    テキスト配置: 中央;
}

.ヘッダーボタン{
    パディング: 5px 15px;
    背景色: #02a4ad;
    色: #fff;
    テキスト配置: 中央;
    境界線: なし;
    境界線の半径: 8px;
    アウトライン: なし;
    カーソル: ポインタ;
}

.headerボタン.active{
    背景色: #00abff;
}

.フッター{
    マージン: 100px 自動 自動 自動;
    テキスト配置: 中央;
}



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

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

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

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

.redMine {
    背景: #fff url(../images/mine02.jpg) 繰り返しなし 中央;
    背景サイズ: カバー;
}

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.seven{
 境界線の色: #d9d9d9;
 背景: #d9d9d9;
 色: #3fffbf;
}
td.8{
 境界線の色: #d9d9d9;
 背景: #d9d9d9;
 色: #22ee0f;
}

js ソースコード

関数Mine(tr, td, mineNum) {
    this.tr = tr; // 行 this.td = td; // 列 this.mineNum = mineNum; // 地雷の数 this.squares = []; // 正方形のオブジェクト配列 this.tds = []; // 正方形の DOM
    this.surplusMine = mineNum; // 残りの地雷の数 this.mainBox = document.querySelector('.gameBox'); // ゲーム ボックス要素を取得します //this.createDom();
}

/*乱数を生成する*/
Mine.prototype.randomNum = 関数（）{
    var positionArray = 新しい配列(this.tr * this.td);
    for (var i = 0; i < positionArray.length; i++) { // インデックスを使用して地雷の位置を決定します positionArray[i] = i
    }
    // 配列シャッフル positionArray.sort(function () {
        0.5 を返す - Math.random()
    });
    return positionArray.splice(0, this.mineNum); // ランダムな mineNum 番号を地雷の位置として取得します}

// 初期化 Mine.prototype.init = function () {
    var positionMine = this.randomNum(); // 地雷の位置を取得します。var n = 0;
    (var i = 0; i < this.tr; i++) の場合 {
        this.squares[i] = [];
        (var j = 0; j < this.td; j++) の場合 {
            if (positionMine.indexOf(n++) != -1) { // indexOf を使用して地雷を正方形の配列に配置します this.squares[i][j] = { type: 'mine', x: j, y: i };
            } それ以外 {
                this.squares[i][j] = { 型: 'number'、x: j、y: i、値: 0 };
            }
        }
    }

    this.mainBox.oncontextmenu = 関数 () {
        false を返します。
    }

    this.updateNum();
    このメソッドは、Dom を作成します。
    //コンソールログ(this.squares);

    // 残りの鉱山番号を処理します this.mineNumDom = document.querySelector('.mineNum');
    this.surplusMine = this.mineNum;
    this.mineNumDom.innerHTML = this.surplusMine;

    // ゲームプロンプトを処理する //document.querySelector('');

};

/*大きなテーブルを生成する*/
Mine.prototype.createDom = 関数（）{
    var This = this; // この関数はインスタンスオブジェクトを指します var table = document.createElement('table'); // テーブルを作成します
    (var i = 0; i < this.tr; i++) の場合 {
        var domTr = document.createElement('tr'); // 行 tr を作成
        this.tds[i] = []; // [[],[],[]...[]] 行を格納 for (var j = 0; j < this.td; j++) {
            var domTd = document.createElement('td'); // 列 td を作成
            domTd.pos = [i, j];
            domTd.onmousedown = 関数（）{
                this.play(イベント、this);
            };
            this.tds[i][j] = domTd; // ストレージ列 [ [,],[,], [,] .....]
            domTr.appendChild(domTd); // 行に列を追加します}
        table.appendChild(domTr) // テーブルにグリッドを追加します}

    // 以前の状態をクリアします this.mainBox.innerHTML = '';
    this.mainBox.appendChild(table); // 大きな正方形を形成する tr*td
}

// グリッドを見つける Mine.prototype.getAround = function (positionArray) {
    var x = positionArray.x;
    var y = positionArray.y;
    var result = []; // 2D、見つかった各子が返されます/* ここでの座標情報は次のとおりです x-1,y-1 x,y-1 x+1,y-1
        x-1,yx,y x+1,y
        x-1、y+1 x、y+1 x+1、y+1
    */
    (var i = x - 1; i <= x + 1; i++) の場合 {
        (var j = y - 1; j <= y + 1; j++) の場合 {
            もし （
                i < 0 || // テーブルの左側を超える j < 0 || // 上部を超える i > this.td - 1 || // テーブルの右側を超える j > this.tr - 1 || // テーブルの下部を超える (i == x && j == y || // ポイント自体をクリック this.squares[j][i].type == 'mine') // 地雷の場合は値を変更する必要はありません) {
                続く;
            }
            result.push([j, i]); // 結果配列に周囲のグリッド情報を追加します（j行目とi列目に数字があるなど）}
    }

    return result; // グリッド情報配列を返す}


// 更新番号 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]);
            (var k = 0; k < num.length; k++) の場合 {
                // 数字の周りに地雷がある場合は1を加算する
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
        }
    }
}


Mine.prototype.play = 関数 (ev, obj) {
    var This = this; // インスタンス オブジェクトを取得します // 左ボタンがクリックされます which=1 は左ボタン、2 は中央のスクロール ホイール、3 は右ボタンです if (ev.which == 1 && obj.className != 'flag') {

        var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        // 各数字のスタイル var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];

        // クリックされた数字 if (curSquare.type == 'number') {
            obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];

            // クリックした数字は0と非0の2種類に分けられます
            // 1. 数字0をクリックする
            (curSquare.value == 0)の場合{
                obj.innerHTML = ''; // 0のデジタルスタイルを表示しない

                関数 getAllZero(positionArray) {
                    // 周囲のグリッド情報を取得します。var around = This.getAround(positionArray);

                    // 再帰的な考え方を使って、周囲のグリッド 0 を表示しないようにし、0 でなくなったら停止します for (var i = 0; i < around.length; i++) {
                        // [i]=[0,0]付近
                        var x = around[i][0];
                        var y = around[i][1];

                        This.tds[x][y].className = cl[This.squares[x][y].value];

                        // まだ0の場合
                        (This.squares[x][y].value == 0)の場合{
                            // 再帰 if (!This.tds[x][y].check) {
                                this.tds[x][y].check = true;

                                getAllZero(This.squares[x][y]);
                            }
                        } それ以外 {
                            // 0でない場合は数値を表示し続けます。This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }
                }

                getAllZero(curSquare);

            }
        } それ以外 {
            // 地雷をクリックすると、ゲームオーバーであると直接判断されます this.gameOver(obj);
        }
    }
    // which=3、マウスが右ボタンをクリックした if (ev.which == 3) {
        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) {
            (var i = 0; i < this.tr; i++) の場合 {
                (var j = 0; j < this.td; j++) の場合 {
                    if (this.tds[i][j].className == 'フラグ') {
                        if (this.squares[i][j].type != 'mine') {
                            ゲームオーバー();
                            戻る;
                        }
                    }
                }
            }
            alert("機雷掃海成功おめでとうございます！");
            これを初期化します。
        }
    }

};

// ゲームオーバーメソッド gameover
Mine.prototype.gameOver = 関数(clickTd) {
    // 1. すべての地雷を表示する // 2. すべてのグリッドのクリックイベントをキャンセルする // 3. クリックされた地雷を赤でマークする for (var i = 0; i < this.tr; i++) {
        (var 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.className = 'redMine';
    }
};

//ボタンの機能 var btns = document.querySelectorAll('.header button');
var 鉱山 = null;

var btnKey = 0; // レベルインデックス // 初級、中級、上級の難易度設定 var headerArr = [
    [9、9、10]、[16、16、40]、[28、28、99]
];

(i = 0 とします; i < btns.length - 1; i++) {
    btns[i].onclick = 関数（）{

        // 以前クリックしたスタイルをクリアします btns[btnKey].className = '';
        this.className = 'アクティブ';

        mine = 新しい Mine(...headerArr[i]);
        mine.init();

        // ステータスを更新 btnKey = i;
    }
}

// ページはプライマリマインスイーパから始まります btns[0].onclick();
btns[3].onclick = 関数（）{
    mine.init();
}

ソースコード

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

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