Discussion :

[zeracoa]

Bonjour, je suis en train de créer un jeux tron en html 5. Le but est de dirigé 2 "snake" un pour chaque joueurs.

J'ai commencé avec un snake, cella marche parfaitemetent.

Puis j'ai importer prototype pour creer une classe tron afin de pouvoir gérer les 2 trons.

J'utilise la fonction setTimeout pour déplacer le tron (j'en ai un pour l'instant).

Voici un extrait de mon code, la fonction frame de la classe Tron :

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
 frame : function() {
			if(!gstarted || gpaused) {
				return;
			}		
			var coordonnee = this.getTron();
			var x = coordonnee[0][0], y = coordonnee[0][1]; // On récupère les coordonnée du j1_tron pour le diriger
	// 0->Haut 1->Droite 2->Bas 3->Gauche 
			switch(this.getNewdir()) {
				case 0:
					y--;
					break;
				case 1:
					x++;
					break;
				case 2:
					y++;
					break;
				case 3:
					x--;
					break;
			}
			if(testCollision(x, y)) { // Si il ya a collision, on perd
				endGame();
				return;
			}
			coordonnee.unshift([x, y]);
			this.setTron(coordonnee);
	// La nouvelle coordonnée est placé en debut du tableau
			 this.setDir(this.getNewdir())	// On actualise la position
			 c.fillStyle = '#000';
			 c.fillRect(0, 0, largeur*pixelsize, hauteur*pixelsize);
			 c.fillStyle = '#fff';
	// On redéssine le tableaux de jeux en noir
	// Pour effacer les messages pause ou celui du début
			drawTron(this); // On appelle la fonction qui déssine le j1_tron et sa trainée
			//setInterval(this.frame(), rate);
			setTimeout(this.frame(), 200); // On répète la fonction toute les "rate fois (en millisecondes)" 
		}
	};

Malgré un intervalle de 200, le tron se trace sur toute la longueur en 0sec ...
L'intervalle n est pas pris en compte.

N'hésiter pas a me demander plus d'info, merci

[Willpower]

Bonjour,

l'erreur se trouve ici :

Code :

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

1
2
//setInterval(this.frame(), rate);
setTimeout(this.frame(), 200); // On répète la fonction toute les "rate fois (en millisecondes)"

setTimeout prend une fonction en paramètre, or tu n'y places pas une fonction mais un appel de fonction (il prendra donc le résultat de cet appel comme valeur du paramètre, soit dans ton cas rien, et la fonction aura été exécuté en boucle x fois instantanément)

Pour y remédier, il faut passer la fonction sans les () sauf que dans ton cas, il y a l'objet appelant à conserver, et pire c'est un this, donc si on l'englobe dans une fonction anonyme(ce que nous allons faire pour garder le contexte et l'objet appelant) nous aurons un "this" différent. Il faut donc sauver notre this dans une autre variable avant la création de la fonction anonyme englobante.

Bref, la solution :

Code :

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

1
2
3
var that = this;
//setInterval(this.frame, rate);
setTimeout(function(){that.frame()}, 200); // On répète la fonction toute les "rate fois (en millisecondes)"

[zeracoa]

Merci pour cette réponse et vos explications très clair !

[SpaceFrog]

Code :

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

setTimeout(this.frame, 200);

pas besoin de closure n'ayant pas de params à passer ...

[Willpower]

Code :

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

setTimeout(this.frame, 200);

pas besoin de closure n'ayant pas de params à passer ...

Il y a le "this" à passer. ;-)

[SpaceFrog]

Code :

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

1
2
that=this;
setTimeout(that.frame, 200);

passer n'est pas approprié
je dirais pointer sur la bonne référence ...