[JQUERY] Systeme de machine à sous Problème ! par xenos92 - page 1

Bonjour,

Je ne m'en sors pas un peu d'aide serait le bienvenu...

Je veux créer une machine à sous pour un petit jeu perso, j'arrive à faire défiler les différents éléments comme sur une vrai machine ou le rouleau tournerait.

/!\ Le problème vient quand je veux arrêter ce fameux rouleau. /!\

J'ai créer un système qui calcul le nombre d'éléments dans mon rouleau et le temps d'animation et qui arrête aléatoirement ce rouleau.

Jusque là tout va bien, me problème c'est d'arrêter le rouleau au bon moment pour que celui n'affiche qu'un seul élément et non pas qu'il s'arrête entre 2 éléments...

C'est la que mon système fonctionne à peu près , comme dans le lien fourni ci dessous vous pouvez voir que le rouleau ne s'arrête jamais juste, on voit toujours un morceau de l'élément avant ou après celui-ci.

http://jsfiddle.net/xenos92/pnqnbafx/

J'aurai besoin d'aide s'il vous plait

-
Edité par xenos92 12 juin 2015 à 18:46:51

Voila une proposition, avec recalage des bobines en fin de rotation.

<!DOCTYPE>
<html lang="fr">
<head>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0;background-color:#ccc;color:#ff0;font-family:Georgia}
#pge {display:block;margin:30px auto;padding:0 10px;position:relative;width:487px;height:200px;background-color:pink;overflow:hidden;}
div.slt {position:relative;top:0;left:0;display:block;float:left;width:140px;height:190px;margin:0 10px;padding:0;}
#pge div p {font-size:128px;line-height:190px;text-align:center;margin:0;padding:0;background-color:#096;border:5px solid red}
</style>
</head>
<body>
<div id="pge">
   <div id="slt0" class="slt"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>1</p></div>
   <div id="slt1" class="slt"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>1</p></div>
   <div id="slt2" class="slt"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>1</p></div>
</div>
<script>
function $(i){return document.getElementById(i)}

function Reel(no,yo,vo){
   this.no=no;					// Numéro de bobine
   this.yo=-Math.floor(Math.random()*7)*200; 	// Position initiale
   this.vo=-30-Math.random()*120;       			// Vitesse initiale
   if (window.console) console.log('Reel N°:'+this.no+' yo:'+this.yo+' vo:'+this.vo)
}

function turn(){
	var idx=3,crl,mvt=0,nwy=0;
	while (idx--) {crl=reels[idx]; 				// boucle sur les bobines
		ny=crl.yo+crl.vo;           			// déplacement élémentaire égal à la vitesse
		crl.yo=(-1400<=ny?ny:ny+1400);			// mais limité en hauteur pour simuler la rotation
		crl.vo=0.99*crl.vo;           			// réduction proportionnelle de la vitesse
      		$('slt'+crl.no).style.top=crl.yo+'px';		// déplacement
		if (mvt<Math.abs(crl.vo)) mvt=Math.abs(crl.vo); // vitesse maximale
	//   	if (window.console) console.log(mvt+' Bobines:'+JSON.stringify(crl));
	}
   	// Recallage des Bobines après temporisation
 	if (mvt<0.4){setTimeout(align,300);return}
   	// Sinon on tourne
	setTimeout(turn,20);
}
function align(){var idx,crl;
	idx=3;
	while (idx--) {crl=reels[idx];
	        // if (window.console) console.log(' Bobines N°:'+crl.no+' yo:'+crl.yo+' affichage:'+(1+crl.yo%200));
		nwy=Math.round(-crl.yo/200)%7;
        	// if (window.console) console.log(' Nouvel affichage:'+nwy);
		$('slt'+crl.no).style.top=-nwy*200+'px'}
}

var reels=[],idx=3;while (idx--) reels[idx]=new Reel(idx);
turn();

</script>
</body>
</html>

Il resterait à paramétrer un peu mieux les déplacements à partir de la hauteur des lignes, puis à prévoir au minimum un bouton de lancement...

Bien entendu, le recalage pourrait être opéré plus progressivement, au besoin avec des aller et retour autour de la position d'équilibre.

En toutes hypothèses, l'animation serait sans doute de meilleure meilleure qualité avec un canvas.

EDIT : Voir aussi cette slotMachine qui, en utilisant une seule image pour les bobines plutôt que des paragraphes, conduit aussi à s'interroger : S'agit-il de freiner les bobines ou de les laisser tourner un temps aléatoire, avant de les faire osciller autour de la position d'équilibre qui va être déterminée par une division entière...

-
Edité par 007julien 14 juin 2015 à 10:54:26

[JQUERY] Systeme de machine à sous Problème !

[JQUERY] Systeme de machine à sous Problème !

Supprimer

Modérer

Signaler le message aux modérateurs