nina29000 Posted March 15, 2015 Share Posted March 15, 2015 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 wellbut 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 More sharing options...
Huggz Posted March 16, 2015 Share Posted March 16, 2015 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 More sharing options...
nina29000 Posted March 16, 2015 Author Share Posted March 16, 2015 it's a bit opaque for now, I'm working on all that. and I am calling for help if needed.thank you for taking time to respond to us poor beginner. Link to comment Share on other sites More sharing options...
mwatt Posted March 17, 2015 Share Posted March 17, 2015 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 More sharing options...
nina29000 Posted March 19, 2015 Author Share Posted March 19, 2015 I may have to make simpler test. Because in my code it's really confusing. I will not hesitate to ask again for your help.thank you for your answers. Link to comment Share on other sites More sharing options...
Recommended Posts