1

我正在玩弄一些画布和简单的动画——我有一个简单的类来渲染我的地图。

 var Map = Class.extend({
        init: function () {
            //Setup stuff       
        },
        DrawMap: function (canvas, camera) {
            //Render the map
        }
    });

我的核心应用程序代码也在课堂上

 var App = Class.extend({

        init: function (canvas) {
             //Load Stuff
        },

        GameLoop: function () {
            this.map.DrawMap(this.canvas, this.camera);
        }

    });

现在使用下面的代码可以正常工作并且我的地图可以渲染。

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    setInterval(function () {
        app.GameLoop();
    }, 100);

但是 - 我知道这并不理想，我正在尝试转换为这个（http://paulirish.com/2011/requestanimationframe-for-smart-animating/）所以我调整了我的代码。

我将上面的代码添加到我的索引页面

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

并更改了我的初始化代码（用于使用 Set Interval to）

    var canvasMap = document.getElementById('cmap');

    app = new App(canvasMap);

    requestAnimFrame(function() { app.GameLoop(); });

现在基于一些调试，这里发生的是 App.GameLoop 方法被调用一次（我在游戏循环方法中添加了一个日志）。然后不再调用。我想这是根据我对 JS 对象的经验来完成的。我的背景是 C#，所以这对我来说相对较新。

为什么这只会被调用一次？

4

1 回答 1

0

I've fixed this, I missed the Recursion.

   var initAll = function () {
        $(document).ready(function() {

            var canvasMap = document.getElementById('cmap');

            app = new App(canvasMap);
            mainLoop();
        });
    };

    var mainLoop  = function() {
               requestAnimFrame(mainLoop);
                app.GameLoop();
    };
于 2012-06-16T13:58:30.570 回答