【JavaScript】QRコードで百人一首やったらムズすぎわろたwww

この記事を三行にまとめると

QRコードで百人一首
上の句を見て下の句のQRコードを当てる
こいつは難しいぞ……

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

QRCode.jsについて

QRCode.jsは以下のページからダウンロードできます。
QRCode.js

HTML

<div id="text"></div>
<div id="qrcodes">
  <div data-upper="田子の浦にうち出でて見れば白妙の" data-lower="富士の高嶺に雪は降りつつ"></div>
  <div data-upper="花の色は移りにけりないたづらに" data-lower="わが身世にふるながめせしまに"></div>
  <div data-upper="天の原ふりさけ見れば春日なる" data-lower="三笠の山に出でし月かも"></div>
  <div data-upper="春過ぎて夏来にけらし白妙の" data-lower="衣干すてふ天の香具山"></div>
  <div data-upper="ひさかたの光のどけき春の日に" data-lower="しづ心なく花の散るらむ"></div>
  <div data-upper="ちはやぶる神代も聞かず竜田川" data-lower="からくれなゐに水くくるとは"></div>
</div>
<div class="button">
  <button id="shuffle">Shuffle</button>
</div>

CSS

#qrcodes {
  margin-top: 20px;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, 128px);
  column-gap: 10px;
  row-gap: 10px;
}
div[data-lower] {
  cursor: pointer;
  position: relative;
}
div[data-lower]:active {
  top: 2px;
}
strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: crimson;
  background: #fff;
  padding: 0px 5px;
  opacity: 0;
  width: 90%;
}
.hold strong {
  opacity: 1;
}
.hold img {
  opacity: 0.4;
}
#shuffle {
  width: 404px;
  height: 40px;
  margin-top: 20px;
  cursor: pointer;
}
#text {
  font-size: 24px;
  margin-top: 20px;
  height: 40px;
}
#text,
.button {
  text-align: center;
}

JavaScript

const text = document.getElementById('text');
const container = document.getElementById('qrcodes');
const cards = document.querySelectorAll('#qrcodes div');
const shuffle = document.getElementById('shuffle');
let uppers, idx;

// シャッフルボタン
shuffle.onclick = () => {
  uppers = [];

  cards.forEach((card) => {
    // 付与したholdクラスを削除
    card.classList.remove('hold');

    // uppers配列に上の句をセット
    uppers.push(card.dataset.upper);

    // カードをシャッフル
    i = Math.floor(Math.random() * container.children.length);
    container.appendChild(container.children[i]);
  });
  
  setUpperText();
}

// uppers配列からランダムに一つ上の句をセット
setUpperText = () => {
  idx = Math.floor(Math.random() * uppers.length);
  text.innerText = uppers[idx];
}

cards.forEach((card) => {
  // QRコード生成
  new QRCode(card, {
    text: card.dataset.lower,
    width: 128,
    height: 128,
  });
  card.removeAttribute('title');

  // 正解したときに表示する下の句
  div = document.createElement('strong');
  div.append(card.dataset.lower);
  card.append(div);

  // QRコードをクリックしたとき
  card.onclick = () => {
    // holdクラスがついているかuppers配列が空だったら処理終了
    if(card.classList.contains('hold') || uppers.length == 0) {
      return;
    }

　　// 正解したらholdクラスを付与してuppers配列から上の句を削除
    if(text.innerText == card.dataset.upper) {
      card.classList.add('hold');
      uppers.splice(idx, 1);
    }

    // 次の上の句をセット
    if(uppers.length > 0) {
      setUpperText();
    }
  }
})