質問編集履歴
3
文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,98 +1,5 @@
|
|
|
1
1
|
現在タイピングゲームをしているのですが、
|
|
2
2
|
正誤判定の実装が上手くいかず詰まっています。
|
|
3
|
-
正誤判定の実装は、
|
|
4
|
-
お題の文字とuserが記入した文字で１文字ずつ判定します。
|
|
5
|
-
タイピング中の文字と判定するのではなく、タイピング後記入欄に入っている文字と一文字づつ判断します。
|
|
6
|
-
例：お題 チョコ
|
|
7
|
-
user ちょこ
|
|
8
|
-
入力ミス３文字
|
|
9
|
-
|
|
10
|
-
また、５問終わった時点で、文字のミス数によって下記の文が出るようにしたいです。
|
|
11
|
-
0文字：「完璧！」、
|
|
12
|
-
1から3文字:「おしい！」、
|
|
13
|
-
4から8文字:「まだまだです。」、
|
|
14
|
-
9文字以上:「頑張りましょう。」
|
|
15
3
|
|
|
16
4
|
現在お題の文字は一文字ずつsplitで取得できたのですが、userも取得したところ、配列には何も入っていませんでした。
|
|
17
5
|
その２つを取得し比較、if文で分岐という流れはわかりますが、実装が上手く行きません。アドバイスお願いいたします。
|
|
18
|
-
```html
|
|
19
|
-
<body>
|
|
20
|
-
<p id="odai" style="width:500px; height:60px; padding-top:45px; border:solid 2px; text-align:center;"></p>
|
|
21
|
-
<form name="form">
|
|
22
|
-
<p style="text-indent:50px;">↓ここに入力</p>
|
|
23
|
-
<input type="text" id="user" style="width:400px; height:30px; border:solid 2px; margin-left:50px; text-align:center;"></input>
|
|
24
|
-
<br>
|
|
25
|
-
<br>
|
|
26
|
-
<input type="button" id="button" value="ok" onclick="testfunc()" style="width:60px; height:30px; margin-left:200px;"></input>
|
|
27
|
-
</form>
|
|
28
|
-
<p id="timer"></p>
|
|
29
|
-
<p id="kekka"></p>
|
|
30
|
-
</body>
|
|
31
|
-
```
|
|
32
|
-
```JavaScript
|
|
33
|
-
let box = [ //配列でお題を作成
|
|
34
|
-
"キャンディ",
|
|
35
|
-
"チョコ",
|
|
36
|
-
"グミ",
|
|
37
|
-
"クッキー",
|
|
38
|
-
"スナック"
|
|
39
|
-
];
|
|
40
|
-
|
|
41
|
-
let odai = document.getElementById("odai"); //お題の取得
|
|
42
|
-
let user = document.getElementById("user"); //userの記入欄取得
|
|
43
|
-
let button = document.getElementById("button").value; //okボタンの取得
|
|
44
|
-
let kekka = document.getElementById("kekka"); //結果の取得
|
|
45
|
-
let timer = document.getElementById("timer"); //タイマーの取得
|
|
46
|
-
let time = 0; //タイム初期化
|
|
47
|
-
let countdown = null; //countdown初期化
|
|
48
|
-
let question_num = 0; //問題数をカウント
|
|
49
|
-
let ansArray = []; //回答を入れる配列
|
|
50
|
-
let odaiArray = []; //お題を入れる配列
|
|
51
|
-
let count_ans = 0; //正解数のカウント
|
|
52
|
-
let answer = 0; //answerを初期化
|
|
53
|
-
let miss = 0;
|
|
54
|
-
|
|
55
|
-
function testfunc() {
|
|
56
|
-
ansArray[question_num] = user.value;
|
|
57
|
-
odaiArray[question_num] = odai.textContent;
|
|
58
|
-
question_num++; //問題数のカウントを一つずつ増やす
|
|
59
|
-
|
|
60
|
-
time = 11; //クリック時も、値を戻す 1秒誤差ありだから11秒
|
|
61
|
-
if(countdown){
|
|
62
|
-
clearInterval(countdown); //処理が二重にならないようボタン押下時に一旦タイマークリア
|
|
63
|
-
}
|
|
64
|
-
countdown = setInterval(function() { //setInterval()で1秒ずつ表示
|
|
65
|
-
timer.textContent ='制限時間：' + --time + '秒'; //textContentで文字列と定数を組み合わせた文章を1秒おきに更新する
|
|
66
|
-
for(let i = 0; i < 5;i++){
|
|
67
|
-
if(time <= 0){
|
|
68
|
-
time = 0; //カウントが終了したら、変数の値を戻す
|
|
69
|
-
clearInterval(countdown); //0秒になったらタイマークリア
|
|
70
|
-
user.value = ""; //時間切れの時は、user入力欄とお題を空欄にする
|
|
71
|
-
odai.textContent = "";
|
|
72
|
-
}else if(question_num == 6){
|
|
73
|
-
clearInterval(countdown); //６問目になったらタイマークリア
|
|
74
|
-
timer.textContent = ""; //タイマー表示を消す
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}, 1000);
|
|
78
|
-
|
|
79
|
-
let rnd = Math.floor(Math.random() * (box.length -1)); //boxの配列から１個少ない数を最大値とした乱数を作成 box.lengthはboxの中身分だけという意味
|
|
80
|
-
tmp = box[rnd]; //変数ｔｍｐにboxの添字で[rnd]を入れる→ランダムに文章選択、文字列として利用できる
|
|
81
|
-
box.splice(rnd,1); //rndから該当する配列をspliceで消去.表示
|
|
82
|
-
odai.textContent = tmp; //tmpをお題欄に出力
|
|
83
|
-
document.form.reset(); //form内の要素をリセット
|
|
84
|
-
|
|
85
|
-
answer = () => { //全問入力した段階で、正解か判断する
|
|
86
|
-
let odai_num = tmp.split(""); //odai_numの中にランダムに一つづつお題が出てくるtmpにsplitで文字を１文字ずつ分解し配列にする
|
|
87
|
-
console.log(odai_num);
|
|
88
|
-
let user_num = user.value.split(""); //user_numの中に
|
|
89
|
-
console.log(user_num);
|
|
90
|
-
if(odai_num == user_num){
|
|
91
|
-
console.log("あ");
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
answer();
|
|
95
|
-
}
|
|
96
|
-
testfunc();
|
|
97
|
-
|
|
98
|
-
```
|
2
コード
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
let user_num = user.value.split(""); //user_numの中に
|
|
89
89
|
console.log(user_num);
|
|
90
90
|
if(odai_num == user_num){
|
|
91
|
-
console.log("
|
|
91
|
+
console.log("あ");
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
answer();
|
1
文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
また、５問終わった時点で、文字のミス数によって下記の文が出るようにしたいです。
|
|
11
11
|
0文字：「完璧！」、
|
|
12
|
-
1
|
|
12
|
+
1から3文字:「おしい！」、
|
|
13
|
-
4
|
|
13
|
+
4から8文字:「まだまだです。」、
|
|
14
14
|
9文字以上:「頑張りましょう。」
|
|
15
15
|
|
|
16
16
|
現在お題の文字は一文字ずつsplitで取得できたのですが、userも取得したところ、配列には何も入っていませんでした。
|