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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS で作成したマインスイーパ ゲームを共有します
  • 純粋なJavaScriptを使用して古典的なマインスイーパゲームを実装する
  • マインスイーパーゲームを実装するためのHTML+JavaScript
  • JavaScript マインスイーパ ゲーム
  • 古典的なゲーム「マインスイーパ」の JavaScript 版の完全な例 [デモ ソース コードのダウンロード付き]
  • JavaScript で Windows の定番マインスイーパ ゲームを実現
  • js+ca​​nvas はシンプルなマインスイーパゲームを実装します
  • JavaScript を使用したマインスイーパ ゲームのコード例の実装
  • JavaScript を使用してマインスイーパー ゲームを作成する方法を段階的に説明します

<<:  MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

>>:  nginx でディレクトリ ホワイトリストと IP ホワイトリストを設定する方法

推薦する

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

Zabbix はどのようにして ssh 経由でネットワーク デバイス データを監視および取得するのでしょうか?

シナリオシミュレーション:ある会社の運用保守担当者は、以前購入した一連のネットワーク機器の光ポートの...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

springcloud alibaba nacos linux 設定の詳細なチュートリアル

まず、github から nacos の圧縮パッケージをダウンロードします: https://git...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

CentOS で yum を使用して rabbitmq-server をインストールする方法

RabbitMQをインストールする前にSocatをインストールする必要があります。そうしないと、Ra...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...