1日目：while とイベントで「動く数当てゲーム」の基礎を作る
数当てゲームは、JavaScript 初心者が最初に作るミニゲームとして非常に優れています。 理由はシンプルで、イベント（クリック） と while（繰り返し） の両方を自然に使うことになるからです。 この 2 つは JavaScript の基礎であり、どんなアプリでも必ず登場します。
1日目は、ユーザーが数字を入力し、ボタンを押すとゲームが反応する「動くゲーム」の土台を作ります。
今日の主な学習
- while：繰り返し処理の基本
- イベント：クリックに反応する仕組み
- DOM 操作：画面に結果を表示する
数当てゲームのゴール（1日目）
- ランダムな数字を作る
- ユーザーが数字を入力する
- ボタンを押すと判定が行われる
- while を使って「当たるまで繰り返す」仕組みを理解する
HTML の準備
まずはゲームの画面となる HTML を用意します。
<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>
<div id="result"></div>
JavaScript と HTML の関係
JavaScript は HTML の要素を操作して画面を動かします。
- 入力欄 → ユーザーの数字を取得
- ボタン → クリックイベントを設定
- div → 結果を表示
この「HTML を JavaScript が動かす」という構造が DOM 操作です。
ランダムな答えを作る
数当てゲームの答えはランダムな数字です。
const answer = Math.floor(Math.random() * 10) + 1;
// 1〜10 のランダムな数字
深掘りポイント：Math.random
Math.random() は 0〜1 のランダムな小数を返します。 * 10 で 0〜9 + 1 で 1〜10 Math.floor() で整数にします。
ゲーム開発では必ず使う重要な関数です。
イベントで「判定する」処理を動かす
ボタンが押されたら判定が始まるようにします。
const input = document.getElementById("guessInput");
const btn = document.getElementById("guessBtn");
const result = document.getElementById("result");
btn.addEventListener("click", function() {
const guess = Number(input.value); // 入力された数字を取得
if (guess === answer) {
result.textContent = "正解です！";
} else {
result.textContent = "違います。もう一度！";
}
});
深掘りポイント：addEventListener
addEventListener("click", function() {...}) これは「ボタンがクリックされたら、この処理を実行する」という意味です。
JavaScript のイベント処理の中心となる仕組みです。
while を使って「当たるまで繰り返す」仕組みを理解する
数当てゲームの本質は「当たるまで繰り返す」です。 ただし、ブラウザで while を使うと画面が固まるため、まずは仕組みだけ理解します。
let guess = 0;
while (guess !== answer) {
// 本来はユーザー入力を待つ必要がある
// ここでは仕組みの説明のため仮の値を使う
guess = Math.floor(Math.random() * 10) + 1;
console.log("試した数字:", guess);
}
console.log("正解:", answer);
深掘りポイント：while の 3 要素
- 初期値（guess = 0）
- 条件（guess !== answer）
- 更新（guess を変える）
この 3 つが揃わないと無限ループになります。
実際のゲームでは「イベントが while の代わりになる」
ブラウザでは、ユーザーがボタンを押すたびに判定が行われます。 つまり、イベントが「繰り返しの役割」を果たします。
- while → プログラムが自動で繰り返す
- イベント → ユーザーが繰り返す
この違いを理解すると、JavaScript の動きが一気に分かりやすくなります。
今日のまとめ
1日目では、JavaScript の基礎である イベント と while を使って、数当てゲームの土台を作りました。
- ランダムな数字を生成し
- 入力欄から数字を取得し
- ボタンのクリックイベントで判定し
- DOM 操作で結果を表示し
- while の仕組みを理解した
これで「動くゲーム」の最初の一歩が完成しました。
次のステップ
2日目は ヒント機能（大きい・小さい） を追加します。 ゲームらしさが一気に増し、条件分岐の理解が深まります。
