【初心者向け】javascript/jQuery練習問題（トランプの神経衰弱を作る）

※本サイトはアフィリエイトリンクを掲載しています。
javascript
2023.07.30

問題1 : トランプの神経衰弱を作成してください

仕様① : 数字は1～8で作成してください。(トランプのマークは不要です)
仕様② : プレイヤーは複数ではなく1人の想定で良いです。
仕様③ : トランプの枚数は可変で変えられるように設定してください。

動作イメージ（実際に操作できます）

 

ソースコード例（参考程度に。もっと良い書き方もあると思います。）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>神経衰弱</title>
  </head>
  <body>
    <table id="table" border="1">
    </table>
    <br/>
    <button id="reset">リセット</button>
  </body>
</html>
<style>
  td .cardButton {
    width : 100px;
    height : 100px;
  }
  .cardButton {
    background-color: #FFFFCC;
    font-size: 60px;
  }
  .cardButton:disabled {
    color: black;
  }
</style>
<script>
  $(function(){
    let rowLength = 4; //行
    let columnLength = 4 //列
    let duplicate = 2; //同じカードを何枚セットするか
    let cardIds = []; //カードのID配列
    let cards = []; //カードの配列
    // カードをtable表示で並べる(カードの枚数は可変で設定する)
    for (i=0; i<rowLength; i++) {
      let tr = $("#table").append("<tr id=tr_"+i+"></tr>");
      for (h=1; h<=columnLength; h++) {
        let id = (i*columnLength)+h
        $(tr).append("<td><input type='button' value='X' class='cardButton' id=card_"+id+" /></td>");
        cardIds.push("#card_"+id);
      }
    }
    //カードの配列に要素を追加
    for (i=1; i<=duplicate; i++) {
      for (h=1; h<=rowLength*columnLength/2; h++) {
        cards.push(h);
      }
    }
    //カードの配列をシャッフル
    cards.sort(() => Math.random() - 0.5);
    //カードをクリックしたとき、カードの数字の表示をする。
    let count = 0;
    let selectOne = "";
    let selectTwo = "";
    let matchSelectIds = [];
    for (i=0; i<cardIds.length; i++) {
      $(cardIds[i]).click(function() {
        count++;
        let index = Number($(this).attr("id").replace("card_",""))-1;
        $(this).val(cards[index]);
        if (count === 1) {
          selectOne = $(this);
          $(this).prop("disabled", true);
        }
        if (count === 2) {
          selectTwo = $(this);
          if (selectOne.val() !== selectTwo.val()) {
            $(".cardButton").prop("disabled", true);
            setTimeout(function(){
              selectOne.val("X");
              selectTwo.val("X");
              $(".cardButton").prop("disabled", false);
              matchSelect();
            },1000);
          } else {
            matchSelectIds.push(selectOne.attr("id"));
            matchSelectIds.push(selectTwo.attr("id"));
            matchSelect();
          }
          count = 0;
        }
      });
    }
    function matchSelect () {
      for (i=0; i<matchSelectIds.length; i++) {
        $("#"+matchSelectIds[i]).prop("disabled", true).css("color", "red");
      }
      if (matchSelectIds.length === rowLength*columnLength) {
        alert("クリアです。");
      }
    }
    $("#reset").click(function(){
      location.reload(true);
    });
  });
</script>

 

使われているメソッド解説

テーブルに<tr>タグ,<td>タグ,<input>タグを追加

$(‘対象の要素’).append(‘コンテンツ’)

今回はtableにtrとtdとinputの要素を追加しています。

tableに固定で行数と列を記載するのを避けるためです。

変数の$rowLengthと$columnLengthの値を変更すれば行数と列数が変更できます。

 

配列に要素を追加

配列.push('要素');

配列に要素を追加できます。今回は1～8の数値をcards配列に追加しています。

 

配列を並び替え

cards.sort(() => Math.random() - 0.5);

配列cardsをランダムにシャッフルしています。

 

ボタンの活性・非活性を変更

$(対象要素).prop("disabled", false); //ボタンを活性(押せる)に変更
$(対象要素).prop("disabled", true); //ボタンを非活性(押せない)に変更

1回目にクリックした数値と2回目にクリックした数値を比較しますが、

1回目にクリックした数値を、もう一度押せてしまうと動作がおかしくなります。

そのため1回目にクリックした数値は2回目の数値が押されない限り活性になりません。

1回目と2回目の数値が等しい場合は、ペア完成のため数値を表示したまま非活性にします。

1回目と2回目の数値が異なる場合は、ペア不成立のためカードを「X」に戻し活性状態にします。

 

画面を更新して初期化。リロード

location.reload(true);

 

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント