JavaScriptを使って簡単な数字当てゲームを作ってみましょう。
この記事では、1〜10の数字を当てるゲームを例に、while文を使った繰り返し処理や、入力チェックの方法をコード付きで解説します。
コード例を通して確認しながら進められる内容になっています。
数字当てゲームをやってみる
このゲームでは、コンピュータが1から10までの数字の中からランダムに1つ選びます。
あなたは その選ばれた数字を当てることに挑戦 します。
数字を入力して「OK」を押すと、正解かどうかがわかります。
間違えた場合は「違います」と表示されるので、正しい数字が出るまで繰り返してみましょう。
キャンセルを押すとゲームを途中でやめることもできます。
数字当てゲーム
コード
<button id="startBtn">ゲーム開始</button>
<div id="result"></div>
<script>
document.getElementById('startBtn').addEventListener('click', function () {
const answer = Math.floor(Math.random() * 10) + 1; // 1〜10
let guess;
let attempts = 0;
while (guess !== answer) {
const input = prompt('1〜10の数字を当ててください（キャンセルで終了）');
// キャンセルされたら終了
if (input === null) {
document.getElementById('result').textContent = "ゲームをやめました。";
return;
}
// 数字に変換
guess = Number(input);
// 入力チェック
if (!Number.isInteger(guess) || guess < 1 || guess > 10) {
alert("⚠ 1〜10の数字を入力してください。");
continue; // カウントに入れずにやり直し
}
// 有効な入力なのでカウント
attempts++;
if (guess === answer) {
document.getElementById('result').textContent = `正解！ ${attempts}回で当たりました。`;
} else {
alert('違います。もう一度！');
}
}
});
</script>解説
上記のコードをわかりやすく解説します。
1) 画面要素とイベントの準備
<button id="startBtn">ゲーム開始</button>
<div id="result"></div>document.getElementById('startBtn').addEventListener('click', …)<button id="startBtn">… ゲーム開始ボタン。<div id="result">… 結果表示用の領域。document.getElementById('startBtn').addEventListener('click', …)
ボタンがクリックされた瞬間だけ、無名関数（ゲーム本体）が実行されます。
2) 正解の作成と状態の初期化
const answer = Math.floor(Math.random() * 10) + 1; // 1〜10
let guess;
let attempts = 0;Math.random() * 10は 0以上10未満の小数を返します。Math.floorで小数を切り捨てると 0〜9 の整数になり、+ 1で 1〜10 の整数を作れます。この数字を、コンピュータが決めた正解としてanswer変数 に入れます。guessはプレイヤーが入力した直前の推測値を入れる変数です。最初はまだ値がないのでundefinedです。attemptsは有効な入力（1〜10の整数）が何回試されたかを数えるためのカウント用変数です。
3) while ループの条件
while (guess !== answer) { … }- 「正解するまで」繰り返します。開始直後は
guessが未定義なので!==判定は true、ループに入ります。 - 何回で当たるか分からないため、回数で回す
forより while が適切 です。
4) 入力の取得と「やめる」処理
const input = prompt('1〜10の数字を当ててください（キャンセルで終了）');
if (input === null) {
document.getElementById('result').textContent = "ゲームをやめました。";
return;
}promptは入力文字列を返し、キャンセル時はnullを返します。nullのときはメッセージを表示して 関数をreturn。これで while も含めてゲーム処理全体を終了します。
5) 文字列 → 数値変換
guess = Number(input);promptは文字列しか返さないので、Number()で数値に変換します。
例："7"→7、"abc"→NaN、""（空文字）→0
6) 入力チェック（無効入力はカウントしない）
if (!Number.isInteger(guess) || guess < 1 || guess > 10) {
alert("⚠ 1〜10の数字を入力してください。");
continue;
}Number.isInteger(guess)… 整数かどうか。NaNや小数は false。- 範囲チェック … 1〜10に入っているか。
- どれか一つでも不適合なら注意を出し、
continueで この周回をスキップ。
→attempts++の手前で抜けるので 回数にカウントされません。
補足：""（空文字）や " "（空白）は Number() すると 0 になります。
0 は 1〜10 外なので、上の条件により注意を出してカウント除外されます。
7) 有効入力のカウントと判定
attempts++;
if (guess === answer) {
document.getElementById('result').textContent = `正解！ ${attempts}回で当たりました。`;
} else {
alert('違います。もう一度！');
}- 有効な入力だけ
attemptsを増やします。 - 正解なら結果を
<div id="result">に表示。
不正解ならアラートを出して次の周回へ（while 条件がまだ真なので継続）。
8) ループ終了のタイミング
- 次の周回の先頭で
while (guess !== answer)を再評価。 - 正解後は
guess === answerなので条件が false になり ループ終了。関数の末尾に到達して処理全体も終わります。
この実装のポイント（簡潔に）
- 回数が不明な繰り返しなので
whileを採用。 promptの キャンセルはnull→ 早期returnで安全に終了。- 入力バリデーション（整数 & 1〜10）を通ったときだけ、試行回数をカウント。
- 無効入力は
continueで「注意→未カウント→再入力」の流れに。
このゲームでは入力に prompt、結果表示に alert を使っています。
実際のアプリやWebサイトではフォームやボタンを使うほうが実用的ですが、ここでは「仕組みをわかりやすく示す」ことを目的に、あえて prompt/alert を使ったシンプルな形にしています。
デザインに関する参考リンク
今回はCSSの解説は省略しました。
デザインに関しては下記のページを参考にしてください。
Web制作を学ぶならUdemy
私は動画学習プラットフォームのUdemyでプログラミングを学習しています。
HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。
興味がある方はUdemyの講座をチェックしてください。
実際に私が受講した講座はこちら👇
Udemyでは頻繁にセールをやっていて、90％オフになることも！
気になる講座はセール時に購入するのがおすすめです。
