Function question

[Rafaelx]

Hey guys I have an issue, I'm trying to do a flappy bird kind of game but when I try to add the blocks I keep getting a undefined error when calling the first function:

 

  addOneBloque: function(x, y) {
        
        this.bloque = this.add.sprite(this.x,this.y,'bloque');
        
        this.bloques.add(this.bloque);
        
         this.bloque.enableBody = true;
        this.bloque.physicsBodyType = Phaser.Physics.ARCADE;
        
        this.bloque.velocity.y = -200;
        
        this.bloque.checkWorldBounds = true;
        this.bloque.outOfBoundsKill = true;
        
    },
    
    addRowOfBloques: function() {
        
        this.hole = Math.floor(Math.random() * 5) + 1;
        
        for (this.i = 0;this.i < 8;this.i++)
            if (this.i != this.hole && this.i != this.hole + 1)
                this.addOneBloque(this.i * 60 + 10, 200);
        
    },

and below are my group and timer from the create funtion:

        //Bloques
        this.bloques = this.add.group();
        this.timer = this.time.events.loop(1500, this.addRowOfBloques);

Any Ideas why would I get this error?

BasicGame.Game.prototype.addRowOfBloques()
 Game.js:157
c.Timer.prototype.update()
 phaser.min.js:18
c.Time.prototype.update()
 phaser.min.js:18
c.Game.prototype.update()
 phaser.min.js:11
c.RequestAnimationFrame.prototype.updateRAF()
 phaser.min.js:17
c.RequestAnimationFrame.prototype.start/this._onLoop()

it is very weird I'm using intel xdk but I still get the error when I try the game on the browser. Any suggestions what did I do wrong?

[mattstyles]

Yeah, its looks like you're trying to add a function to a loop, I'm not sure how `this.time.events.loop` calls the callbacks but often iterators in JS (by design) apply their own scope (same as adding event listeners to DOM nodes). This is an inherent problem with smushing classical methods into JS.

Do what Azrael suggests but also try this:

this.timer = this.time.events.loop(1500, this.addRowOfBloques.bind( this ) );

If you bind that function then `this` inside it will probably be what you think it should be. Without more info it's impossible to clarify and there are other ways of binding a function, this is just a smoke-test as a lot of people seem to get this wrong with JS.

 

[mattstyles]

@AzraelTycka

For loops don't affect scope so I think that call will be ok.

[mattstyles]

@AzraelTycka

Nope, the function call inside the for loop doesnt slap a new scope on the stack, as the exterior function is bound to `game` thats the scope that the interior function will execute in. If that loop used a forEach or map or reduce or other scope mutating function then it'd error with the type error (or maybe reference error), but a for loop wont.

I knocked up a quick fiddle here, open up the console to see results, you only have to bind the exterior function to get scope how you want it.

I'm not suggesting this is the best way though, every day I seem to edge closer to the 'this is evil' camp.

[AzraelTycka]

@mattstyles

Oh I see now, definitely my bad I tested it for myself in jsfiddle and it worked as I mentioned but I thought his functions were out of the scope without thinking. Well anyway he shouldn't probably need bind at all in this case. I'm going back underneath the rock I was found... Thank you.

@Rafaelx

addOneBluque accepts x and y as arguments but you don't use them inside the function you sure yo uwant to span sprite on this.x and this.y instead of x and y. Though it has nothing to do with your problem I guess :-).

Well I just copied your code and adjusted it for my purposes and it worked ok no errors and timer went off correctly.