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