では、プログラミング初心者向けに do...while 文を使った 練習ゲーム例 を作ります。
今回は「サイコロを振って、6が出るまで繰り返すゲーム」を例にします。HTMLとJavaScriptで作るので、ブラウザで動かせます。
例題：サイコロゲーム
1️⃣ HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイコロゲーム</title>
</head>
<body>
<h1>サイコロゲーム</h1>
<button id="rollBtn">サイコロを振る</button>
<div id="result"></div>
<script src="dice.js"></script>
</body>
</html>
2️⃣ JavaScript部分（dice.js）
document.getElementById("rollBtn").addEventListener("click", function() {
let dice;
let log = ""; // 出た目をためて表示する
do {
dice = Math.floor(Math.random() * 6) + 1; // 1～6の乱数
log += "サイコロの目は " + dice + "<br>";
} while (dice !== 6);
log += "やっと6が出た！";
document.getElementById("result").innerHTML = log;
});
3️⃣ ゲームの流れ
- 「サイコロを振る」ボタンを押す
do...while文でサイコロを振り続ける- 6が出たら止まる
- 振った目が画面に全部表示される
4️⃣ ポイント解説
do { … } while (dice !== 6);
→ 6が出るまで繰り返す- 最初の1回は必ずサイコロを振る
- 出た目を
logに溜めてまとめて表示 - ユーザー操作で繰り返し実行可能
💡 練習問題アイデア：
- 1が出るまでサイコロを振るゲームに変更してみる
- サイコロの目の合計が30を超えるまで繰り返すゲームを作る
では、初心者向けに すぐ使える練習問題＋解答例付きテンプレート を作ります。
テーマは「do...while 文でサイコロゲームを作る」です。
練習問題テンプレート
HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイコロゲーム練習</title>
</head>
<body>
<h1>サイコロゲーム練習</h1>
<p>サイコロを振って、6が出るまで繰り返します。</p>
<button id="rollBtn">サイコロを振る</button>
<div id="result"></div>
<script src="dicePractice.js"></script>
</body>
</html>
JavaScript部分（dicePractice.js）
document.getElementById("rollBtn").addEventListener("click", function() {
// ここから練習：変数 dice を作る
let dice;
let log = "";
// ここから do...while 文を使って繰り返し処理
do {
// サイコロの目をランダムに出す（1～6）
dice = Math.floor(Math.random() * 6) + 1;
// 出た目を log に追加
log += "サイコロの目は " + dice + "<br>";
} while (dice !== 6); // 6が出るまで繰り返す
log += "やっと6が出た！";
document.getElementById("result").innerHTML = log;
});
✅ 練習ポイント
- 変数 dice を作る
→ サイコロの目を保存するための箱を作ります - do…while 文で繰り返す
→ 最初に必ずサイコロを振り、6が出るまで繰り返す - 結果を画面に表示する
→innerHTMLを使ってサイコロの目を表示
追加練習問題（応用）
- 1が出るまでサイコロを振る
- 条件式を
dice !== 1に変える
- 条件式を
- 合計が20以上になるまで振る
let sum = 0; do { dice = Math.floor(Math.random() * 6) + 1; sum += dice; log += "サイコロの目は " + dice + "（合計 " + sum + "）<br>"; } while (sum < 20); - 複数人でサイコロゲーム
- 2人の合計が10以上になるまで交互に振るなど
💡 このテンプレートをコピーしてブラウザで開くと、すぐにサイコロゲームが動作します。
応用練習も同じコードを少し変えるだけで作れるので、手を動かしながら do...while 文をしっかり覚えられます。