なんとなく思いついて作ってみました。
楽しいのでやってみてね♪
<!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>コードの説明
- 四字熟語リスト:
yojiJukugoという配列に、50個の四字熟語を入れています。 - 問題生成:
nextQuestion()関数で、ランダムに四字熟語を選び、最初の2文字と最後の2文字を抽出します。 - 選択肢の生成: 他の四字熟語からランダムに最後の2文字を取得して選択肢を作ります。正解と不正解を混ぜてシャッフルします。
- 答え合わせ: ユーザーが選んだ選択肢が正解なら「正解！」と表示し、不正解なら正解を表示します。
- ゲームの進行: ボタンを押すことで次の問題に進むことができます。
このコードをブラウザで動かすと、ランダムに出題される四字熟語ゲームが遊べます。