では、さらにステップアップして サイコロの出目を履歴グラフ化して確率分布も可視化するバージョン を作ります。
ポイントは：
- サイコロを振った結果を リアルタイムでカウント
- 出た目ごとに 棒グラフで表示
- 出現回数・比率を確認できるので 確率の感覚 も掴める
- もちろん アニメーション表示＋色分け
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; }
#chart {
margin-top: 20px;
display: flex;
gap: 5px;
align-items: flex-end;
height: 200px;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
padding: 5px;
}
.bar {
width: 30px;
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1>サイコロゲーム確率可視化</h1>
<p>サイコロを振って、6が出るまで出目を色分けし、グラフで可視化します。</p>
<button id="rollBtn">サイコロを振る</button>
<button id="resetBtn">リセット</button>
<div id="result"></div>
<div id="chart"></div>
<script src="diceGraph.js"></script>
</body>
</html>
2️⃣ JavaScriptファイル（diceGraph.js）
const rollBtn = document.getElementById("rollBtn");
const resetBtn = document.getElementById("resetBtn");
const resultDiv = document.getElementById("result");
const chartDiv = document.getElementById("chart");
// 出目ごとの色
const colors = ["red", "orange", "yellow", "green", "blue", "purple"];
// リセット関数
function reset() {
resultDiv.innerHTML = "";
chartDiv.innerHTML = "";
}
// グラフ表示関数
function updateChart(counts) {
chartDiv.innerHTML = "";
for (let i = 0; i < 6; i++) {
const bar = document.createElement("div");
bar.className = "bar";
bar.style.height = counts[i] * 20 + "px"; // 出現回数に応じて高さを設定
bar.style.backgroundColor = colors[i];
bar.textContent = counts[i];
chartDiv.appendChild(bar);
}
}
rollBtn.addEventListener("click", async function() {
rollBtn.disabled = true;
reset();
let dice;
let log = "";
const counts = [0,0,0,0,0,0]; // 1～6の出現回数
do {
dice = Math.floor(Math.random() * 6) + 1;
counts[dice-1]++;
// 出た目を色付きで表示
const span = document.createElement("span");
span.className = `dice${dice}`;
span.textContent = `[${dice}] `;
resultDiv.appendChild(span);
// グラフ更新
updateChart(counts);
// 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", reset);
3️⃣ 特徴・ポイント
- リアルタイムアニメーション
- サイコロを振るたびに1秒ごとに表示
- 出目を色分け
- 1～6を異なる色で表示、6は紫で強調
- グラフで確率可視化
- 出現回数に応じて棒グラフの高さが変化
- サイコロの出目の偏りや確率感覚をつかめる
- 直感的に do…while の流れを理解
- 「まず1回振る → 条件チェック → 繰り返す」を体感できる
💡 応用アイデア：
- 待機時間を変えてアニメーション速度を調整
- 合計値や回数も表示して統計情報を追加
- 条件を変えて「1が出るまで」や「合計が20以上になるまで」など応用
このバージョンなら、do…while文の処理、サイコロのランダム性、確率の理解 を同時に体験でき、初心者でも直感的に学べます。
