2

我有一个 15 个 div 移动的 javascript 游戏。它在我的台式机和我的 iPhone 上运行流畅，但当我在 Galaxy S3 上测试它时，它看起来真的很生涩。奇怪的是，它在两台设备上都以 60 FPS 的速度运行。如何在 Galaxy S3 上使其流畅？就像它正在运行代码以每秒 60 次更改 div 的“左侧”，但它并不总是明显地做到这一点。

我已经尝试将 transform3d 添加到 div 中，但这只会让它变得更糟。

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

使用 css 转换而不是 js 来移动东西。CSS 过渡是 GPU 优化的，而 js 是所有 CPU。我可以为此推荐http://rekapi.com/作为 api。

于 2013-08-15T02:02:20.720 回答