前のパートに戻る 完了して次のパートへ  

  3-2 入力文字の判定

3-2.入力文字の判定


キー入力が判別できたら、1文字目、2文字目..と「タイプした文字が一致するか」を判定する必要があります。

現在は「abc」と表示されているので、1文字目は「a」、2文字目は「b」、3文字目は「c」が正解の文字となります。

このロジックを実装していきます。

HTMLを確認します。

1文字ずつ <p> タグに入れています。

idをchar-{n}というように連番にしているところがポイントです。

よって以下のように文字を取得できることになります。

1文字 → $('#char-1').text(); = 「a」

2文字 → $('#char-2').text(); = 「b」

3文字 → $('#char-3').text(); = 「c」

はじめは「#char-1」から取得して、正解だったら +1 をしていけばよいでしょう。

以下のように{n}にあたる部分を変数 char_index として宣言します。 (1を初期値とする)


*var、let、constでは違いがありますので、下記リンクを参考にして理解しておきましょう。

【参考】 var,let,constの違いは、ブロックスコープと巻き上げ

現在位置の文字を $('#char-'+char_index); というように呼び出せます。

target という変数に入れておきます。 (後ほどクラスの変更をしたり利用します)

text() で文字を取得できるので、 入力キーである e.key と比較しましょう。

【参考】textメソッド


▼ソースコード全体

ここまで書いて、「a」を入力した時に「正解!」とアラートが出たらOKです。

(一度表示結果部分をクリックしてから)

文字を判定できたら、①文字の色を変える、②次の文字を判定、をしたいですね。

①文字の色を変える → "correct"クラスを付与する

addClass('クラス名') でクラスを追加できます。 また、removeClass('クラス名') で該当クラスを削除できます。

if (e.key === char) の後に、以下の処理を追記しましょう。

【参考】addClass('class名')

【参考】removeClass('class名')

②次の文字の判定 → 現在の文字位置に +1 をする

char_indexに+1を加えればOKなので、 char_index++とすれば完了です。

【参考】インクリメント演算子(加算子)「++」

以下のようになります。

▼ソースコード全体

ここまで書いて、「a」を入力した後に「a」の色が黒に変わったらOKです。 (一度表示結果部分をクリックしてから)

議論
0 質問
このコースの評価は?