質問編集履歴
2
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -241,3 +241,233 @@
|
|
241
241
|
ここの部分を解決する為、ご助言頂けましたら幸いです。
|
242
242
|
|
243
243
|
よろしくお願いします。
|
244
|
+
|
245
|
+
|
246
|
+
|
247
|
+
**追記です**
|
248
|
+
|
249
|
+
以下のコードを参考にして作ってみたのですが、以下のコードではsetTimeout関数によって制限時間を作成する処理が可能となっております。
|
250
|
+
|
251
|
+
以下のコードでは、可能で自分のコードではできない理由が分からないため、原因を教えていただければ幸いです。
|
252
|
+
|
253
|
+
※以下のコードでは、組み込んでいるHTMLファイルが自分のJSファイルとは異なります。
|
254
|
+
|
255
|
+
```
|
256
|
+
|
257
|
+
'use strict';
|
258
|
+
|
259
|
+
|
260
|
+
|
261
|
+
{
|
262
|
+
|
263
|
+
|
264
|
+
|
265
|
+
const words = [
|
266
|
+
|
267
|
+
'apple',
|
268
|
+
|
269
|
+
'sky',
|
270
|
+
|
271
|
+
'blue',
|
272
|
+
|
273
|
+
'middle',
|
274
|
+
|
275
|
+
'set',
|
276
|
+
|
277
|
+
];
|
278
|
+
|
279
|
+
|
280
|
+
|
281
|
+
let word = words[Math.floor(Math.random() * words.length)];
|
282
|
+
|
283
|
+
let loc;
|
284
|
+
|
285
|
+
let score;
|
286
|
+
|
287
|
+
let miss;
|
288
|
+
|
289
|
+
const timeLimit = 3 * 1000;
|
290
|
+
|
291
|
+
let startTime;
|
292
|
+
|
293
|
+
const target = document.getElementById('target');
|
294
|
+
|
295
|
+
const scoreLabel = document.getElementById('score');
|
296
|
+
|
297
|
+
const missLabel = document.getElementById('miss');
|
298
|
+
|
299
|
+
const timerLabel = document.getElementById('timer');
|
300
|
+
|
301
|
+
let isPlaying = false;
|
302
|
+
|
303
|
+
|
304
|
+
|
305
|
+
|
306
|
+
|
307
|
+
function updateTarget(){
|
308
|
+
|
309
|
+
let placeholder = '';
|
310
|
+
|
311
|
+
|
312
|
+
|
313
|
+
for(let i = 0; i < loc; i++){
|
314
|
+
|
315
|
+
placeholder += '_';
|
316
|
+
|
317
|
+
}
|
318
|
+
|
319
|
+
target.textContent = placeholder + word.substring(loc);
|
320
|
+
|
321
|
+
}
|
322
|
+
|
323
|
+
|
324
|
+
|
325
|
+
function showResult(){
|
326
|
+
|
327
|
+
const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100;
|
328
|
+
|
329
|
+
alert(`${score} letters, ${miss} misses, ${accuracy . toFixed(2)}% accuracy!`);
|
330
|
+
|
331
|
+
}
|
332
|
+
|
333
|
+
|
334
|
+
|
335
|
+
function updateTimer(){
|
336
|
+
|
337
|
+
const timeLeft = startTime + timeLimit - Date.now();
|
338
|
+
|
339
|
+
console.log(timeLeft);
|
340
|
+
|
341
|
+
timerLabel.textContent = (timeLeft / 1000).toFixed(2);
|
342
|
+
|
343
|
+
|
344
|
+
|
345
|
+
|
346
|
+
|
347
|
+
const timeoutId = setTimeout(() => {
|
348
|
+
|
349
|
+
updateTimer();
|
350
|
+
|
351
|
+
},10);
|
352
|
+
|
353
|
+
|
354
|
+
|
355
|
+
if(timeLeft < 0){
|
356
|
+
|
357
|
+
isPlaying = false;
|
358
|
+
|
359
|
+
clearTimeout(timeoutId);
|
360
|
+
|
361
|
+
setTimeout(() => {
|
362
|
+
|
363
|
+
showResult();
|
364
|
+
|
365
|
+
},100);
|
366
|
+
|
367
|
+
|
368
|
+
|
369
|
+
timerLabel.textContent = '0.00';
|
370
|
+
|
371
|
+
target.textContent = 'click to replay';
|
372
|
+
|
373
|
+
}
|
374
|
+
|
375
|
+
}
|
376
|
+
|
377
|
+
|
378
|
+
|
379
|
+
window.addEventListener('click', () => {
|
380
|
+
|
381
|
+
if(isPlaying === true){
|
382
|
+
|
383
|
+
return;
|
384
|
+
|
385
|
+
}
|
386
|
+
|
387
|
+
|
388
|
+
|
389
|
+
isPlaying = true;
|
390
|
+
|
391
|
+
|
392
|
+
|
393
|
+
loc = 0;
|
394
|
+
|
395
|
+
score = 0;
|
396
|
+
|
397
|
+
|
398
|
+
|
399
|
+
miss = 0;
|
400
|
+
|
401
|
+
|
402
|
+
|
403
|
+
scoreLabel.textContent = score;
|
404
|
+
|
405
|
+
missLabel.textContet = miss;
|
406
|
+
|
407
|
+
word = words[Math.floor(Math.random() * words.length)];
|
408
|
+
|
409
|
+
|
410
|
+
|
411
|
+
|
412
|
+
|
413
|
+
updateTarget();
|
414
|
+
|
415
|
+
startTime = Date.now();
|
416
|
+
|
417
|
+
console.log(startTime);
|
418
|
+
|
419
|
+
updateTimer();
|
420
|
+
|
421
|
+
});
|
422
|
+
|
423
|
+
|
424
|
+
|
425
|
+
window.addEventListener('keyup',e =>{
|
426
|
+
|
427
|
+
if(isPlaying !== true){
|
428
|
+
|
429
|
+
return;
|
430
|
+
|
431
|
+
}
|
432
|
+
|
433
|
+
if(e.key === word[loc]){
|
434
|
+
|
435
|
+
loc++;
|
436
|
+
|
437
|
+
|
438
|
+
|
439
|
+
if(loc === word.length){
|
440
|
+
|
441
|
+
word = words[Math.floor(Math.random() * words.length)];
|
442
|
+
|
443
|
+
loc = 0;
|
444
|
+
|
445
|
+
}
|
446
|
+
|
447
|
+
|
448
|
+
|
449
|
+
score++;
|
450
|
+
|
451
|
+
scoreLabel.textContent = score;
|
452
|
+
|
453
|
+
updateTarget();
|
454
|
+
|
455
|
+
}else{
|
456
|
+
|
457
|
+
miss++;
|
458
|
+
|
459
|
+
missLabel.textContent = miss;
|
460
|
+
|
461
|
+
}
|
462
|
+
|
463
|
+
|
464
|
+
|
465
|
+
});
|
466
|
+
|
467
|
+
|
468
|
+
|
469
|
+
|
470
|
+
|
471
|
+
}
|
472
|
+
|
473
|
+
```
|
1
htmlコード修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -186,27 +186,29 @@
|
|
186
186
|
|
187
187
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
188
188
|
|
189
|
-
<title>Typing Game</title>
|
190
|
-
|
191
|
-
<link rel="stylesheet" href="css/
|
189
|
+
<link rel="stylesheet" href="css/typing.css">
|
190
|
+
|
191
|
+
<title>Document</title>
|
192
192
|
|
193
193
|
</head>
|
194
194
|
|
195
195
|
<body>
|
196
196
|
|
197
|
-
<
|
197
|
+
<h1 id="top_word">click to start</h1>
|
198
|
-
|
198
|
+
|
199
|
-
<p class="
|
199
|
+
<p class="letter_content">
|
200
|
-
|
200
|
+
|
201
|
-
Letter count<span id="
|
201
|
+
Letter count:<span id="Letter_label">0</span>,
|
202
|
-
|
202
|
+
|
203
|
-
Miss count:
|
203
|
+
Miss count:<span id="Letter_miss_label">0</span>,
|
204
|
-
|
204
|
+
|
205
|
-
Time left:<span id="time
|
205
|
+
Time left:<span id="time_left"></span>
|
206
|
+
|
207
|
+
|
206
208
|
|
207
209
|
</p>
|
208
210
|
|
209
|
-
<script src="js/
|
211
|
+
<script src="js/typing.js"></script>
|
210
212
|
|
211
213
|
</body>
|
212
214
|
|