見出し画像

四字熟語ゲーム

hedycube

なんとなく思いついて作ってみました。

楽しいのでやってみてね♪

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四字熟語ゲーム</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .question {
      margin-bottom: 20px;
    }
    .options {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <h1>四字熟語ゲーム</h1>
  <div class="question"></div>
  <div class="options"></div>
  <button onclick="nextQuestion()">次の問題</button>
  <p class="result"></p>

  <script>
    // 四字熟語のリスト
    const yojiJukugo = [
      '一石二鳥', '四面楚歌', '起死回生', '一期一会', '温故知新',
      '異口同音', '七転八起', '以心伝心', '自業自得', '大器晩成',
      '因果応報', '五里霧中', '一念発起', '電光石火', '一心不乱',
      '絶体絶命', '意気投合', '百発百中', '空前絶後', '我田引水',
      '針小棒大', '青天白日', '十人十色', '無我夢中', '終始一貫',
      '千載一遇', '本末転倒', '紆余曲折', '小心翼翼', '完全無欠',
      '異体同心', '天変地異', '十死一生', '初志貫徹', '臥薪嘗胆',
      '一日千秋', '一長一短', '千客万来', '単刀直入', '一目瞭然',
      '喜怒哀楽', '一騎当千', '半信半疑', '東奔西走', '日進月歩',
      '千変万化', '融通無碍', '八方美人', '自暴自棄', '明鏡止水'
    ];

    let currentQuestion = null;
    
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    function nextQuestion() {
      // ランダムに四字熟語を選択
      const selectedJukugo = yojiJukugo[Math.floor(Math.random() * yojiJukugo.length)];
      
      // 四字熟語を分解
      const firstTwo = selectedJukugo.slice(0, 2);
      const lastTwo = selectedJukugo.slice(2, 4);

      // ランダムに他の熟語から最後の2文字を作る
      const wrongAnswers = yojiJukugo.map(jukugo => jukugo.slice(2, 4));
      shuffle(wrongAnswers);

      // 正解と不正解を混ぜて選択肢を作成
      const options = shuffle([lastTwo, wrongAnswers[0], wrongAnswers[1], wrongAnswers[2]]);

      // 問題を表示
      currentQuestion = { firstTwo, lastTwo };
      document.querySelector('.question').textContent = `最初の2文字: ${firstTwo}____`;
      document.querySelector('.options').innerHTML = options.map((opt, index) =>
        `<button onclick="checkAnswer('${opt}')">${opt}</button>`
      ).join(' ');
      document.querySelector('.result').textContent = '';
    }

    function checkAnswer(selected) {
      if (selected === currentQuestion.lastTwo) {
        document.querySelector('.result').textContent = '正解！';
      } else {
        document.querySelector('.result').textContent = `不正解！正解は: ${currentQuestion.firstTwo}${currentQuestion.lastTwo}`;
      }
    }

    // 最初の問題を表示
    nextQuestion();
  </script>

</body>
</html>

コードの説明

  1. 四字熟語リスト: yojiJukugoという配列に、50個の四字熟語を入れています。

  2. 問題生成: nextQuestion()関数で、ランダムに四字熟語を選び、最初の2文字と最後の2文字を抽出します。

  3. 選択肢の生成: 他の四字熟語からランダムに最後の2文字を取得して選択肢を作ります。正解と不正解を混ぜてシャッフルします。

  4. 答え合わせ: ユーザーが選んだ選択肢が正解なら「正解！」と表示し、不正解なら正解を表示します。

  5. ゲームの進行: ボタンを押すことで次の問題に進むことができます。

このコードをブラウザで動かすと、ランダムに出題される四字熟語ゲームが遊べます。


この記事が気に入ったらサポートをしてみませんか？