Aller au contenu principal

Pile ou face et roue aléatoire — outil gratuit

Lancez une pièce virtuelle, faites tourner une roue personnalisable ou choisissez aléatoirement dans une liste d'options. Utilise le générateur de nombres aléatoires cryptographiquement sûr de votre navigateur — pas un tirage public vérifiable, donc évitez les concours réglementés.

Fonctionne hors ligne une fois chargé

🔒 Les trois utilisent le générateur de nombres aléatoires sécurisé par cryptographie de votre navigateur : le résultat est d'abord choisi, puis animé — la pièce est un véritable 50/50, la roue tourne jusqu'à son résultat déjà choisi, et le sélecteur est impartial. Rien ne quitte votre appareil. C'est équitable pour un usage occasionnel, mais ce n'est pas un tirage public vérifiable, alors évitez les concours réglementés ou les décisions de grande valeur.

Utilisations courantes

  • Lancez une pièce pour prendre des décisionsUtilisez un tirage au sort virtuel juste pour prendre des décisions rapides et impartiales lorsque vous êtes coincé entre deux options.
  • Roulette pour les affectations d'équipe aléatoiresUtilisez la roulette personnalisable pour assigner aléatoirement les membres de l'équipe aux tâches, rôles ou groupes.
  • Sélecteur d'étudiant aléatoire pour les salles de classeUtilisez la roulette ou le sélecteur d'options pour appeler aléatoirement les élèves, assigner les groupes ou sélectionner les bénévoles.
  • Tirage au sort virtuel pour le sportLancez une pièce juste pour déterminer les côtés de l'équipe, la première possession, l'ordre de service ou d'autres décisions sportives.
  • Sélecteur aléatoire pour les giveawaysChoisissez un gagnant aléatoire dans une liste de candidatures à l'aide du sélecteur d'options — transparent et équitable.

Comment ça marche

Les trois modes — pile ou face, roue à tourner, et sélecteur d'options — utilisent l'API Web Crypto intégrée du navigateur (crypto.getRandomValues) pour générer le résultat gagnant, puis pilotent l'animation entièrement côté client avec des transformations CSS et requestAnimationFrame. Aucun serveur n'est impliqué à aucun moment.

  1. 1
    Web Crypto choisit le gagnant
    Avant le début de toute animation, crypto.getRandomValues remplit un Uint32Array avec un entier 32 bits cryptographiquement aléatoire. Une opération modulo le fait correspondre au nombre d'options (2 pour pile/face, N pour la roue ou le sélecteur), afin que chaque résultat ait une probabilité exactement égale.
  2. 2
    L'angle de rotation est calculé pour tomber sur le résultat
    Pour la pièce, le code calcule la rotation supplémentaire la plus courte (en plus de l'angle cumulé actuel) qui se termine avec la bonne face vers le haut — face à 0°, pile à 180° — puis ajoute 5 tours complets pour donner l'impression d'un vrai lancer. La roue fait de même : elle trouve le décalage angulaire qui amène la tranche gagnante sous le pointeur, ajoute 6 rotations complètes, et applique un petit tremblement aléatoire pour que le pointeur ne s'arrête pas toujours exactement au centre de la tranche.
  3. 3
    Les transitions CSS et requestAnimationFrame pilotent l'animation
    La pièce et la roue s'animent via une transformation CSS avec une courbe d'accélération cubic-bezier appliquée à une seule valeur de rotation accumulée — aucun JavaScript par image n'est nécessaire une fois l'angle défini. Le sélecteur d'options utilise plutôt requestAnimationFrame : à chaque image, un intervalle croissant quadratiquement détermine s'il faut avancer la surbrillance, produisant une décélération à la machine à sous qui s'arrête toujours sur le gagnant prédéterminé.
  4. 4
    Le résultat est révélé et consigné dans l'historique de session
    Un setTimeout se déclenche à la fin de l'animation (1,3 s pour la pièce, 4,3 s pour la roue) et écrit le résultat dans l'état. Le mode pièce garde un historique de session courant de jusqu'à 24 lancers avec les décomptes pile/face. Les utilisateurs ayant prefers-reduced-motion activé sautent entièrement l'animation et voient le résultat immédiatement.

Guide

Exemple détaillé

Ouvrez la page sur l’onglet « Pile ou face » et appuyez sur « Lancer la pièce » ; toucher la pièce fonctionne aussi. Le bouton indique « Lancer… » pendant 1,3 seconde tandis que la pièce tourne, puis « Face ! » ou « Pile ! » apparaît avec une ligne comme « 3 Face / 2 Pile sur 5 lancers » et une rangée de pastilles F et P. Passez à « Roue », qui démarre avec Pizza, Sushi, Tacos et Burgers. Saisissez Ramen dans « Ajouter une option… » et appuyez sur Entrée pour obtenir cinq parts de 72 degrés chacune. Appuyez sur « Faire tourner la roue » ; après 4,3 secondes, le pointeur s’arrête et un cadre affiche « Gagnant » et le nom. « Supprimer le gagnant et relancer » apparaît tant qu’il reste plus de deux options. Dans « Sélecteur d’option », avec Oui, Non et Peut-être, appuyez sur « Choisir une option aléatoire » : les lignes s’allument tour à tour pendant jusqu’à 1,6 seconde et le cadre intitulé « Sélectionné » affiche la réponse.

Quels réglages utiliser, et les limites

  • Touchez la pièce ou le bouton, puis attendez qu’elle retombe. « Lancer la pièce » et la pièce elle-même déclenchent tous deux un lancer. Le résultat est choisi avant le début de l’animation, avec le générateur aléatoire sécurisé du navigateur ; c’est donc un vrai 50/50 et la rotation ne fait que le montrer. Les touches supplémentaires sont ignorées pendant les 1,3 seconde que cela prend. Les pastilles sous la pièce listent vos 24 derniers lancers, du plus récent au plus ancien, et la ligne « Face / Pile sur N lancers » compte au plus ces 24, elle ne signale donc jamais plus de 24 lancers. La liste n’est conservée que tant que la page est ouverte.
  • Construisez la roue avec jusqu’à 24 options. Saisissez dans « Ajouter une option… » et appuyez sur Entrée ou sur « + ». Chaque option est coupée à 24 caractères, et « + » est grisé quand le champ est vide, pendant que la roue tourne, ou à 24 options. Le × à côté d’une option la supprime. Il n’y a pas de modification sur place : supprimez donc une option et ajoutez-la de nouveau. « Faire tourner la roue » demande au moins deux options. Une étiquette de plus de 16 caractères est raccourcie sur sa part, mais le cadre du gagnant l’affiche en entier. Ajouter deux fois la même option lui donne deux parts, donc le double de chances.
  • Utilisez l’élimination pour classer des noms. Après un tour, « Supprimer le gagnant et relancer » retire le gagnant de la roue et fait tourner les autres aussitôt. Il ne s’affiche que tant qu’il reste plus de deux options, donc le dernier tour se joue entre deux. Servez-vous-en pour tirer un ordre de passage ou pour éliminer des choix un par un. « Plein écran », affiché là où le navigateur le permet, masque la liste des options et garde la roue, le gagnant et le bouton de rotation, ce qui convient à un écran de classe. Vous ne pouvez pas ajouter ni supprimer d’options pendant qu’elle tourne.
  • Utilisez le sélecteur d’option pour une simple liste. Chaque option a sa propre ligne. Entrée ajoute une ligne en dessous, les flèches haut et bas passent d’une ligne à l’autre, et Retour arrière sur une ligne vide la supprime ; le bouton × supprime aussi une ligne, mais il en reste toujours une. Les lignes vides sont ignorées, et « Choisir une option aléatoire » est grisé tant qu’au moins une ligne n’a pas de texte. Avec une seule ligne remplie, il répond aussitôt, sans animation. Vous pouvez ajouter plus de lignes que les 24 options de la roue, mais un lien partagé ne garde que les 50 premières.
  • Partagez une roue ou une liste sous forme de lien. « Partager le résultat » apparaît sous les onglets « Roue » et « Sélecteur d’option ». Une fois que vous avez modifié une option, l’adresse de la page contient les deux listes après un #, et le bouton copie ce lien, ou ouvre la feuille de partage sur un téléphone. Les navigateurs n’envoient pas la partie après # à un serveur. À l’ouverture du lien, chaque option est coupée à 24 caractères, la roue garde 24 options et le sélecteur 50, et les virgules à l’intérieur d’une option sont conservées. Une adresse de plus de 1 800 caractères est abandonnée, ce qui donne un lien simple sans options.
  • Sachez ce que « équitable » veut dire ici. Les trois modes utilisent le générateur aléatoire cryptographiquement sûr du navigateur. Le résultat est choisi d’abord et l’animation est arrangée pour y aboutir ; le petit décalage de l’endroit où le pointeur s’arrête dans une part ne sert qu’à l’aspect. C’est équitable pour des choix occasionnels, mais la page indique elle-même qu’il ne s’agit pas d’un tirage public vérifiable ; évitez donc les concours réglementés ou les décisions à enjeu élevé. Si votre appareil est réglé pour réduire les animations, les trois modes sautent l’animation et affichent le résultat aussitôt.

Problèmes courants et comment les résoudre

Le bouton « Faire tourner la roue » est grisé.
Il est désactivé pendant que la roue tourne et chaque fois qu’il y a moins de deux options. Ajoutez une autre option dans « Ajouter une option… » et appuyez sur Entrée. Les boutons × suppriment des options jusqu’à zéro, donc une roue peut se retrouver avec trop peu d’options.
Le bouton « + » à côté de « Ajouter une option… » est grisé.
Il est désactivé quand le champ est vide ou ne contient que des espaces, pendant que la roue tourne, et quand la roue a déjà 24 options. À 24, supprimez d’abord une option. Tout ce que vous saisissez au-delà de 24 caractères est coupé à l’ajout de l’option.
Un lien partagé s’ouvre sur l’onglet « Pile ou face », ou a perdu vos options.
Un lien créé après modification contient à la fois la liste de la roue et celle du sélecteur. Quand les deux sont présentes, la page laisse « Pile ou face » sélectionné ; ouvrez donc « Roue » ou « Sélecteur d’option » pour retrouver vos options. Si l’adresse dépasse 1 800 caractères, ce qu’atteignent vite les lettres non latines car chacune prend environ neuf caractères une fois encodée, « Partager le résultat » donne un lien simple sans options. Les options de plus de 24 caractères sont coupées, et les listes sont réduites à 24 (roue) ou 50 (sélecteur).
Les noms d’options longs semblent coupés sur la roue.
Une part n’affiche que les 15 premiers caractères d’une étiquette de plus de 16, suivis de « … », et le texte rétrécit à mesure que les étiquettes s’allongent. Le cadre du gagnant affiche le texte complet. Utilisez des noms plus courts si la roue doit être lue à distance.
La pièce ou la roue affiche son résultat aussitôt, sans rotation.
Votre appareil ou navigateur est réglé pour réduire les animations, et la page respecte ce réglage : la pièce, la roue et le sélecteur sautent l’animation et affichent le résultat tout de suite. Le résultat est choisi de la même façon. Désactivez ce réglage dans les options d’accessibilité de votre système si vous voulez retrouver l’animation.

Comment il se compare

Une vraie pièce, un dé ou des papiers sont des choses que tout le monde peut regarder ; cette page est un remplaçant rapide quand vous n’en avez pas, avec une pièce, une roue de noms et un sélecteur de liste au même endroit. Chaque option a la même chance, donc la seule façon de pondérer un choix est de l’ajouter plusieurs fois. Elle lance une pièce à la fois et mémorise 24 lancers tant que la page reste ouverte. Les listes de la roue et du sélecteur sont conservées dans l’adresse de la page, et survivent donc à un rechargement. La page indique que rien ne quitte votre appareil. Elle ne donne aucune preuve qu’un tirage était équitable, puisqu’il n’y a ni registre public ni graine ; elle ne convient donc pas aux concours réglementés ni aux lots. Il n’y a ni comptes ni sons.

Outils associés

Questions fréquemment posées