Jump to content

function scope


nina29000
 Share

Recommended Posts

hi all,

I have a misunderstanding about the call of a function. (Attention did with phaser.js).

  Anagramme.Game = function (game) { 	//	When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:     this.game;		//	a reference to the currently running game    this.add;		//	used to add sprites, text, groups, etc    this.camera;	//	a reference to the game camera    this.cache;		//	the game cache    this.input;		//	the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it)    this.load;		//	for preloading assets    this.math;		//	lots of useful common math operations    this.sound;		//	the sound manager - add a sound, play one, set-up markers, etc    this.stage;		//	the game stage    this.time;		//	the clock    this.tweens;    //  the tween manager    this.state;	    //	the state manager    this.world;		//	the game world    this.particles;	//	the particle manager    this.physics;	//	the physics manager    this.rnd;		//	the repeatable random number generator     //	You can use any of these from any function within this State.    //	But do consider them as being 'reserved words', i.e. don't create a property for your own game called "world" or you'll over-write the world reference.  }; Anagramme.Game.prototype = {  	create: function () {         console.log('OK');           tabMot = [            ["champignon", "cham", "pi", "gnon"],            ["parapluie", "pa", "ra", "pluie"],            //["téléphone", "té", "lé", "pho", "ne"],            ["maison", "mai", "son"],            ["chapeau", "cha", "peau"],            //["encyclopédie", "en", "cy", "clo", "pé", "die"]        ];        tabAleatoire = [];        tabChoixUtilsateur = [];        motChoisi = [];        syllabeMotchoisi = [];        motLongueur = 0;        clic = 0;        px = 0;        py = 0;/*        this.posX;        this.posY;*/        coordonnees = [];         motChoisi = Math.floor((Math.random() * tabMot.length));         if (tabMot[motChoisi].length == 4){            this.game.add.image(0, 0, "fond3");        }  else {            this.game.add.image(0, 0, "fond2");         }        this.melangeMot();         this.backButton = this.add.button(568, 19, 'backButton', this.backToMenu, this, 1, 0, 1);	},        melangeMot: function () {        motLongueur = tabMot[motChoisi].length - 1;         this.game.add.bitmapText(250, 150, 'opend', tabMot[motChoisi][0], 60);         for (i = 1; i < tabMot[motChoisi].length; i++) {            tabAleatoire.push(tabMot[motChoisi][i]);        }         // Creation de l'anagramme, mélange du tableau         for (var position = tabAleatoire.length - 1; position >= 1; position--) {             //hasard reçoit un nombre entier aléatoire entre 0 et position            var hasard = Math.floor(Math.random() * (position + 1));             //Echange            var sauve = tabAleatoire[position];            tabAleatoire[position] = tabAleatoire[hasard];            tabAleatoire[hasard] = sauve;        }            this.tiles();            this.affiche();    },      affiche: function (){         for (var i = 0; i < tabAleatoire.length; i++) {            var x = 50;            var y = (i * 100) + 50;            this.syllabeMotchoisi = this.add.bitmapText(x, y,'opend', tabAleatoire[i], 50);            this.syllabeMotchoisi.buttonMode = true;            this.syllabeMotchoisi.inputEnabled = true;            this.syllabeMotchoisi.events.onInputDown.add(this.utilisateur, tabAleatoire[i]);            this.syllabeMotchoisi.events.onInputDown.add(this.onDragStart, this);            this.syllabeMotchoisi.inputEnabled = true;            this.coucou();        }    },      tiles: function (){        for (var i = 0; i < tabAleatoire.length; i++) {            /*posX = (i * 105) + 255;            posY = 200;*/            var posX = (i * 170) + 300;            var posY = 390;             coordonnees.push(posX, posY);            //this.add.image(posX, posY, "btn");            console.log(coordonnees);        }    },      testtab: function (){        console.log('test');        // Affichage des erreurs ...        for (var i = 0; i < tabChoixUtilsateur.length; ++i) {            if (tabChoixUtilsateur[i] == this.tabMot[this.motChoisi][i + 1]) {                this.add.bitmapText(275, 200, 'opend', 'BRAVO !!!', 70);            } else {                this.add.bitmapText(275, 200, 'opend', 'ERREUR !!!', 70);            }        }    },      utilisateur: function (m) {        //compteClic();         clic ++;        console.log('clic = ' + clic);        console.log('longueur utilisateur = ' + motLongueur);         if (clic <= motLongueur) {            tabChoixUtilsateur.push(m._text);            console.log(tabChoixUtilsateur);        };         if (clic == motLongueur) {            this.coucou();        };    },      onDragStart: function (s){        var a = tabMot[motChoisi].indexOf(s._text);         var y = (a * 2) - 1 ;        var x = y - 1;        px = coordonnees[x];        py = coordonnees[y];         var blob = this.add.audio('boden');        blob.play();         this.add.tween(s).to( {x : px, y: py}, 2000, Phaser.Easing.Cubic.InOut, true, 0);    },      coucou: function(){        console.log('coucou');    }, 	update: function () { 	},     backToMenu: function (pointer) {         this.state.start('MainMenu');     }};

So line 176: I create a "coucou" function (for my debugging and and try to understand ....)
if I call, for example, line 111 in my fontion "shows", everything works very well
but if I call line 156, firebug send me this.coucou  is not a function.

my question the call works everywhere (I positioned in other function) and not in my fontion "utilisateur" .... WHY ?????

thank you all.

(xcuse fo my english, i'm a poor french young lady)..

Link to comment
Share on other sites

That's because when utilisateur is called by the event, this doesn't mean what you think it means :).  Do console.log(this) in coucou and you'll see what I mean.  When defining event callbacks, it's best to keep it out of the "class" definition if possible, just because this gets confusing.  If you don't want the whole function defined inline with the event registration, do something like (I didn't test this, but this is the idea):

    affiche: function (){        for (var i = 0; i < tabAleatoire.length; i++) {	    ...	    var _self = this; // store this to pass to the event callback            this.syllabeMotchoisi.events.onInputDown.add(function(m) { _self.utilisateur(_self, this, m); } , tabAleatoire[i]);            ...        }    },    utilisateur: function (_self, arg, m) {        ...        _self.coucou(); // instead of this, use _self    }

I'm not 100% on the signatures used in that event callback, so _this and m might be the same thing, but if you're curious, just console.log them to see what they actually are. 

Link to comment
Share on other sites

Nina,

 

JavaScript will dynamically change the value of "this" in certain situations - typically in event handlers and timers.  There is more than one way to work around this, but perhaps the simplest is to do something such as already suggested.  "var _self = this" was used to store a reference to the "this" that YOU want to use, avoiding the problem resulting from JavaScript changing what object that "this" points to. 

 

But it's still a bit confusing isn't it?  There are two more things that deserve a little more explanation.

 

1. the _self.utilisateur function call is necessary because "this" will already have been changed to the event target by JavaScript when the event handler is called.  The reason it works is because JavaScript creates a closure that holds the values of a surrounding function, making them available for use by any internal function of that surrounding function.

 

2. Passing the _self variable as an argument in the utilisateur function makes it so you can call coucou.  If you tried to do this.coucou, the function would not be seen because "this" got changed to reference another object.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...