では、サイコロゲームを アニメーションで1秒ずつステップ表示する可視化バージョン にします。
ポイント：
- サイコロの出た目を 1秒ごとに順番に表示
- do…while文の繰り返しの流れを アニメーションで直感的に理解
- 出た目ごとに 色分け
1️⃣ HTMLファイル（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイコロゲームアニメ可視化</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-bottom: 10px;
}
#result {
margin-top: 20px;
line-height: 1.6;
font-size: 18px;
}
.dice1 { color: red; }
.dice2 { color: orange; }
.dice3 { color: yellow; }
.dice4 { color: green; }
.dice5 { color: blue; }
.dice6 { color: purple; font-weight: bold; }
</style>
</head>
<body>
<h1>サイコロゲームアニメ可視化</h1>
<p>サイコロを振って、6が出るまで1秒ずつ表示します。</p>
<button id="rollBtn">サイコロを振る</button>
<button id="resetBtn">リセット</button>
<div id="result"></div>
<script src="diceAnimation.js"></script>
</body>
</html>
2️⃣ JavaScriptファイル（diceAnimation.js）
const rollBtn = document.getElementById("rollBtn");
const resetBtn = document.getElementById("resetBtn");
const resultDiv = document.getElementById("result");
rollBtn.addEventListener("click", async function() {
rollBtn.disabled = true; // 連打防止
let dice;
resultDiv.innerHTML = ""; // 表示をリセット
do {
dice = Math.floor(Math.random() * 6) + 1;
// 出た目を色付きで表示
const span = document.createElement("span");
span.className = `dice${dice}`;
span.textContent = `[${dice}] `;
resultDiv.appendChild(span);
// 1秒待つ
await new Promise(resolve => setTimeout(resolve, 1000));
} while (dice !== 6);
const endMsg = document.createElement("div");
endMsg.innerHTML = "<strong>やっと6が出た！</strong>";
resultDiv.appendChild(endMsg);
rollBtn.disabled = false;
});
resetBtn.addEventListener("click", function() {
resultDiv.innerHTML = "";
});
3️⃣ 特徴・ポイント
- アニメーション表示
await new Promise(resolve => setTimeout(resolve, 1000));で1秒待機- サイコロの目が順番に現れる
- 色分け
- 1～6をそれぞれ異なる色で表示
- 6は紫で強調
- do…while文の動きを直感的に理解
- 「まず1回振る → 条件チェック → 繰り返す」が目で分かる
- 連打防止
- 実行中はボタンを無効化
4️⃣ 応用アイデア
- 待機時間を0.5秒や2秒に変更してアニメーション速度を調整
- 合計値や回数をカウントして最後に表示
- 複数人で交互に振るゲームに拡張
💡 このバージョンなら、do…while文の処理の流れを ステップごとに目で確認できるので、初心者でも理解が格段に早くなります。
