Question

我想知道t-rex游戏（谷歌）实际上是如何用这个code制作动画的。具体来说，我看了一下代码并试图理解它的动画效果。据我所知，应该反复调用更新函数（源文件中的原型）以使动画发生。但是，我几乎看不到任何调用更新功能的东西。这个源代码是用自调用函数编写的，在代码的开头有一个名为Runner的构造函数。我的问题是这个构造函数是自己调用的吗？

总结一下我的问题，

使用此代码，任何人都可以解释动画实际上是如何工作的吗？对于Runner的原型有什么办法（如果你看到链接上的源代码，你可以找到它）从浏览器或其他任何地方调用..

并且，当自调用函数自己启动时，构造函数或内部函数会同时被调用吗？

先谢谢，有人对此有所了解。

Answer 1

我想我已经明白了。

因此，update方法实际上以相当迂回的方式递归调用自身。

在最新的更新中，您有这些陈述

if (!this.crashed) {
  this.tRex.update(deltaTime);
  this.raq();
}

使用raq方法可以实现神奇。它是什么再次调用更新方法。 requestAnimationFrame是一种浏览器方法，在动画完成之前调用回调来请求恢复屏幕。因此，再次调用update方法，再次调用raq再次调用update等等...

raq: function() {
    if (!this.drawPending) {
        this.drawPending = true;
        this.raqId = requestAnimationFrame(this.update.bind(this));
    }
},

供参考：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

关于应用程序实际启动的方式，我认为它与注释和闭包编译器有关。 Runner上的@export注释意味着它的实例是由Self Invoker Function创建的。

然后构造函数调用loadImages调用init调用update

javascript的动画如何在Google T-rex游戏中运行？

1 个答案: