マインスイーパゲームを実装するための jQuery プラグイン (3)

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事を参考までに共有します。具体的な内容は次のとおりです。

完成、効果はいい感じだが運が悪いと死にやすい

効果は以下のとおりです

コードセクション

* {
 マージン: 0px;
 パディング: 0px;
 フォントサイズ: 12px;
}

#div {
 位置: 固定;
 上: 10px;
 下: 10px;
 左: 10px;
 右: 10px;
 境界線: 1px 実線のライトグレー;
 境界線の半径: 5px;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 オーバーフロー: 非表示;
}

#箱 {
 境界線: 1px 実線のライトグレー;
 境界線の半径: 5px;
}

。行 {
 空白: ラップなし;
 高さ: 30px;
}

。アイテム {
 ディスプレイ: インラインフレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 高さ: 30px;
 幅: 30ピクセル;
 右境界線: 1px 実線ライトグレー;
 border-bottom: 1px 実線ライトグレー;
 カーソル: ポインタ;
 位置: 相対的;
}
.item.num1::after{
 内容: '1';
 色: #1abc9c;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num2::after{
 内容: '2';
 色: #2ecc71;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num3::after{
 内容: '3';
 色: #3498db;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num4::after{
 内容: '4';
 色: #9b59b6;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num5::after{
 内容: '5';
 色: #f1c40f;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num6::after{
 内容: '6';
 色: #e67e22;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num7::after{
 内容: '7';
 色: #e74c3c;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.num8::after{
 内容: '8';
 色: #34495e;
 位置: 絶対;
 上: 0;
 下部: 0;
 左: 0;
 右:0;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
 zインデックス: 2;
}
.item.boom{
 背景画像: url(../img/boom.png);
 背景サイズ: 60% 60%;
 背景繰り返し: 繰り返しなし;
 背景の位置: 中央 中央;
}
.item::before{
 位置: 絶対;
 コンテンツ: '';
 上: 0.5px;
 左:0.5px;
 下: 0.5px;
 右: 0.5px;
 背景色: グレー;
 zインデックス: 3;
}
.item.click::before{
 内容: なし;
}
.item:ホバー{
 アウトライン: 1px 実線 #2c3e50;
}

#メニュー{
 border-bottom: 1px 実線ライトグレー;
 位置: 絶対;
 上: 0;
 左: 0;
 右: 0;
 高さ: 30px;
 ディスプレイ: フレックス;
 背景色: 白;
 zインデックス: 10;
}
.mitem{
 フレックス: 1;
 ディスプレイ: フレックス;
 コンテンツの中央揃え: 中央;
 アイテムの位置を中央揃えにします。
}
.sl{
 境界線: なし;
 border-bottom: 1px 実線ライトグレー;
 アウトライン: なし;
 幅: 60%;
 高さ: 80%;
}
.item.警告{
 境界線: 1px 実線の赤;
}
.btn{
 境界線: なし;
 境界線: 1px 実線のライトグレー;
 アウトライン: なし;
 幅: 60%;
 高さ: 80%;
 背景色: 透明;
 カーソル: ポインタ;
}
.mitem *:hover{
 背景色: ライトグレー;
}

html:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>マインスイーパを作る</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/yqlsl.js"></script>
  <link href="css/yqlsl.css" rel="スタイルシート" type="text/css" />
 </head>
 <本文>
  <div id="div">
   <div id="ボックス">
    
   </div>
   <div id="メニュー">
    <div class="mitem">
     <クラスを選択="sl" id="x">
      <オプション値="10">10</オプション>
      <オプション値="11">11</オプション>
      <オプション値="12">12</オプション>
      <オプション値="13">13</オプション>
      <オプション値="14">14</オプション>
      <オプション値="15">15</オプション>
      <オプション値="16">16</オプション>
      <option value="17">17</option>
      <オプション値="18">18</オプション>
      <option value="19">19</option>
      <オプション値="20">20</オプション>
     </選択>
    </div>
    <div class="mitem">
     <クラスを選択="sl" id="y">
      <オプション値="10">10</オプション>
      <オプション値="11">11</オプション>
      <オプション値="12">12</オプション>
      <オプション値="13">13</オプション>
      <オプション値="14">14</オプション>
      <オプション値="15">15</オプション>
      <オプション値="16">16</オプション>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <オプション値="20">20</オプション>
     </選択>
    </div>
    <div class="mitem">
     <クラスを選択="sl" id="c">
      <オプション値="10">10</オプション>
      <オプション値="20">20</オプション>
      <オプション値="30">30</オプション>
      <オプション値="40">40</オプション>
      <オプション値="50">50</オプション>
      <オプション値="60">60</オプション>
      <オプション値="70">70</オプション>
      <オプション値="80">80</オプション>
      <オプション値="90">90</オプション>
      <オプション値="99">99</オプション>
     </選択>
    </div>
    <div class="mitem">
     <button type="button" class="btn" id="pro">生成</button>
    </div>
   </div>
  </div>
 </本文>
</html>

js:

$(ドキュメント).ready(関数() {
 var x = 10; //x軸var y = 10; //y軸var c = 10; //爆弾の数var boom = []; //爆弾を生成する座標var $menu = $("#menu");
 var $box = $("#box");




 //同期パラメータ $("#x").change(function() {
  x = parseInt($(this).val());
  コンソールログ(x);
 })
 $("#y").change(関数() {
  y = parseInt($(this).val());
 })
 $("#c").change(関数() {
  c = parseInt($(this).val());
 })
 $(document).on('click', '#box .item', function() {
  $(this).addClass("クリック");
  var 位置 = {
   x:parseInt($(this).attr("data-x")),
   y:parseInt($(this).attr("データ-y"))
  }
  if($(this).hasClass('boom')){
   $(".item").addClass('クリック')
   $(this).addClass('警告');
  }
  afterclick(位置);
 })
 $("#pro").click(function() {
  描く();
  draw(); // booms(); // 爆弾パラメータを生成する drawbooms(); // 爆弾を描画する drewum(); // すべてのブロックを走査し、プロンプトを生成する })
 draw();// booms();//爆弾のパラメータを生成 drawbooms();//爆弾を描画 drewum();//すべてのブロックを走査し、プロンプトを生成 function draw() { //画像を描画 $box.html('');
  (var a = 0; a < x; a++) の場合 {
   var $row = $("<div class='row'></div>");
   (var b = 0; b < y; b++) の場合 {
    var $item = $("<div class='item' data-x='"+a+"' data-y='"+b+"'></div>");
    $item.appendTo($row);
   }
   $行を追加します($ボックス);
  }
 }
 function afterclick(p){//すべての空白ブロックを解放し、隣接するすべての空白プロンプトを最初のレイヤーに表示します。var arr = [
   {x:(px-1),y:(py-1)},
   {x:(px-1),y:(py)} 、
   {x:(px-1),y:(p.y+1)},
   {x:(p.x+1),y:(py-1)},
   {x:(p.x+1),y:(py)} 、
   {x:(p.x+1),y:(p.y+1)},
   {x:(px),y:(p.y+1)} 、
   {x:(px),y:(py-1)}  
  ]
  arr.forEach(item=>{
   if($dom(item).hasClass('nonum')&&!$dom(item).hasClass('click')&&!$dom(item).hasClass('boom')){
    $dom(item).click();
   }
  })
 }
 関数drawnum(){
  (var a = 0;a<x;a++){
   (var b = 0;b<y;b++){
    var pos = {x:a,y:b};
    // この座標の周りの状況を走査して爆弾がいくつあるかを確認します var s = getscore(pos);
    if(s!=0&&!$dom(pos).hasClass('boom')){
     $dom(pos).addClass('num'+s);
     $dom(pos).addClass('num');
    }それ以外{
     $dom(pos).addClass('nonum');
    }
   }
  }
 }
 関数 getscore(p){
  var インデックス = 0;
  var s1 = boom.find(n=>nx==(px-1)&&n.y==(py-1))
  var s2 = boom.find(n=>nx==(px)&&n.y==(py-1))
  var s3 = boom.find(n=>nx==(p.x+1)&&n.y==(py-1))
  var s4 = boom.find(n=>nx==(px-1)&&n.y==(p.y+1))
  var s5 = boom.find(n=>nx==(px)&&n.y==(p.y+1))
  var s6 = boom.find(n=>nx==(p.x+1)&&n.y==(p.y+1))
  var s7 = boom.find(n=>nx==(px-1)&&n.y==(py))
  var s8 = boom.find(n=>nx==(p.x+1)&&n.y==(py))
  if(s1){インデックス++;}
  if(s2){インデックス++;}
  if(s3){インデックス++;}
  if(s4){インデックス++;}
  if(s5){インデックス++;}
  if(s6){インデックス++;}
  if(s7){インデックス++;}
  if(s8){インデックス++;}
  インデックスを返します。
 }
 関数drawbooms(){
  boom.forEach(item=>{
   $dom(item).addClass('boom');
  })
 }
 function booms(){//爆弾パラメータをランダムに生成 var arr = [];
  (arr.length<c){
   var pos = {x:Math.floor(Math.random()*x),y:Math.floor(Math.random()*y)};
   var temp = arr.find(n=>nx==pos.x&&n.y==pos.y);
   if(!temp){
    arr.push(位置);
   }
  }
  ブーム = arr;
 }
 関数 $dom(pos){
  var dom = $("[data-x='"+pos.x+"'][data-y='"+pos.y+"']");
  if(dom.length!=0){
   DOMを返す
  }それ以外{
   $("<div></div>") を返します。
  }
 }
})

アイデアの説明

  • とにかく、難しいことではありません。重要なのは、自分がやりたいことのロジックを大まかに理解することです。
  • マインスイーパーは、x*y座標系に地雷をランダムに配置し、各座標点をトラバースしてその周囲の爆弾の総数を決定します。その数が0〜8の範囲内であることがわかります。このようにして、
  • ゲームプレイはクリックと追加アクションだけです。空白部分をクリックすると、その周りの空白部分が自動的に点灯します。このエフェクトも作りました。最初はただの面倒な判断です。
  • 特に js コードを見てください。いずれにしてもすべてアップロードされています。

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

以下もご興味があるかもしれません:
  • マインスイーパゲームを実装するための jQuery プラグイン (2)
  • マインスイーパゲームを実装するための jQuery プラグイン (1)
  • jQueryはマインスイーパゲームを実装します

<<:  Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)

>>:  MySQL Community Server 圧縮パッケージのインストールと設定方法

推薦する

mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...

Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題

目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...

MySQL 変数宣言とストアド プロシージャの分析

変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...

MySQL無料インストール版のパスワードの設定と変更に関するチュートリアル

ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...

CentOS7 で MySQL データベースにリモート接続できない理由と解決策

序文最近、仕事で問題が発生しました。 Centos7 システムでは MySQL にリモート接続できな...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

Docker は Python Flask+ nginx+uwsgi コンテナを構築します

Nginxをインストールするまずcentosイメージをプルしますdocker pull centos...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

Vueはルールを使用してフォームフィールドの検証を実装します

Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法

1. 目標: mysql の character_set_server の値を latin1 から ...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...