この記事では、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をインストールする方法
昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...
1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...
目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...
マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...
まず、yumを使ってCentOSにPHPをインストールする方法を紹介します。 1. PHPのyumソ...
1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...
目次1. プロジェクトの説明: 2. プロジェクト環境: 2. プロジェクトの手順: 3. プロジェ...
この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...
目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...
初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...
1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の...
以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...
この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...
序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...