Discussion :

[nina29000]

salut à tous,

j'ai une incompréhension sur l'appel d'une fonction. ( attention fait avec phaser.js)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
 
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');
 
    }
};

donc ligne 176 : je crée une fonction "coucou" (pour mon dégage et et essayer de comprendre ....)
si je l'appelle par exemple ligne 111 dans ma fontion "affiche", tout foctionne trés bien
mais si je l'appelle ligne 156, firebug me renvoie this.coucou is not function

ma question l'appel fonctionne partout ( je l'ai positionnée dans d'autres fonction) et pas dans ma fontion "utilisateur" .... POURQUOI ?????

merci à tous.

[Golgotha]

Bonjour,


la fonction utilisateur est une fonction appelée lors d'un événement.

Dans ce cas le gestionnaire d'événement met souvent à jour le contexte, et this est passé à event.target.

[sekaijin]

c'est une vision simplifiée des choses.

lorsque tu passe un callback tu passe une référence à une fonction tu ne passe pas un objet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a = {
 x: 15,
 f: function () {
   console.log("x=" + this.x);
 }
};
 
b = {
 x: 32,
 g: function(h) {
  this.f = h;
  this.f();
 }
};
b.g(a.f);
//=> x=32

dans ces exemple g est une fonction qui reçois en paramètre une (référence à une) fonction.
elle affecte au membre f de l'objet cette fonction
et l'exécute.

this représente toujours l'objet courant comme la fonction est un membre de l'objet b this représente l'objet b
et comme la fonction affiche la valeur du membre x de l'objet courant elle affiche 32

Il n'y a pas eut de modification de la fonction
mais lorsque tu passe la fonction en paramètre à b.g() tu passe une référence à la méthode f et non à l'objet a

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
a ---->+-------+
       | x: 15 |
       | f: ---|--------+--->+-------+
       +-------+        |    | func  |
                        |    +-------+
b ---->+-------+        |
       | x: 32 |        |
       | f: ---|--------+
       | g: ---|------------>+-------+
       +-------+             | func  |
                             +-------+

A+JYT

[nina29000]

c'est un peu opaque pour l'instant, je travaillle sur tout çà. et je vous appelle au secours si besoin.
merci de prendre du temps pour repondre à nous pauvre débutant.

[sekaijin]

le plus simple pour comprendre est de considérer que ta fonction est un objet (en javascript une fonction est un objet).

tu a donc un objet a qui a une fonction f

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
a = {
 x: 15,
 f: function () {
   console.log("x=" + this.x);
 },
 z: { b: 12 }
};

le membre x est un number et les membres f et z sont des objets.

si tu fais var myVar = a.z; tu t'attends à ce que myVar référence l'objet z qui un membre de a.
donc si tu fais console.log(myVar.b); tu dois avoir 12.
de la même façon si tu fais var myVar = a.f; tu t'attends à ce que myVar référence l'objet f qui un membre de a.
C'est exactement ce qu'il se passe MyVar référence l'objet f qui est une fonction.

tu peux donc affecter cette fonction à un autre objet comme membre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
b = {x: 55};
b.f= a.f; //on ne copie pas la fonction on la référence.
b.f(); //appel de la fonction membre f de b;

A+JYT

[nina29000]

Merci c'est plus clair, je me penche la dessus. je fais mes essais.