javascript OOP concept issue

Question

i have this simple code :

// You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer
  var renderer;
  var stage;
  var bunnyTexture;
  var bunny;
  var Game= {};
 Game.Init = function() { };
 Game.Init.prototype={
    init:function(){
         renderer= new PIXI.WebGLRenderer(800, 600);
         document.body.appendChild(renderer.view);
        stage= new PIXI.Stage;
        bunnyTexture= PIXI.Texture.fromImage("img/ninja.png");
        bunny= new PIXI.Sprite(bunnyTexture);
        bunny.position.x = 400;
         bunny.position.y = 300;
       stage.addChild(bunny);

 },
  animate:function(){
       bunny.rotation += 0.01;
       renderer.render(stage);
       requestAnimationFrame(this.animate);

  }
}
    requestAnimationFrame(Game.Init.animate);

i am calling the function like this :

   window.onload = function () { Game.Init(); };

a javascript error saying : Argument 1 of Window.requestAnimationFrame is not an object.

Answer 1

Since Game.Init is a constructor function you should initialize object properly with new keyword:

new Game.Init();

Otherwise the context will be global object Window and this.animate is undefined. To help you to detect such a problems I would recommend to use strict mode, which would have failed with error on the very early steps.