callBack function problem with callAll group in Prototype

[ollo]

Hi every body, 

 

I am working on a school project. It's deminor game using Phaser.

First I put all my script in only one file, and now I would like to use JS prototype for a better organisation.

 

I have a class wich create a deminor, but I have a problem on the click event on my square group.

 

Here my Deminor protoype :

var Demineur = function (game, width, height){	this.game = game ;	this.width = width ;	this.height = height ;	this.positions = [] ;	this.allSquare = [] ;	this.explosion ;	//console.log("Je suis dans Démineur !!!")};Demineur.prototype.create = function(){	this.randomValues();	this.addToGame();	this.setExplosion();};Demineur.prototype.randomValues = function(){    for(x=0 ; x<this.height ; x++){        for(y=0 ; y<this.width ; y++){            this.positions.push({ x:x*44 , y:y*44 , value:Math.floor((Math.random() * 10) + 1) });        }    }};Demineur.prototype.addToGame = function(){	// Gestion des cases du démineur    this.allSquare = this.game.add.group();    for( u=0 ; u<this.positions.length ; u++){        this.allSquare.create( this.positions[u].x, this.positions[u].y, "cases" );    }    this.allSquare.setAll("inputEnabled",true);    this.allSquare.setAll("input.useHandCursor",true);    this.allSquare.callAll('events.onInputDown.add', 'events.onInputDown', this.changeSquare);    console.log(this);};Demineur.prototype.changeSquare = function(item){	item.destroy() ;	px = item.x ;	py = item.y ;	console.log(this);	value = this.getRowByPosition(px, py,"value");	//this.randomValues();	if (value==10){	    this.explosion.reset(px+22, py+22);	    this.explosion.alpha = 1 ;	    this.boatSpeed = 40 ;	    this.explosion.animations.play('Boom', 10, false,true);	    this.game.time.events.add(Phaser.Timer.SECOND*28/10, activeBoat, this);	    	    this.allCases.create(px, py, 'cases', 0);	    index = this.getRowByPosition(px, py,"index");	    this.positions[index].value = 11 ;	}else{	    this.allCases.create(px, py, 'cases', value);	}};Demineur.prototype.getRowByPosition = function(x,y,row){	for( i=0 ; i<this.positions.length ; i++){        if (this.positions[i].x == x && this.positions[i].y == y){            switch(row){                case "index":                    return i ;                    break;                case "value":                    return this.positions[i].value ;                    break;            }        }    }};

My create function :

create: function(){        demi = new Demineur(game,5,5);			demi.create();}

And my console.log(this) return this :

In addToGame() function : Demineur {game: b.Game, width: 5, height: 5, positions: Array[25], allSquare: b.Group…}

In changeSquare() function : Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

 

I don't understand why doesn't work.

Hope someone can guide me.

 

ollo

[Abderrahmane TJ]

These changes should help you, but I am not entirely sure of the mechanics behind, that makes it so you have to do it with my method :

// replace this line this.allSquare.callAll('events.onInputDown.add', 'events.onInputDown', this.changeSquare);// with this blockvar that = this;this.allSquare.callAll('events.onInputDown.add', 'events.onInputDown', function(item){    that.changeSquare(item,that);});// replace the signature of changeSquare to function(item,that);

then to have a reference to your object inside changeSquare use `that` instead of `this`

 

here is a working example : http://jsbin.com/cunone/4/edit?js,console,output

[ollo]

It's working fine, thank you so much

 

Have a good day.