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

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

この記事では、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);
   }
   $行を追加します($ボックス);
  }
 }
})

アイデアの説明

  • 1 つ目は、パラメータの生成とコンテンツの描画ですが、これは簡単に実行できます。
  • 次に、後続の計算と直接操作を容易にするために、各ブロックの座標をマークする準備をする必要があります。
  • 次に、疑似クラスを通じてクリック効果が実現されます。クリックがない場合、疑似クラスはオーバーレイ マスクを生成し、クリック後に削除できます。

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

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

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

>>:  CentOS7にPostgreSQL11をインストールする方法

推薦する

CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...

HTML ページに画像を挿入し、マップ インデックスを追加する方法の例

1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する

マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...

yum 経由で CentOS に PHP をインストールするチュートリアル

まず、yumを使ってCentOSにPHPをインストールする方法を紹介します。 1. PHPのyumソ...

Dockerコンテナの紹介

1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...

デュアル VIP を使用した高可用性 MySQL クラスタの構築

目次1. プロジェクトの説明: 2. プロジェクト環境: 2. プロジェクトの手順: 3. プロジェ...

JS はシンプルなブロック崩しピンボールゲームを実装します

この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

MySQL 5.7.18 無料インストール版ウィンドウ設定方法

初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...

CSS 要素の非表示の原則と display:none および visibility:hidden

1. CSS 要素の非表示<br />CSS では、要素を非表示にする (つまり、画面の...

CSSに基づいてマウス入力の方向を決定する

以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っ...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...