1人しりとりアプリ

クリックしたボタンの数：0
<!DOCTYPE html>
<html>
  <head>
    <title>1人しりとりアプリ</title>
    <script>
      // ひらがな3文字からなる単語のリスト
      var words = ["あいこ", "うさぎ", "えんぴつ", "おにぎり", "かえる", "きもの", "くつした", "けんか", "こたつ", "さくら", "しりとり", "すいか", "せんたく", "たまご", "ちょうちょ", "つばめ", "てんとうむし", "とけい", "なすび", "にちようび", "ぬいぐるみ", "ねずみ", "のこぎり", "はがき", "ひまわり", "ふとん", "へび", "ほし", "まぐろ", "みかん", "むじゃき", "めがね", "もも", "やかん", "ゆきだるま", "よる"];

      // 現在のしりとりで使用済みの単語のリスト
      var usedWords = [];

      // 押したボタンの数を数える
      var count = 0;

      // しりとりの正解がなかった場合に文字を変える関数
      function changeText() {
        var buttons = document.querySelectorAll("button");

        for (var i = 0; i < buttons.length; i++) {
          buttons[i].textContent = "セイキンTV";
        }
      }

      // ボタンが押された時の操作を行う関数
      function buttonClick(button) {
        var lastChar = button.value.slice(-1); // ボタンの値の末尾の文字を取得する

        // しりとりで使われていないランダムな単語を探す
        var word = "";
        while (true) {
          var index = Math.floor(Math.random() * words.length);
          word = words[index];

          // すでに使用済みの単語でなければループを抜ける
          if (usedWords.indexOf(word) === -1) {
            break;
          }
        }

        // 正解がなければ文字を変える
        if (word[0] !== lastChar) {
          changeText();
        } else {
          // 正解の場合には使用済みの単語に追加してボタンのテキストを変更する
          usedWords.push(word);
          button.textContent = word;
        }

        // クリックされたボタンの数を数える
        count++;
        document.getElementById("count").innerHTML = count;

        // もしボタンを全てクリックした場合には「ゲーム終了」を表示する
        if (usedWords.length === 100) {
          document.getElementById("message").innerHTML = "ゲーム終了";
        }
      }

      // ページロード時にボタンを生成する
      window.onload = function () {
        var container = document.getElementById("container");

        // ボタンを生成する
        for (var i = 0; i < 100; i++) {
          var button = document.createElement("button");
          button.value = words[Math.floor(Math.random() * words.length)]; // ランダムな単語をボタンの値に設定する
          button.textContent = "？"; // ボタンの初期テキスト
          button.onclick = function () {
            buttonClick(this);
          };

          container.appendChild(button);
        }
      };
    </script>
  </head>
  <body>
    <h1>1人しりとりアプリ</h1>
    <div id="container"></div>
    <p>クリックしたボタンの数：<span id="count">0</span></p>
    <p id="message"></p>
  </body>
</html>