82263
  
  
初めて質問を投稿させていただきます。  
Javascriptも勉強してまだ間もない初心者であるため、質問に不備がありましたら申し訳ありません。

ある関数により、1以上のランダムな数値が返ります。  
1からスタートしその数までカウントアップをさせ、それをhtml上に表示させたいのですが、一定の速度ではなくカウントアップしていくにつれて早くカウントアップさせたいです。

しかしどうしても指定した2次関数 y = x^2/100 + 1
(xはカウントアップが完了する時間、yは関数により返ったランダムな数値。)を組み込むことに苦戦しています。

カウントアップは、関数により返ってきた数値の大小にかかわらず、常に上記の関数に従った秒数で完了させます（y = 100 でも y = 1000
でもカウントアップが2を通過する時点では必ず10秒）。

上記カウントアップは、[bustabit](https://www.bustabit.com/play)
というギャンブルのサイトで表示されているようなカウントアップを参考にしています。

実装の方針を助言していただけると幸いです。  
よろしくお願いいたします。

※追記※  
下記コードになりますが、speed変数の数値は最初の代入時点で固定してしまうため当然一定の速度でカウントアップしてしまいます。

[code]

    let num = 1;
    let goal = 500; //本来はランダムな数字
    // y = x**2 / 100 + 1
    // →→→ x = 10 * Math.sqrt(y - 1)
    let speed = 10 * Math.sqrt(goal - 1);
    
    setInterval(function(){
        if(num <= goal){
        document.getElementById("hoge").textContent = num;
        num++;
        }
    },speed);
    
[/code]


CC BY-SA 4.0
2021-09-04T02:47:53.673
82228
2021-09-05T15:35:50.760
2021-09-05T10:43:12.503
47975
47975
question
javascript
カウントアップの速度を指定した2次関数に従って表示させたい


大事なのは、開始時刻と現在時刻の差を取ることです。また、JavaScriptでこういったアニメーションを行うには `setInterval()` よりは
`requestAnimationFrame()` を使いましょう。

[code]

    let goal = 500; //本来はランダムな数字
    const startTime = performance.now();
    
    function runAnimation(currentTime) {
      let x = (currentTime - startTime) / 1000;
      let num = Math.floor(x * x / 100 + 1);
      if (num <= goal) {
        document.getElementById("hoge").textContent = num;
        requestAnimationFrame(runAnimation);
      }
    }
    requestAnimationFrame(runAnimation);
    
[/code]

こういった用途には、通常 `requestAnimationFrame()` を用います。


CC BY-SA 4.0
2021-09-05T15:35:50.760
82263
2021-09-05T15:35:50.760
3475
82228
answer