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 ホワイトリストを設定する方法

推薦する

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

SQLのさまざまな結合サマリーの詳細な説明

SQL 左結合、右結合、内部結合、自然結合 さまざまな結合の概要SQL には、左結合、右結合、内部結...

MySQLデータベースについて学びましょう

目次1. データベースとは何ですか? 2. データベースの分類は? 3. データベースとデータ構造の...

HTML フォーム タグの使用方法を学ぶチュートリアル

HTML のフォームを使用して、ユーザーからさまざまな種類の入力情報を収集できます。フォームは、実際...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

ウェブデザイン:大量の素材の正確な配置と使用

3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...

HTML webpackプラグインの使用に関する簡単な分析

html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

Dockerでnginxをデプロイし、設定ファイルを変更する方法

Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...

DockerコンテナでLNMPをコンパイルする例

目次1. プロジェクトの説明2. Nginxイメージの作成3. MySQLイメージの作成4. PHP...

nginxでgzip圧縮を有効にする手順を完了する

目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...