Discussion :

[GalliezB]

Bonjour,

Je fais mes d�buts en POO javascript pour r�aliser mes petits jeu en HTML5.
Apr�s avoir lu quelques sites et quelques bouquins, voir m�me quelque exercices sur code academy, je me retrouve devant un probl�me que je ne comprends pas.

J'ai cr�e un objet qui va me permettre de g�rer mes sprites dans ma boucle. Voici mon 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var affImg = function(src,srcX,srcY,width,height,x,y){
 
	var img = new Image();
	img.src = src;
 
	this.srcX = srcX;
	this.srcY = srcY;
	this.width = width;
	this.height = height;
	this.x = x;
	this.y = y;
 
 
	this.draw = function(){
 
		if (ctx) {
			ctx.drawImage(img,srcX,srcY,width,height,x,y,width,height);
		} else {
			console.log('ctx indéfini');
		}
 
	}
	this.setSrcX = function(newSrcX){
		this.srcX = newSrcX;
	}
 
	this.valeur = function(){
		console.log('srcX=>'+srcX+'srcY=>'+srcY+'width=>'+width+'height=>'+height+'x=>'+x+'y=>'+y)
	}
}

Et voici ma boucle ( elle fonctionne hein ^^ ) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var flotte = new affImg('img/sprite_jeu.gif',0,0,50,50,100,100);
 
flotte.srcX = 50;
flotte.srcY = 0;
var cpt = 0;
function loop(){
 
	cpt++;
	flotte.setSrcX(cpt);
	flotte.srcX = 150;
	flotte.draw();
 
	window.requestAnimFrame(loop);
}

Mais voila, rien. L'affichage fonctionne bien mais pas de modification la propri�t� srcX.

Comme vous pouvez le voir j'ai m�me cr�er un m�thode pour la modif� ( appris dans un bouquin sur la POO php ). Mais la encore, celle-ci n'est pas modifi�.


Pourtant il me semblait avoir lu qu'on pouvait modifier une propri�t� lorsque celle-ci �tait pubic ( via this ).
Pourriez-vous m'�clairer sur le pourquoi je n'arrive pas � modifier cette valeur ?

Merci

[Watilin]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function loop(){
	...
	flotte.setSrcX(cpt);
	flotte.srcX = 150;
	flotte.draw();
	...
}

En faisant comme �a tu auras toujours une valeur de 150 au moment de l'affichage. Erreur de recopie du code ?

[GalliezB]

non non, c'�tait bien ce qui �tais voulu pour tester.

Hors la valeur reste de 100 et non pas 150.
Si je fait un flotte.valeur() => j'obtiens 100 et pas 150.

Et c'est la que je suis compl�tement perdu. Tout ce que je l'ai lu et appris m'indique le contraire.
J'ai test� sur toutes les propri�t�s et aucune ne changent

[arnogues]

ton conole.log fait affiche les valeurs des variables globales qui trianent dans ton code au lieu de faire des this.srcX, etc...

si tu avais fait un test un peu plus propre tu n'aurais pas de soucis.
ET comme te le dis le monsieur, ta valeurde srcX sera toujours de 150

[Bovino]

Quand on dit que nommer une propri�t� de la m�me fa�on qu'un param�tre est une source de confusion et d'erreur...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
var affImg = function(src,srcX,srcY,width,height,x,y){
 
	var img = new Image();
	img.src = src;
 
	this.srcX = srcX;
	this.srcY = srcY;
	this.width = width;
	this.height = height;
	this.x = x;
	this.y = y;

Fais-tu bien la diff�rence entre scrX et this.srcX ?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

ctx.drawImage(img,srcX,srcY,width,height,x,y,width,height);

Ici, les param�tres de la fonction correspondent selon toi aux param�tres du constructeur ou aux propri�t�s de l'objet ?
Bien s�r, avec des nommages appropri�s, par exemple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
this.sourceX = srcX;
// etc.

la question ne se poserait pas ! Surtout, en cas d'oubli du this, le code te renverrait une erreur au lieu de trouver une autre valeur et �a faciliterait le d�bogage.

[GalliezB]

Quand on dit que nommer une propri�t� de la m�me fa�on qu'un param�tre est une source de confusion et d'erreur...

Je n'ai jamais lu ceci dans aucun tutoriels. Et pourtant je comprend bien maintenant pourquoi et comment je me suis plant�.

ton conole.log fait affiche les valeurs des variables globales qui trianent dans ton code au lieu de faire des this.srcX, etc...

Si j'ai bien tout suivi, il m'affiche les param�tres du constructeur, j'ai aucune variable globale de ce nom dans mon code.



Un grand merci � vous deux, en effet je comprend la diff�rence entre le srcX et this.srcX
Mais comme le dit si bien Bovino, le m�me nommage est bien mon soucis. Je vais donc changer cette pratique pour m'�viter de me retrouver sans erreur en cas d'oubli du this. Ce qui parait quand m�me plus logique.

si tu avais fait un test un peu plus propre tu n'aurais pas de soucis.
ET comme te le dis le monsieur, ta valeur de srcX sera toujours de 150

Pourrai tu d�velopper un peu plus ce que tu appel un test plus propre stp ?

[Watilin]

Peut-�tre une autre source de confusion : tu cr�es les m�thodes de affImg dans le constructeur au lieu de les attacher au prototype. Du coup il y a un risque que les m�thodes utilisent des variables locales du constructeur. Si elles �taient d�clar�es en dehors, elles ne pourraient pas.

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
// déclaration du constructeur
var affImg = function( … ){
	…
};
 
// ajout des méthodes sur le prototype
affImg.prototype.draw = function(){
	…
};
 
affImg.prototype.setSrcX = function(newSrcX){
	…
};
 
affImg.prototype.valeur = function(){
	…
};
 
// les méthodes s'utilisent exactement de la même façon
var flotte = new affImg( … );
flotte.valeur();

[GalliezB]

Oui en effet mais c'est voulu pour le moment.

Je veux voir quel impact cela va avoir sur les performances. J'avais lu ceci sur http://t-templier.developpez.com/tut...vascript-poo1/

Une fois le jeu fini je ferai diff�rentes branches sur mon git pour tester les diff�rentes versions et voir un peu comment tout cela influence les performances.


Par contre j'avoue ne pas avoir pens� � l'utilisation des variables locales. Merci pour la pr�cision