この記事では、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>") を返します。 } } }) アイデアの説明
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)
>>: MySQL Community Server 圧縮パッケージのインストールと設定方法
具体的な方法: 1. コマンドプロンプトを開く2. mysql -u root -pコマンドを入力し...
Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...
序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...
別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...
1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...
1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...
スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...
この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...
簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...
1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...
HTML5の<input="text" placeholder="...
SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...
01. コマンドの概要basename - ファイル名からディレクトリとサフィックスを削除しますba...
1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...