質問編集履歴

2

追記

2019/08/18 05:04

投稿

aae_11
aae_11

スコア178

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コード修正

2019/08/18 05:04

投稿

aae_11
aae_11

スコア178

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/style.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
- <p id="target">click to start</p>
197
+ <h1 id="top_word">click to start</h1>
198
-
198
+
199
- <p class="info">
199
+ <p class="letter_content">
200
-
200
+
201
- Letter count<span id="score">0</span>,
201
+ Letter count:<span id="Letter_label">0</span>,
202
-
202
+
203
- Miss count: <span id="miss">0</span>,
203
+ Miss count:<span id="Letter_miss_label">0</span>,
204
-
204
+
205
- Time left:<span id="timer">0</span>
205
+ Time left:<span id="time_left"></span>
206
+
207
+
206
208
 
207
209
  </p>
208
210
 
209
- <script src="js/main.js"></script>
211
+ <script src="js/typing.js"></script>
210
212
 
211
213
  </body>
212
214