反応時間を測定するシンプルなボタンクリックゲーム。どのように私はjavascriptで最も速い時間を節約するのですか

var bestTime = 0;

   if (timeTaken > bestTime) { 

        bestTime = timeTaken; 

        document.getElementById("best").innerHTML = bestTime + "s" 

       } else { 

        document.getElementById("best").innerHTML = timeTaken + "s" 

       }

広い範囲：

var end = new Date().getTime(); 

      var timeTaken = (end - start)/1000; 

      document.getElementById("timer").innerHTML = timeTaken + "s"; 


       var bestTime = 0 ; 


       if (timeTaken > bestTime) { 

        bestTime = timeTaken; 

        document.getElementById("best").innerHTML = bestTime + "s" 

       } else { 

        document.getElementById("best").innerHTML = timeTaken + "s" 

       }

完全なプログラムは：

<head> 

    <title>Reaction Timer</title> 

    <style type="text/css"> 

     #topcontainer { 

      width: 100%; 
      height: 150px; 


     } 



     #shape { 

      width: 200px; 
      height: 200px; 
      background-color: ; 
      display: none; 
      position: relative; 


     } 







    </style> 

</head> 

<body> 

    <div id="topcontainer"> 

     <h1>Test Your Reactions!</h1> 

     <h2>Click on the boxes and circles as quickly as you can!</h2> 

     <h3>Your time: <span id="timer"></span> </h3> 

     <p>Best time: <span id="best"> </span> </p> 


    </div> 



    <div id="shape"></div> 






    <script type="text/javascript"> 

     var start = new Date().getTime(); 


     function getRandomColor() { 
      var letters = 'ABCDEF'; 
      var color = '#'; 
      for (var i = 0; i < 6; i++) { 
      color += letters[Math.floor(Math.random() * 16)]; 
      } 
      return color; 
     } 

     function makeShapeAppear() { 

      var top = Math.random() * 400; 

      var left = Math.random() * 400; 

      var width = Math.random() * 200; 

      if (Math.random() > 0.5) { 

       document.getElementById("shape").style.borderRadius = "50%"; 

      } else { 

       document.getElementById("shape").style.borderRadius = "0%"; 

      } 

      document.getElementById("shape").style.backgroundColor = getRandomColor(); 

      document.getElementById("shape").style.top = top + "px"; 

      document.getElementById("shape").style.left = left + "px"; 

      document.getElementById("shape").style.height = width + "px"; 

      document.getElementById("shape").style.width = width + "px"; 

      document.getElementById("shape").style.display = "block"; 

      start = new Date().getTime(); 

     } 

     function appearAfterDelay() { 

       setTimeout(makeShapeAppear, Math.random() * 2000); 

     } 

      appearAfterDelay(); 

     document.getElementById('shape').onclick = function() { 

      document.getElementById("shape").style.display = "none"; 

      var end = new Date().getTime(); 

      var timeTaken = (end - start)/1000; 

      document.getElementById("timer").innerHTML = timeTaken + "s"; 


       var bestTime = 0 ; 


       if (timeTaken > bestTime) { 

        bestTime = timeTaken; 

        document.getElementById("best").innerHTML = bestTime + "s" 

       } else { 

        document.getElementById("best").innerHTML = timeTaken + "s" 

       } 

      appearAfterDelay(); 


      } 










    </script> 



</body>

出典

2017-05-02 gN00ber

Stacへようこそkオーバーフロー！ [ask]をお読みください。重要なフレーズ：「検索と研究」と「あなたがそれを自分で解決することを妨げた困難を説明する」 –

https://www.w3schools.com/html/html5_webstorage.aspのようにローカルにPCに保存するか、Webサーバーに投稿してデータベースまたはファイル – user2202098

に保存するだけで、なぜlocalStorageに保存しないのですか。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage – Korgrue

問題はあなたにVAR bestTimeを設定することですクリック機能したがって、関数の終わりに変数はunsetを返します。あなたは、単にあなたの<script>タグの先頭に

var bestTime = 0 ;

を移動することでこの問題を解決することができます。

実際のスコアがbestScoreよりも大きい場合は、なぜbestScoreが変更されるのですか？ 0.967sを作成し、トップスコアが0.678sの場合、なぜベストスコアが0.967sに変わるのですか？あなたはイースリーできるユーザーのコンピュータ上で最高の時間を節約したい場合は修正のために、この変更は、このライン

で

timeTaken > bestTime

timeTaken < bestTime

は、だからあなたの最終if条件は

if (timeTaken < bestTime || bestTime == 0) { 
    bestTime = timeTaken; 
    document.getElementById("best").innerHTML = bestTime + "s" 
}

になりますjs-cookieという名前のライブラリを使用してください。そうすれば、ユーザーはあなたのゲームに戻ってくるたびに、彼は一番良い結果を見ることができます。だから、

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"></script>

とJavaScriptで

if (timeTaken < bestTime || bestTime == 0) { 
     bestTime = timeTaken; 
     document.getElementById("best").innerHTML = bestTime + "s"; 
     Cookies.set('besttime', bestTime, { expires: 7 }); 
}

そして<script>タグの先頭に追加することは

var bestTime = 0; 
if (typeof Cookies.get('besttime') !== 'undefined') { 
     bestTime = Cookies.get('besttime'); 
}

クッキーがためにいくつかのブラウザために動作していない場合は心配しないでくださいになりますセキュリティプロトコルは、ローカルファイルでクッキーを保存することを許可していませんプロトコル

出典

2017-05-02 16:02:56 FelixFrog

反応時間を測定するシンプルなボタンクリックゲーム。どのように私はjavascriptで最も速い時間を節約するのですか

答えて

関連する問題