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)

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 !

Bonjour je pense qu'il faut que tu enlève ton for, tu fais simplement un setInterval et tu l'arrête quand ta variable i sera égal à cases. Regarde du côté de cleanInterval pour mettre fin à un setInterval

Tu mélanges un peu tout avec tes boucles qui s’exécutent immédiatement de façon bloquante, tes timeout qui s'exécutent après un délais fixe et tes événements qui s'exécutent après un délais indéterminé.

Lis un tuto sur les animations en Javascript. Ce n'est pas ce qui manque sur Internet.

YLaakel a écrit:

Bonjour je pense qu'il faut que tu enlève ton for, tu fais simplement un setInterval et tu l'arrête quand ta variable i sera égal à cases. Regarde du côté de cleanInterval pour mettre fin à un setInterval

Simple et efficace, j'ai réussi avec setInterval.

Merci !