では、サイコロゲームを 「ステップごとに出た目を色分けして可視化するバージョン」 にします。
ポイントは：
- サイコロの出た目を 順番に色分けして表示
- どの目が何回出たか一目で分かる
- 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が出るまで色分けして表示します。</p>
<button id="rollBtn">サイコロを振る</button>
<button id="resetBtn">リセット</button>
<div id="result"></div>
<script src="diceVisual.js"></script>
</body>
</html>
2️⃣ JavaScriptファイル（diceVisual.js）
const rollBtn = document.getElementById("rollBtn");
const resetBtn = document.getElementById("resetBtn");
const resultDiv = document.getElementById("result");
// サイコロを振る関数
rollBtn.addEventListener("click", function() {
let dice;
let log = "";
do {
dice = Math.floor(Math.random() * 6) + 1;
// 出た目ごとに色を変える
log += `<span class="dice${dice}">[${dice}]</span> `;
} while (dice !== 6);
log += "<br><strong>やっと6が出た！</strong>";
resultDiv.innerHTML = log;
});
// リセットボタン
resetBtn.addEventListener("click", function() {
resultDiv.innerHTML = "";
});
3️⃣ 特徴・ポイント
- 色分け
- 1～5は赤～青まで順番に
- 6は紫で強調
- 繰り返しの流れが可視化
- do…while文が何回繰り返されたか一目で分かる
- 初心者向けの理解サポート
- 「まず1回振る → 条件をチェック → 繰り返す」の流れが直感的に理解できる
4️⃣ 応用アイデア
- 条件を変えて「1が出るまで」「合計が20以上になるまで」などに挑戦
- 出た目の数ごとにカウントして、最後に表で表示
- 複数人で交互に振るゲームに拡張
💡 この可視化版なら、do…while文の動きを 目で確認しながら学べる ので、初心者でも理解が早くなります。
