Q&A
タイピングは英数文字でやらないと変換ミスとか入力とは関係ないところで判定がぶれませんか？
現在タイピングゲームを実装しています。
下記の実装内容に沿って作るのですが、お題の文字と打った文字の正誤判定、それを５回分格納しておいて最後に出力する方法がifやforを使うと思うのですがわかりません。
アドバイスいただきたいです。
現在改善中なのですが、この実装だとクリックをしても次のお題がでず、記入欄もリセットされません。
`
そうかもしれません汗
しかし文字でやらなければいけない仕様です、、。
たぶん破綻していますが、ホントにその仕様でいいんですね？
日本語入力で変換がカラムということはおそらくコピペで入力もできちゃうと思いますけど
たとえば「キャンディ」を入力しようとして「きゃｍ」と入力すると本来入力ミスですが
バックスペースでけして「きゃんでぃ」に変えて変換すれば入力ミス0になりますよね？
はい、練習課題なので大丈夫です！
それについてなのですが、その使用で間違えないです。上に表示されたお題と、打ち終わった文字で判定する形なので、お題が「チョコ」で打った文字が「ちょこ」なら3文字のミスになります。
正直タイピングゲームなのか？と思ってしまいます。
回答2件
0
ベストアンサー
こちらが修正後のコードになります！
最初にご提示いただいていたコードを元に修正してます
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <body> <p id="odai" style="width:500px; height:60px; padding-top:45px; border:solid 2px; text-align:center;"></p> <form name="form"> <p style="text-indent:50px;">↓ここに入力</p> <input type="text" id="user" value="" style="width:400px; height:30px; border:solid 2px; margin-left:50px; text-align:center;"></input> <br> <br> <input type="button" id="button" value="ok" onclick="testfunc()" style="width:60px; height:30px; margin-left:200px;"></input> </form> <p id="timer"></p> <p id="kekka"></p> </body> <script> let box = [ //配列でお題を作成 "キャンディ", "チョコ", "グミ", "クッキー", "スナック" ]; let odai = document.getElementById("odai"); //お題の取得 let user = document.getElementById("user"); //userの記入欄取得 let button = document.getElementById("button").value; //okボタンの取得 let kekka = document.getElementById("kekka"); //結果の取得 let timer = document.getElementById("timer");//タイマーの取得 let time = 0; //タイム初期化 let countdown = null;//countdown初期化 let odai_num = odai.length; //odaiの文字数 let user_num = 0; //userの文字数 //<<修正箇所>> let questionNum = 0;//問題数をカウント const ansArray = [];//回答を入れる配列 const odaiArray = [];//お題を入れる配列 let correctAnswer = 0; //正解数のカウント function testfunc() { //<<修正箇所>> ansArray[questionNum] = user.value; odaiArray[questionNum] = odai.innerText; questionNum++; time = 11;// クリック時も、値を戻す 1秒誤差ありだから11秒 if (countdown) { clearInterval(countdown);//処理が二重にならないようボタン押下時に一旦タイマークリア } countdown = setInterval(function () { //setInterval()で1秒ずつ表示 timer.textContent = '制限時間：' + --time + '秒'; //textContentで文字列と定数を組み合わせた文章を1秒おきに更新する if (time <= 0) { //0になった時点でclearIntervalで止める time = 11; //カウントが終了したら、変数の値を戻す clearInterval(countdown); //clearIntervalで止める //<<修正箇所>> //時間切れの時は、inputと解答を空欄にする user.value = ""; ansArray[questionNum] = ""; testfunc(); } }, 1000); let rnd = Math.floor(Math.random() * (box.length - 1)); //boxの配列から１個少ない数を最大値とした乱数を作成 box.lengthはboxの中身分だけという意味 tmp = box[rnd]; //変数ｔｍｐにboxの添字で[rnd]を入れる→ランダムに文章選択、文字列として利用できる box.splice(rnd, 1); //rndから該当する配列をspliceで消去.表示 odai.textContent = tmp; //tmpをお題欄に出力 //<<修正箇所>> //回答数が６問分になったら、answerを実行する if (questionNum == 6) { ansArray.shift(); //表示した段階で、回答を取得してくるので１つ目が空欄になっている。それが不要な為、削除する odaiArray.shift(); answer(); } } //<<修正箇所>> //全問入力した段階で、正解か判断する const answer = () => { for (let i = 0; i < ansArray.length; i++) { if (ansArray[i] === odaiArray[i]) { correctAnswer++;//正解数をカウント } } console.log(`入力値:${ansArray}`); console.log(`問題:${odaiArray}`); console.log(`正解数:${correctAnswer}`); } testfunc(); </script> </html>
投稿2022/05/12 10:34
編集2022/05/12 10:36
総合スコア118
すみません、追加で質問なのですが、1問ずつ終わった時点で、お題とuser入力値を一文字づつ正誤判定して、５問目が終わったらその正誤に基づいて画面に
0文字：完璧！
1から3文字:おしい！
4から8文字:まだまだです。
9文字以上:頑張りましょう。
のどれかを出したいのですが、送っていただいたコードに、プラスしてindexOf()を使い一文字づつあるかないか判断して、それの数字によってif文で上の４つに分岐しようと思ったのですが、上手く行きませんでした、、。
0
回答は以下の変数と、ロジックを追加すればいけると思います
必要な変数
①回答を入れる配列
②出題した問題を入れる配列
③今何問目を出題しているかのカウンター
④正解数のカウンター
ロジック
1.「OKボタン」を押下するタイミングで、①と②の配列に回答と問題を入れる
2.③の数字をインクリメントさせる
3.回答数が５問目まで1と2の処理を繰り返す
4.全部解凍した段階で回答用のメソッドを実行する。
5.for分で①の配列の長さ分だけ、ループさせる
6.for分の中で、if分を実行する
比較対象は①の文字と②の文字を==もしくは===で比較しtrueなら、④のカウンターをインクリメントする
7.正解数を返してあげる
投稿2022/05/11 10:38
総合スコア118
10秒過ぎた際のロジックは、タイマーを止めるタイミングで、testfuncを実行してあげれば、入力途中の段階のものが解答になるので、基本的には不正解になると思います。
確実に不正解にしたい場合は、上記と同じタイミングで、user.vaule = ""としてあげれば、何も入力していない状態にできるので不正解になります
とても詳しいロジック説明していただきありがとうございます！
その内容でコードを書いてみます！
すみません、上記のようにやってみたのですが、実装できません。
アドバイスいただきたいです。
どこが上手くいかなかったのか、教えていただけると助かります
そもそも、onClickの関数の中にタイマー処理、ランダムにお題を出す処理を入れていたのですが、お題とユーザーが入れた文字が1つずつずれてコンソールに出てることに気づき、その処理をするために関数の外にだしました。そうすると、初期化が出来ていないようでOKボタンを押しても、お題は変わらず、ユーザーの記入した文も消えなくなってしまい、そこで今詰まっています。教えていただいた正誤判定なのですが、5回繰り返したあと何も表示されない状態です。
よろしくお願いします。
あなたの回答
tips
プレビュー
