では、初心者向けに サイコロゲーム練習セット を作ります。
ポイントは：
- HTML・JavaScriptは分離
- ボタンでサイコロを振る
- 出た目を表示
- 条件変更で応用問題に挑戦可能
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;
}
</style>
</head>
<body>
<h1>サイコロゲーム練習セット</h1>
<p>サイコロを振って、6が出るまで繰り返します。</p>
<button id="rollBtn">サイコロを振る</button>
<button id="resetBtn">結果をリセット</button>
<div id="result"></div>
<script src="dicePractice.js"></script>
</body>
</html>
2️⃣ JavaScriptファイル（dicePractice.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...while文でサイコロを振る
do {
dice = Math.floor(Math.random() * 6) + 1; // 1～6
log += "サイコロの目は " + dice + "<br>";
} while (dice !== 6);
log += "<strong>やっと6が出た！</strong>";
resultDiv.innerHTML = log;
});
// 「リセット」ボタンで結果を消す
resetBtn.addEventListener("click", function() {
resultDiv.innerHTML = "";
});
3️⃣ 使い方
- index.html をブラウザで開く
- 「サイコロを振る」ボタンを押すと、6が出るまでサイコロを振った結果が表示される
- 「結果をリセット」で画面を空にできる
4️⃣ 応用練習
- 条件を
dice !== 1に変更 → 1が出るまで振る - サイコロの合計が 20 以上になるまで振る →
let sum = 0; sum += dice; while (sum < 20) - 複数人で交互にサイコロを振る → 変数を複数用意
💡 このセットなら、手を動かして do...while 文の動きを理解しながら、
条件を変えた応用問題にも挑戦できます。
