Question

在我自己的画布上练习我想要制作的游戏。

所以我让一切都运转起来并决定给我的游戏提供自己的对象（我已经拥有了玩家对象等等）。我有一堆注释掉的东西我稍后会修复。但我现在无法让RAF工作。我用requestAnimationFrame(this.animate)得到的第一个错误我用谷歌搜索并修复了。但是这个Function.prototyping.bind对我不起作用，因为我将Uncaught TypeError: Cannot read property 'bind' of undefined (anonymous function)视为错误。

Javascript对我来说相当新鲜（我有点决定我因为很多理由而离开了）。任何帮助将不胜感激。

Game.prototype.animate = function(){
     var that = this;
     setTimeout(function() {

     globalAnimationCancel = requestAnimationFrame(this.animate.bind(this));

//     this.animateObstacles();
//    this.animatePlayer();

//     animatePlayer();
         this.isCollision();
//         this.isLevelUp();
//         this.th

//     isCollision();
//     isLevelUp();
//     thePointCounter.update();
     }, 1000 / fps);
 }

Answer 1

考虑调用发生的位置; setTimeout正在调用匿名函数，您可以在其中引用this。但是，在匿名函数中，this将是window（或未定义），因此没有this.animate所以那里不能是属性 bind 。

将这些变量定义为setTimeout之外的变量，以便您可以使用它来访问它们而不使用this，或设置var foo = this并访问所有内容，例如foo.animate。 that。您似乎已经使用Game.prototype.animate = function(){ var bound_render; function render() { console.log(this); // for demo // your code to animate goes here } bound_render = render.bind(this); function anim_loop() { requestAnimationFrame(bound_render); if (true) // some end condition instead of globalAnimationCancel globalAnimationCancel = setTimeout(anim_loop, 1000 / fps); } globalAnimationCancel = setTimeout(anim_loop, 1000 / fps); }变量执行此操作但未使用它。

您可以通过尽可能多地移出功能循环来进一步优化

bound_render

您可以从函数表达式创建bind，但我觉得将anim_loop步骤分开会提高可读性。与{{1}}类似，可以作为命名函数表达式直接传递到 setTimeout

requestAnimationFrame的Function.prototype.bind导致不可读的属性

1 个答案: