繰り返し処理によく使われる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以外の数値を入力しない限りは、必ず正解にたどり着けるようにしています。
ここは好みの回数に変更しても良いでしょう。

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

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

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’)によるDOM操作で、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文に書き換えてみると、どちらの方が使いやすいか、また、さらに理解につながるため、ぜひ試してみてください。

JavaScriptの基本をおさらい