ESPカードの作成 #JavaScript

ESPカードの作成

今回はESPカードを作成します。STARTボタンをクリックするとカードの絵柄がシャッフルされるので、それぞれの絵柄が何か当ててください。カードをクリックすると表面にひっくり返ります。

button要素にonclick属性を付与して、ボタンをクリックしたときに「clicked」関数が発火します。

<body>
  <table id="table"></table>
  <p>※ ☆、○、×、△、□を当ててください
  </p>
  <button onclick="clicked()">START</button>
</body>

script要素内はclicked関数とflip関数に分かれます。
clicked関数内はカードをシャッフルする箇所とカードを並べる箇所に別れます。
flip関数はカードをクリックしたときに裏面から表面にひっくり返す機能があります。

  <script>
    let cards = ["☆", "○", "×", "△", "□"];
    function clicked() {
      for(let i = cards.length - 1; i >= 0; i--) {
        let j = Math.floor(Math.random()*i+1)
        let k = cards[i];
        cards[i] = cards[j];
        cards[j] = k;
      }

      let table = document.getElementById("table");
      table.innerHTML = "";

      for(let l = 0; l < cards.length; l++) {
        let td = document.createElement("td");
        td.className = "back";
        td.value = cards[l];
        td.onclick = flip;
        table.appendChild(td);
      }
    }

    function flip(e) {
      let td = e.srcElement;
      td.className = "";
      td.textContent = td.value;
    }
  </script>

まず、配列cardsを作成して星や丸などの図形を要素に指定します。

for(let i = cards.length-1; i >= 0; i--) {
  ・
  ・
}

の箇所でカードをシャッフルします。
イメージとしては配列の一番最後の要素にランダムに別の配列の値を代入して、ランダムに選ばれた要素には最後の要素の値を代入することを繰り返します。最後の要素はfor文で繰り返すごとに一つずつ減っていきます。最終的にcards内の値だけシャッフルされます。

次にシャッフルされたカードを並べていきます。
「let table = document.getElementById("table");」でbody内のtable要素を取得します。「table.innerHTML = "";」はボタンを2回目以降クリックした際にそれまでのtable内の要素が残ったままになっているので、tableを空にしています。つまり、これをしないと画面に古いカードが残ったままになってしまいます。

      let table = document.getElementById("table");
      table.innerHTML = "";

for(let l = 0; l < cards.length; l++) {
  ・
  ・
}

の箇所でカード並べていきます。table要素に新たに作成したtd要素を追加していきます。td要素にはvalueプロバティにcards内の値を代入し、onclickプロパティに関数flipを代入します。

flip関数内は引数にeを指定することでカードをクリックした際にそのカードのデータを取得できるようにします。「let td = e.srcElement」で取得したデータを変数tdに代入します。「td.className = "";」でカードに付与されているclass属性を空にすることでカードを表面にします。「td.textContent = td.value;」で表面のカードに図形を表示します。

以下のコードをコピーしてファイルに貼り付ければ試せます。style要素内の.backセレクタに指定しているbackground-imageのurlの画像だけ自分で設定してください。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>ESPcard</title>

  <style>
    button {
      width: 100px;
      height: 30px;
    }
    td {
      width: 60px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      font-size: 50px;
      text-align: center;
      vertical-align: middle;
    }
    .back {
      background-image: url(card.png);
      background-size: 60px 100px;
    }
  </style>

  <script>
    let cards = ["☆", "○", "×", "△", "□"];
    function clicked() {
      for(let i = cards.length - 1; i >= 0; i--) {
        let j = Math.floor(Math.random()*i+1)
        let k = cards[i];
        cards[i] = cards[j];
        cards[j] = k;
      }

      let table = document.getElementById("table");
      table.innerHTML = "";

      for(let l = 0; l < cards.length; l++) {
        let td = document.createElement("td");
        td.className = "back";
        td.value = cards[l];
        td.onclick = flip;
        table.appendChild(td);
      }
    }

    function flip(e) {
      let td = e.srcElement;
      td.className = "";
      td.textContent = td.value;
    }
  </script>
</head>

<body>
  <table id="table"></table>
  <p>※ ☆、○、×、△、□を当ててください
  </p>
  <button onclick="clicked()">START</button>
</body>
</html>