繰り返し処理によく使われる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を変数に入れて用意します。
ユーザーが解答した数値が正解か不正解かによって、つぎに表示させる内容を変える必要があるためです。
解答数値を用意する
あらかじめ解答数値を配列に入れて用意します。
//答えの数値
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」の記述を忘れないように注意してください。
つぎに、正解しなかった場合の条件を見ていきましょう。
ユーザーが「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度解答してください’)」と、不正解であることを知らせ、再度解答を促します。
さいごに、「1〜5」以外を入力した場合の条件を設定しましょう。
} else {
userInput = prompt('1〜5の数値の中で解答してください！');
}「1〜5の中から解答してください」とゲーム開始画面で表示させていますが、誤って別の数値を入力する場合も考えられます。
その場合には、数値が異なることを知らせ、再度解答を促します。
以上で全ての実装が完了しました。
まとめ
今回はfor文を使って数値当てゲームを実装しました。
if文やalert, promptなどの基本的な理解があると、それらを組み合わせることで、かんたんなゲームを作ることができます。
for文でうまく実装できたらwhile文に書き換えてみると、どちらの方が使いやすいか、また、さらに理解につながるため、ぜひ試してみてください。
JavaScriptの基本をおさらい
