繰り返し処理によく使われるfor文。基本的な構造を理解していれば、かんたんなプログラムを実装することができます。

そこで今回は、for文を使った数値当てゲームを実装していきます。
その他にもif文やalert、promptも扱っていくので、実践的に理解を深めていきましょう。

デモ

今回は、このようなクイズ形式の数値当てゲームを作っていきます。お題はニュージーランドの国旗の星の数です。

ゲームの中には、以下の6つの画面が用意されています。

  • ゲーム開始画面
  • 数値予測画面
  • ハズレ画面（再度入力を促す）
  • 1〜5以外を入力した時の画面（再度入力を促す）
  • ゲームクリア画面
  • ボーナス画面

HTMLの準備

まずはHTMLの準備をしていきます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数値当てゲーム</title>
</head>
<body>
  <div id="image"></div>
  <script src="main.js"></script>
</body>
</html>

alertやpromptを使ってゲームを進めていくため、HTMLでの記述は非常にシンプルです。

クイズに正解した際に、ボーナス画面にてテキストや画像を表示させるため、空のdivタグを用意しておきます。

JavaScriptで数値当てゲームを実装

それでは早速JavaScriptに移っていきましょう。

全体のコード

alert('数値当てクイズ！1〜5の中から解答してください。解答権は5回です。');
let userInput = prompt('ニュージーランドの国旗にある星の数は何個？');

// 答えの数値
let answer = [4];
// その他の数値
const numbers = [1, 2, 3, 5];

for (let i = 0; i < 5; i++) {
  if (userInput == answer) {
    alert('正解です! ボーナスページに進むことができます :)');
    const image = document.getElementById('image');
    image.innerHTML = `
      <div>
        <h1>Congratulations!</h1>
        <iframe src="https://giphy.com/embed/Qa4cAGMr5NfUuINAXd" width="150" height="80" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
      </div>
      <iframe src="https://giphy.com/embed/SgwPtMD47PV04" width="480" height="378" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
    `;
  break;
  } else if (userInput == numbers[0] || userInput == numbers[1] || userInput == numbers[2] || userInput == numbers[3]) {
    userInput = prompt('残念！もう1度解答してください');
  } else {
    userInput = prompt('1〜5の数値の中で解答してください！');
  }
}

alertとpromptで、ゲームのお題や入力画面に表示する内容を用意し、for文とif文でゲームを制御していることがポイントです。

それでは上から順番にコードを解説していきます。

ゲームの説明とお題を用意

ユーザーがウィンドウを開いたときにスムーズにゲームが始められるように、ゲームの説明とお題を用意しておきます。

alert('数値当てクイズ！1〜5の中から解答してください。解答権は5回です。');
let userInput = prompt('ニュージーランドの国旗にある星の数は何個？');

alertで数値当てゲームの説明文をかんたんに記述し、promptでクイズのお題を記述します。
ここではpromptを変数に入れて用意します。
ユーザーが解答した数値が正解か不正解かによって、次に表示させる内容を変える必要があるためです。

gamestart

quiz

解答数値を用意する

あらかじめ解答数値を配列に入れて用意します。

// 答えの数値
let answer = [4];
// その他の数値
const numbers = [1, 2, 3, 5];

クイズのお題に対しての正解は「4」であるため、正解の数値を持ったanswerと、それ以外の数値を持ったnumbersの2つの変数に分けます。

5回まで解答できるように繰り返し処理させる

次に、for文を使って5回までクイズに解答できるようにします。

for (let i = 0; i < 5; i++) {
}

i < 5の記述で5回まで繰り返し処理が行われることになります。

解答の選択肢が5つしかないため、1〜5以外の数値を入力しない限りは、必ず正解にたどり着けるようにしています。
ここは好みの回数に変更しても良いでしょう。

解答内容によって表示させる内容を変える

さらに、ユーザーの解答内容によってつぎに表示させる内容を変えていきましょう。
まずは、正解したパターンです。

if (userInput == answer) {
  alert('正解です! ボーナスページに進むことができます :)');
  const image = document.getElementById('image');
  image.innerHTML = `
    <div>
      <h1>Congratulations!</h1>
      <iframe src="https://giphy.com/embed/Qa4cAGMr5NfUuINAXd" width="150" height="80" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
    </div>
    <iframe src="https://giphy.com/embed/SgwPtMD47PV04" width="480" height="378" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
  `;
break;
}

userInput == answerは、ユーザーが入力した数値が4だった場合という条件です。

正解したらalertで正解したことを知らせ、その後にテキストと画像が見られるボーナスページへ進めるようにします。
document.getElementById('image')で、imageクラスを持った要素を取得しましょう。

また、正解した場合はループから抜ける必要があるため、if文の終わりにbreakの記述を忘れないように注意してください。

correct

bonuspage

続いて、正解しなかった場合の条件を見ていきましょう。
それは、ユーザーが「1, 2, 3, 5」を入力したパターンです。

} else if (userInput == numbers[0] || userInput == numbers[1] || userInput == numbers[2] || userInput == numbers[3]) {
  userInput = prompt('残念！もう1度解答してください');
}

numers[0][1][2][3]は、numersの配列に入れた「1, 2, 3, 5」という数値を取得しています。

お題に対しては不正解となるため、userInput = prompt('残念！もう1度解答してください')と、不正解であることを知らせ、再度解答を促します。

incorrect

さいごに、「1〜5」以外を入力した場合の条件を設定しましょう。

} else {
  userInput = prompt('1〜5の数値の中で解答してください！');
}

ゲーム開始画面で「1〜5の中から解答してください」と表示させていますが、誤って別の数値を入力する場合も考えられます。
その場合には、数値が異なることを知らせ、再度解答を促します。

not1to5

以上で全ての実装が完了です。

まとめ

今回は、for文を使って数値当てゲームを実装しました。

if文やalert, promptなどの基本的な理解があると、それらを組み合わせることで、かんたんなゲームを作ることができます。
for文でうまく実装できたらwhile文に書き換えてみると、どちらの方が使いやすいか試してみると良い練習になります。

数値当てゲームの関連記事

・繰り返し処理 -for文
・繰り返し処理 -while文
・ダイアログボックス