質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

setTimeout関数を用いた制限時間の処理

aae_11
aae_11

総合スコア176

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

-1評価

0クリップ

391閲覧

投稿2019/08/18 00:28

編集2019/08/18 05:04

以下のコードは、タイピングゲーム作成中のコードなのですが、うまくいかない点があり、質問させて貰いました。

'use strict'; { let words = ['blue','apple','sky','middle','set']; let word; let isPlaying = false; let loc = 0; let target; let letter_count = 0; let miss_count = 0; let miss_label; let letter_label; let timeLimit; timeLimit = 3 * 1000; let start_time; let time_label = document.getElementById('time_left'); window.addEventListener('click',() => { if(isPlaying == true){ return; } isPlaying = true; letter_label = document.getElementById('Letter_label'); miss_label = document.getElementById('Letter_miss_label'); target = document.getElementById('top_word'); word = words[Math.floor(Math.random() * words.length)]; target.textContent = word; start_time = Date.now(); const time_out_id = setTimeout(() => { let time_left = start_time + timeLimit - Date.now(); time_label.textContent = (time_left / 1000) .toFixed(2); },10); console.log(time_out_id); }); window.addEventListener('keyup', e => { if(isPlaying === true){ let placeholder = ''; if(e.key == word[loc]){ loc++; letter_count += 1; console.log(letter_count); letter_label.textContent = letter_count; for(let i = 0; i < loc; i++){ placeholder += '_'; } console.log(word.substring(loc)); console.log(placeholder); target.textContent = placeholder + word.substring(loc); }else{ miss_count++; miss_label.textContent = miss_count; } if(loc == word.length){ word = words[Math.floor(Math.random() * words.length)]; target.textContent = word; loc = 0; } } }); }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/typing.css"> <title>Document</title> </head> <body> <h1 id="top_word">click to start</h1> <p class="letter_content"> Letter count:<span id="Letter_label">0</span>, Miss count:<span id="Letter_miss_label">0</span>, Time left:<span id="time_left"></span> </p> <script src="js/typing.js"></script> </body> </html>

うまくいかない点は、以下の部分です。

const time_out_id = setTimeout(() => { let time_left = start_time + timeLimit - Date.now(); time_label.textContent = (time_left / 1000) .toFixed(2); },10);

ここの部分は制限時間を設定する際のコードなのですが、setTimeout関数がうまく作動しておらず、console.log(time_left)で確認した所、一度しか出力しないため、時間が減少しないといった状態になっています。
ここの部分を解決する為、ご助言頂けましたら幸いです。
よろしくお願いします。

追記です
以下のコードを参考にして作ってみたのですが、以下のコードではsetTimeout関数によって制限時間を作成する処理が可能となっております。
以下のコードでは、可能で自分のコードではできない理由が分からないため、原因を教えていただければ幸いです。
※以下のコードでは、組み込んでいるHTMLファイルが自分のJSファイルとは異なります。

'use strict'; { const words = [ 'apple', 'sky', 'blue', 'middle', 'set', ]; let word = words[Math.floor(Math.random() * words.length)]; let loc; let score; let miss; const timeLimit = 3 * 1000; let startTime; const target = document.getElementById('target'); const scoreLabel = document.getElementById('score'); const missLabel = document.getElementById('miss'); const timerLabel = document.getElementById('timer'); let isPlaying = false; function updateTarget(){ let placeholder = ''; for(let i = 0; i < loc; i++){ placeholder += '_'; } target.textContent = placeholder + word.substring(loc); } function showResult(){ const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100; alert(`${score} letters, ${miss} misses, ${accuracy . toFixed(2)}% accuracy!`); } function updateTimer(){ const timeLeft = startTime + timeLimit - Date.now(); console.log(timeLeft); timerLabel.textContent = (timeLeft / 1000).toFixed(2); const timeoutId = setTimeout(() => { updateTimer(); },10); if(timeLeft < 0){ isPlaying = false; clearTimeout(timeoutId); setTimeout(() => { showResult(); },100); timerLabel.textContent = '0.00'; target.textContent = 'click to replay'; } } window.addEventListener('click', () => { if(isPlaying === true){ return; } isPlaying = true; loc = 0; score = 0; miss = 0; scoreLabel.textContent = score; missLabel.textContet = miss; word = words[Math.floor(Math.random() * words.length)]; updateTarget(); startTime = Date.now(); console.log(startTime); updateTimer(); }); window.addEventListener('keyup',e =>{ if(isPlaying !== true){ return; } if(e.key === word[loc]){ loc++; if(loc === word.length){ word = words[Math.floor(Math.random() * words.length)]; loc = 0; } score++; scoreLabel.textContent = score; updateTarget(); }else{ miss++; missLabel.textContent = miss; } }); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。