2

15 個の div が動き回る JavaScript ゲームがあります。デスクトップと iPhone ではスムーズに動作しますが、Galaxy S3 でテストすると、非常にぎこちなく見えます。奇妙なことに、両方のデバイスで 60 FPS で動作します。Galaxy S3でスムーズにするにはどうすればよいですか? コードを実行してdivの「左」を1秒あたり60回変更しているようですが、常に目に見えるとは限りません。

divにtransform3dを追加しようとしましたが、それはさらに悪化します。

http://curtastic.com/test5.html

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body style='margin:0;width:640px;'>
        <div id=fps></div>
        <style>
            .block {
                -webkit-transform: translate3d(0, 0, 0);
                -webkit-backface-visibility: hidden;
                -webkit-perspective: 1000;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            var blocks = [];
            var angle=0;

            var fpsFrames = 0;
            var fpsTime = 0;

            function gameLoop() {
                var now = new Date();
                fpsFrames++;
                if (now - fpsTime >= 1000) {
                    $('#fps').html("FPS: "+fpsFrames);
                    fpsFrames = 0;
                    fpsTime = now;
                }

                var block;
                for(var i in blocks) {
                    block = blocks[i];
                    block.x += 3;
                    if (block.x >= $(window).width()-50) {
                        block.x = 0;
                    }
                    block.canvas.css('left', block.x);
                    block.canvas.css('top', block.y);
                }
            }

            $(document).ready(function() {
                var block;
                for(var i=0; i<15; i++) {
                    $("body").append("<div id=block"+i+" style='position:absolute;width:33px;height:33px;background:green' class=block></div>")
                    block = [];
                    block.canvas = $('#block'+i);
                    block.x = Math.random()*($(window).width()-50);
                    block.y = Math.random()*($(window).height()-50);
                    blocks[i] = block;
                }

                window.requestAnimFrame = (function(){
                  return  window.requestAnimationFrame       ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame    ||
                          function( callback ){
                            window.setTimeout(callback, 1000 / 60);
                          };
                })();


                (function animloop() {
                    requestAnimFrame(animloop);
                    gameLoop();
                })();

            });

        </script>
    </body>
</html>
4

1 に答える 1

2

物を動かすには、js ではなく CSS トランジションを使用します。CSS トランジションは GPU に最適化されていますが、js はすべて CPU です。このための API としてhttp://rekapi.com/をお勧めします。

于 2013-08-15T02:02:20.720 に答える