Aide boucle for qui s'execute trop rapidement

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:

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