【JavaScript】数当てゲームを作成したい

お世話になります。
現在、スクールでJavaScriptの勉強しています。
宿題で以下のような問題がでました。

宿題
wihleを使ってダイアログボックスに入力した値が正解するまで、
ダイアログボックスを表示しつづけるプログラムを作成する

サンプルとして「数当てゲーム」という0～3までの数字のtrueとfalseを判定する
例題があり、このプログラムは最下段の通りです。

以下のプログラムを参考にwihleを使って、
ダイアログボックスに入力した値が正解するまで、
ダイアログボックスを表示しつづける

※間違いの時は「ハズレ！」のダイアログボックスで表示する。
↑「ハズレ！」表示の後で再度「数当てゲーム。0～2の数字を入力してね」を
正解するまで、繰り返し表示し続ける、にはどうすればよいのでしょうか？

お手数ですが詳しい方、説明の上手な方、教えて下さい。

※すいませんが、こちらの知識不足のため「○○すればいいよ」みたいな、
ご返答では理解できないと思います。

<script>
var number = Math.floor(Math.random() * 4);
var answer = parseInt(window.prompt('数当てゲーム。0～3の数字を入力してね。'));
var messege;

if(answer > 3) {
messege = '入力は0～3だよ！';

} else if(answer　<　number) {
messege = '残念でした！もっと大きい！';

} else if(answer >　number) {
messege = '残念でした！もっと小さい！';

} else {
messege = 'あたり！';
}
window.alert(messege);
window.alert('答えは「' + number + '」でした');
console.log('終了確認')

</script>

質問者からの補足コメント

• 

  宿題の意図していることとは違いますが、ここまで自力でできました
  解答時に文字数が足りなくて入力できない時は、画像を貼りつけていただければOKです。

  
    補足日時：2018/12/10 02:42

No.3 ベストアンサー 回答者： yambejp 回答日時： 2018/12/10 14:02

> while内に「number = answer;」がいるんですね。

いや、ちがいます

answer = parseInt(window.prompt('再チャレンジだよ！'));

のようにpromptで受け取ったデータをanswerに入れないといけないという意味です

この回答へのお礼

何回もありがとうございます。

>answer = parseInt(window.prompt('再チャレンジだよ！'));
のようにpromptで受け取ったデータをanswerに入れないといけないという意味です

意味がわかりました。
ダイアログボックスの上のメッセージに入力するところしか見てませんでした。

answer = parseInt(window.prompt('再チャレンジだよ！'));

この１行で、ダイアログボックスの上のメッセージとは別に、
入力された値を受け取って文字列を整数に変換してから、
「answer」に入れてるんですね。

「while」の中にもう１度書かないと
２回目以降に受け取った値を「number」と判定する方法がないので、
絶対に当たらないということですね。

先のように「number = answer;」にすると、
２回目の答えが「number」に入ってしまうので、
２回目に必ず当たってしまう、、、というのもわかりました。

サンプルの3行目に同じ構文があるのに漠然と読んでいました。

何度も解答して頂きありがとうございます。


※他の方が何かアドバイスしてくれるかもしれないので、
質問はしばらく開けておきます。

お礼日時：2018/12/10 14:51

No.2 回答者： yambejp 回答日時： 2018/12/10 12:53

while内のpromptをanswerが受けてないですよね

そうなるとanswerとnumber は一度はずすと二度と合致することはありません
それとif ( number == answer )のチェックでbreakしていますが
whileの条件と合致するのでわざわざbreakをしなくてもいいのかなと・・・
（あくまでもメッセージを切り替えるだけで十分）

この回答へのお礼

ご解答ありがとうございます。

>while内のpromptをanswerが受けてないですよね
そうなるとanswerとnumber は一度はずすと二度と合致することはありません

while内に「number = answer;」がいるんですね。
気が付かなかったです。
最下段のコードで思っていたとおり動作するようになりました。
※「break」の件もありがとうございます。

あと、、、すいませんが、１つ気になることがあります。
お手数でなければ、教えて頂ければうれしいです。
※お手数でしたらスルーでOKです。

今回は解答して頂きありがとうございます。
機会がありましたら、またお願いいたします。

<---->
最初に頂いたコードで、
どうして４行目が「var answer = -1;」になっているのですか？
整数型の指定なので「var answer = 0;」だと思うのですが、
どうして「-1」なのでしょうか？

動作確認したところ「var answer = 0;」でも
正常に動作するので、余計に不思議に感じます。

「var answer = 0;」が無難だと思うのですが、
もし何か意味があるのでしたら、教えて頂ければうれしいです。
<---->

<script>
var number = Math.floor(Math.random() * 3);
var answer = parseInt(window.prompt('数当てゲーム。0～2の数字を入力してね。'));

while ( number != answer ) {
console.log(number)
window.alert('ハズレ！');
parseInt(window.prompt('再チャレンジだよ！'));
number = answer;

if ( number == answer ) {
window.alert('当たり！');
}
else{
}
}
console.log(number)
console.log('最終行-動作確認')
</script>

お礼日時：2018/12/10 13:51

No.1 回答者： yambejp 回答日時： 2018/12/10 11:32

とりあえずキャンセルされたときの処理をいれる

あとはwhile内でpromptを呼びつづければよい
へたにparseIntすると答えが1のときに1.5とか入れても正解になるので注意
もちろんparseFloatしてるので答えが1のときに1.0を入力すると正解になります
きっかり"1"以外を受け付けないのであればそれなりの処理が必要です

<script>
var number = Math.floor(Math.random() * 4);
console.log(number);
var answer = -1;
var messege ='';
while(number!==answer){
answer = prompt('数当てゲーム。0～3の数字を入力してね。');
if(answer === null){
messege = 'キャンセルされました';
answer=number;
}else{
answer=parseFloat(answer);
if(![0,1,2,3].some(function(x){return x===answer;})){
messege = '入力は0～3だよ！';
} else if(answer < number) {
messege = '残念でした！もっと大きい！';
} else if(answer > number) {
messege = '残念でした！もっと小さい！';
} else if(answer == number) {
messege = 'あたり！';
}
}
alert(messege);
}
console.log('終了確認')
</script>a

この回答へのお礼

解答して頂き、ありがとうございます。

バッチリです！

ありがとうございます。
後でベストアンサーを付けさせて頂きだきます。

もし、お手数でなければ、以下の件について教えて頂ければうれしいです。
※お手数でしたらスルーでOKです。
※他の人がアドバイスを下さるかもしれないので、しばらく質問はあけておきます。


昨日、自力で以下のところまで出来ました。
教えて頂いたコードと比べたのですが、シンプルになっているだけで、
差があるように思えないのですが、こちらのコードには以下の問題があります。

・１回目でハズレた場合、２回目以降、True、Falseの判定をしない
↑コンソールに表示された値を２回目に入力してもTrueの判定にならない

こちらはどうして２回目以降、True、Falseの判定が行われないのかわかりません。
↑ダイアログボックスは継続して表示しつづけます。

もし、何かお気付きのことがあれば、教えて頂ければうれしいです。
今回は解答して頂きありがとうございます。


<script>
var number = Math.floor(Math.random() * 3);
var answer = parseInt(window.prompt('数当てゲーム。0～2の数字を入力してね。'));

while ( number != answer ) {
console.log(number)
window.alert('ハズレ！');
parseInt(window.prompt('数当てゲーム。0～2の数字を入力してね。'));

if ( number == answer ) {
break;
window.alert('当たり！');
}
}

console.log(number)
console.log('最終行-動作確認')
</script>

お礼日時：2018/12/10 12:32