Javascriptゲームループ

JavaScriptループに関するいくつか質問があります。

質問:

  • JavaScriptループでブラウザがフリーズするのはなぜですか?
  • 描画が遅いのはなぜですか?1msごとに描画が1回実行されていても、最も簡単な描画です!
  • 解決策は何ですか?フラッシュが死んでいる、今何をしているの?

あなた自身のために試みるキャンバスコードはここにあります:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    

    <script type="text/javascript">

        var c = document.getElementById( 'c' );

        ctx = c.getContext( '2d' );

        var x = 100;

        ctx.fillStyle= '#f00';

        function loop()
        {
            ctx.fillRect( x, 100, 20, 20 );

            ++x;
        }

        setInterval( loop, 1 );
    </script>
</body>
</html>
ベストアンサー

なぜJavaScriptループがブラウザをフリーズさせるのですか(C ++では起こりません)

JavaScriptはシングルスレッドです。
DOMの状態は、JavaScriptコードが実行されている間、または競合状態が発生している間は変更できません。これは、描画/リフローを行わないことを意味します。

描画が遅いのはなぜですか?それは1msごとに1回の描画で実行されていても、最も簡単なことです。

1msで動作していないので、10msで動作しています。ブラウザでは、それをきちんとループすることができないからです。

解決策は何ですか?フラッシュが死んでいる、今何をするの?

requestAnimationFrameを使用し、60
FPSでゲームを実行してください。なぜもっと必要なのでしょうか?

Example
using (webkit) requestAnimationFrame
which runs smoothly for
me.

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です