この記事では、jQueryプラグインを使用したマインスイーパゲームの最初の記事の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 マインスイーパを作る パート1 :描画とクリックのアクションを完了する 効果は以下のとおりです コードセクション* { マージン: 0px; パディング: 0px; フォントサイズ: 12px; } #div { 位置: 固定; 上: 10px; 下: 10px; 左: 10px; 右: 10px; 境界線: 1px 実線のライトグレー; 境界線の半径: 5px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 オーバーフロー: 非表示; } #箱 { 境界線: 1px 実線のライトグレー; 境界線の半径: 5px; } 。行 { 空白: ラップなし; 高さ: 30px; } 。アイテム { ディスプレイ: インラインフレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 高さ: 30px; 幅: 30ピクセル; 右境界線: 1px 実線ライトグレー; border-bottom: 1px 実線ライトグレー; カーソル: ポインタ; 位置: 相対的; } .item::before{ 位置: 絶対; コンテンツ: ''; 上: 0.5px; 左:0.5px; 下: 0.5px; 右: 0.5px; 背景色: グレー; } .item.click::before{ 内容: なし; } .item:ホバー{ アウトライン: 1px 実線 #2c3e50; } #メニュー{ border-bottom: 1px 実線ライトグレー; 位置: 絶対; 上: 0; 左: 0; 右: 0; 高さ: 30px; ディスプレイ: フレックス; 背景色: 白; } .mitem{ フレックス: 1; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } .sl{ 境界線: なし; border-bottom: 1px 実線ライトグレー; アウトライン: なし; 幅: 60%; 高さ: 80%; } .btn{ 境界線: なし; 境界線: 1px 実線のライトグレー; アウトライン: なし; 幅: 60%; 高さ: 80%; 背景色: 透明; カーソル: ポインタ; } .mitem *:hover{ 背景色: ライトグレー; } <!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="外部nofollow" 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> <option value="18">18</option> <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> $(ドキュメント).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("クリック"); }) $("#pro").click(function() { コンソールログ(x,y,c) 描く(); }) 描く(); 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'></div>"); $item.appendTo($row); } $行を追加します($ボックス); } } }) アイデアの説明
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6.22 のインストールと設定方法のグラフィックチュートリアル
>>: CentOS7にPostgreSQL11をインストールする方法
最近、docker を学習していたときに、docker コンテナ内のネットワーク状態を照会するために...
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....
目次1. ルートの遅延読み込みとは何ですか? 2. ルートの遅延読み込みの使用1. ルートの遅延読み...
今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...
目次環境説明DockerのインストールゴグのインストールDocker で .NetCore サービス...
一部の MySQL テーブルには重複レコードが含まれている場合があります。重複データが存在することを...
目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...
この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...
目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...
getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...
まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...