なかなかタイピングゲームを作るのが難しい😭
でも、先生に聞いたりしたおかげで、つまづいていたfor文のループ条件のところが分かったので記事にしたいと思います。
以前の記事はこれです！
前回質問したときの私のコードは
この先生への質問内容としては、
以前の記事抜粋↓
ここで、上記のコードの18行目(for文のところ)から見ていただきたいのですが…
for (let i = 1; letterArry.length === questionLetterArry.length; i++) {省略}
まず、for文のループ条件が、インデックスを用いておらずに、letterArryとquestionLetterArryの長さが等しいときに、for文を抜け出すようになっています。
ここで、つまずいてしまったので、先生に聞いたところ…
forの条件がletterArry.length === questionLetterArry.length;なので、i(インデックス)は関係なくなっているからです。そのforは問題の長さとユーザーが
入力した文字の長さが等しい時、つまり最後だけ回る条件になっているように見えます
と言うことでした。
自分の意図としては、for文を全て完了したとき（自分の考えだと、letterArryとquestionLetterArryの長さが等しくなったとき）にfor文を抜けると言う考えだったので？が残っているので疑問が解消次第記事にします！！
と、しておりました。
早速解決した内容をまとめます。
まず、私の上記のコードでfor文が機能する条件は、
1、letterArry.length === questionLetterArryの間ループ条件が稼働します。（18行目）
2、 if (questionLetterArry.length === letterArry.length && String(questionLetterArry) === String(letterArry) )
{ reStartGame();
のとき、つまり、”questionLetterArryの長さとletterArryの長さが等しく、questionLetterArryとLetterArryの配列の中身が等しいとき”reStartGame()を呼び出します。（19行目）
3、else if (String(questionLetterArry[i – 1]) !== String(letterArry[i – 1]) ) { letterArry.pop();
i = i – 1;
}
のとき、つまり、questionLetterArry（問題）とletterArry（キー入力した文字）の文字が一致しなければ、キー入力した配列の文字を削除します。
しかし、ここで、自分が考えた動作（間違って文字を入力したら、一致しなかった文字を配列から削除し、一致するまで次の文字を打てなくする）をしてくれなかったので、先生に質問しました。
質問の内容は、前回の記事と同じで
自分が考えた動作（間違って文字を入力したら、一致しなかった文字を配列から削除し、一致するまで次の文字を打てなくする）をして欲しいと言うことです。
先生の解説が、
今の私のコードだと、for文内のループ条件が、一文字ずつ問題の配列questionLetterArryがletterArryと一致するようにはなっていない。とのことでした。
文字を入力したとき、配列letterArryに文字を追加していきます。
で、仮に問題（questionLetterArry）の配列が、[“r”,”e”,”d”]とすると、一文字追加するごとに、配列（letterArry）に挿入されていきます。例：”r”を入力すると[“r”]が入ります。
しかし、今のfor文のループ条件では（questionLetterArryが[“r”,”e”,”d”]とすると）、
本来タイピングは1文字ずつ判定されるべきですが、問題の文字の長さとキーボード入力の回数が一致しなければ処理は走らなかったわけですね。←先生の言葉
何故そうなるのか…
理由は、letterArry === questionLetterArryのところにあります。
letterArryの最初（index番号が0）に”p”を入れても、三文字目まで入力して、三文字目が正しくなければ、for文内の処理が機能しない。（popメソッドが機能しない）
何故なら、letterArryの配列の中身は、”0”からスタートです。一方、questionLetterArryは[“r”,”e”,”d”]とすると、”3”になります。
この時点では、
for (let i = 1; letterArry.length === questionLetterArry.length; i++) {以下省略}
を満たしていないので、たとえ、入力した最初の文字が合っていようが、間違っていようが、ループは繰り返されません。なので、その後に書いた処理は、全く機能しないと言うことになります。
ようやく、三文字目を入力したとき、letterArryの個数とquetionLetterArryの個数が等しくなるので、ループが始まると言うことです！！
なかなかややこしい
つまり、for文内の条件が違っているので、そのあとの処理も自分の思ったように機能しないと言うことでした。
以上です。
コメント