Bonjour, j'aimerai réaliser une roue de la chance, quand je regarde les sites ou script ça a l'air très compliqué. Je pensais faire une animation canvas sur une roue divise en secteur et au click dun bouton on lance une la roue, elle fait au hasard un tour ou un tour et demi enfin elle s'arrête au hasard sur une case . et on récupère en PHP le résultat. 

Je commence par faire un tableau des possibilités.

Var lots = ['100 unités','perdu','rejouer','250 unites','50 unites','perdu'];

Var degre =['0','30','60','90','120','150','180'];

Mais après je ne sais pas par quoi continuer comment associer les valeurs des deux tableaux comment dessiner la roue et la faire tourner? Merci de vos réponses à bientôt.

-
Edité par MarionGellar1 5 septembre 2018 à 20:57:47

Bonjour.

   Ce projet est quelque chose de très complexe. Étant donné qu'une roue est circulaire (oui oui), il faut que chaque section soit un triangle. Il faut donc calculer la taille et la position de chaque triangle pour les dessiner sur un canvas. Et ça, c'est la partie simple. Il y a ensuite deux possibilité.

1 - Changer conjointement les positions, rotations et textes de chaque triangle afin de les faire tourner.

2 - Faire tourner l'axe X Y du canvas.

Une fois ça fini, il faut récupérer avec les coordonnées, la valeur et la transmettre par AJAX.

Bonjour MarionGellar1,

Difficile à dire sans une maquette,

Perso, je ferais une image de ma roue je ne m’embêterai pas avec Canvas (mais bon à toi de voir)

que je ferais tourner en CSS en sélectionnant l'animation avec javascript :

• Je clique sur le BT, on lance un random sur degre.length (qui correspond à toutes les possibilités)
• suivant le degré je lance l'animation CSS à jouer
• En fin d'animation je lance une requette ajax pour récupéré le lot

Exemple d'image en rotation :

https://codepen.io/Zonecss/pen/VdvKYW