マインスイーパゲームを実装するための 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 圧縮パッケージのインストールと設定方法

推薦する

MySQLでユーザー認証情報を表示する具体的な方法

具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...

MySQL 5.7.17 winx64 のインストールと設定方法のグラフィックチュートリアル

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

Nginx の一般的な設定とテクニックの概要

序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

CSSスコープ(スタイル分割)の使用の概要

1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...

503 サービス利用不可エラーの解決方法の説明

1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL 5.6 マスタースレーブエラー報告の実践記録

1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...

Linuxのbasenameコマンドの使い方

01. コマンドの概要basename - ファイル名からディレクトリとサフィックスを削除しますba...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...