Discussion :

[Mr web]

Bonjour à tous,

Je suis actuellement bloqué sur un problème et je ne trouve pas de solution.

Je programme un genre de jeu de l'oie où l'on avance en jetant un dé.
Mon problème c'est lorsque je lance le dé, mon pion avance du nombre du dé sans passer par les cases intermédiaires.

Par exemple imaginons que je suis sur la case 1, je fais 3 avec mon dé je voudrai que mon pion se déplace sur la case 2 puis 3 puis 4 mais la mon pion se déplace directement sur la case 4.

J'aimerai savoir si vous avez une idée pour faire cela. J'avais essayé d'utiliser setTimeout/Intervale mais cela ne résout rien.

Voici mon code :
(PosiPoints est un tableau JSON où je récupère la position du point où je vais faire se déplacer le pion)

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
 
function TournerDes(){
	var num = Math.floor((Math.random() * 6)+1);
	var s = document.getElementById('des').style;
	document.getElementById('des').onclick = "";
 
	SetTransform(s,"rotateX(1000deg) rotateY(-1000deg) rotate(-500deg)");
	setTimeout(function(){
		switch(num){
			case 1:
				SetTransform(s,"rotateX(-910deg) rotateY(370deg) rotate(360deg)");
			break;
			case 2:
				SetTransform(s,"rotateX(440deg) rotateY(-360deg) rotate(10deg)");
			break;
			case 3:
				SetTransform(s,"rotateX(-10deg) rotateY(80deg) rotate(1080deg)");
			break;
			case 4:
				SetTransform(s,"rotateX(-370deg) rotateY(-100deg) rotate(1080deg)");
			break;
			case 5:
				SetTransform(s,"rotateX(-820deg) rotateY(-720deg) rotate(-10deg)");
			break;
			case 6:
				SetTransform(s,"rotateX(-10deg) rotateY(-10deg) rotate(720deg)");
			break;
		}
	}, 400);
 
	avancerDe(num);
 
}
 
// fait avancer le pion de X cases
function avancerDe(cases) {
	for (var i = 1; i <= cases; i++) {
		setTimeout(function(){
			document.getElementById('des').onclick = TournerDes;
			if(++PositionPion >= PosiPoints.length){
				PositionPion = 0;
			}
			var s=document.getElementById('pion').style;
			s.top = PosiPoints[PositionPion].top + "%";
			s.left = PosiPoints[PositionPion].left + "%";
 
			setTimeout(function(){
				if(PosiPoints[PositionPion].action == "defi"){
					//ChargerDefi();
				}else{
					//ChargerChance();
					document.getElementById('des').onclick = TournerDes;
				}
			},800);
		},2000);
	}
}

Merci

[sekaijin]

il faut faire de la programmation événementielle
en clair pas de boucle for ou autre qui s'exécute et lorsque c'est fini tu a le résultat
mais réagir et générer des événements

Tu as fait un 3 donc à la place de faire un for ou un while tu définis une fonction qui déplacera le pion lorsque elle sera appelée.
tu lance un timer qui au bout de quelque seconde déclenche la fonction. celle-ci déplace le pion d'une case et installe un autre handler pour les déplacement suivant avec un timer. etc.
lorsque le déplacement est terminé la phase de jeu peu reprendre.

le mot important dans ce traitement est lorsque. les méthode n'agissent que lorsque un événement se produit: dés lancés, timer complété, objet arrivé en telle position etc.

tu l'utilise sans trop y penser lorsque tu fait onclick.... qui signifie "lorsque le bouton sera activé faire ...."

https://fr.wikipedia.org/wiki/Progra...%A9nementielle
http://cours.vincent-vanneste.fr/jav...rammation.html
http://liris.cnrs.fr/~pchampin/ensei...tro-js/s2.html

A+JYT