search

podzit / CovidGame

Jeu en ligne pour rire
https://podz.be/CovidGame
0 stars 1 forks source link

Animation des cartes quand on les retourne. #12

Closed cromatikap closed 3 years ago

cromatikap commented 3 years ago

Voilà un flow possible que je vois pour animer les cartes:

  1. Les cartes sont face cachées
  2. L'utilisateur clique sur jouer
  3. Les données de chaque carte sont générées.
  4. Les cartes se retournent dans une animation fluide (Voir cet exemple en CSS)
  5. L'utilisateur click sur rejouer
  6. Les deux cartes retournées disparaissent avec un effet de swipe sur le côté laissant apparaître de nouvelles cartes face cachées en dessous
  7. Retour à 1.

Qu'est-ce que t'en penses?

podzit commented 3 years ago

Est-ce qu'il ne serait pas plus fluide qu'après l'étape 5: 6- les deux cartes swipe sur des faces cachées 7- les deux cartes flip sur la face visible Sans intervention du joueur? sinon ça fait 2 clics coup sur coup "rejouer" + "jouer" j'ai peur que ce soit usant.

cromatikap commented 3 years ago

Je suis pas sûr de bien comprendre ton étape 6. Tu veux dire, les cartes se re-retourne face cachées?

Effectivement ça fait cliquer 2 fois, c'est peut-être mieux un seul click, voilà comment on peut faire la boucle de jeu:

  1. L'utilisateur clique sur rejouer
  2. Les cartes face visible glissent sur le côté et disparaissent, laissant apparaître les cartes face cachées en dessous.
  3. Les données de chaque nouvelle carte sont générées.
  4. Les cartes se retournent (animation).
  5. Retour à 1.

Et simplement lorsque c'est la première fois que l'on click sur jouer on passe directement de l'étape 1 à 3 sans passer par 2.

Qu'est-ce que t'en penses?

podzit commented 3 years ago

Oui c'est exactement ce que je voulais dire. Désolé si ce n'était pas clair.

cromatikap commented 3 years ago

Pas de problème :)

podzit commented 3 years ago

J'ai pushé un début d'effet de retournement. Dis moi ce que t'en pense.

Edit: J'ai avancé: 1- les cartes "back" tournent 2- affichage des cartes "jeu" 3- au clic sur "rejouer" retour aux cartes "back" avec effet flip (j'ai testé un effet swipe mais je n'ai pas réussi à le faire fonctionner correctement) 4- puis clic sur "rejouer" pour relancer le jeu. Je n'ai pas trouvé le moyen de relancer le jeu sans ce 2ème clic... une idée?

Edit: j'ai trouvé une astuce donc 1 clic permet de relancer le jeu avec flip des cartes.

podzit commented 3 years ago

Vu que j'étais bien parti, j'ai ajouté une "poche" à 50$, transformé le bouton "jouer" en mises de 1,2,5 et 10$ et j'ai donné une orientation "jeu de casino" à covidgame.

En gros:

podzit commented 3 years ago

Je me suis enflammé, j'ai ajouté une page de classement des meilleurs scores et tout le fonctionnement qui va avec en php. Le tout sans base de donnée, juste avec un fichier csv. Fonctionnement: Durant le jeu chaque fois que $poche atteint un nouveau score, ça passe dans la variable $hiscore. Lorsque la poche arrive à 0 ou moins, le joueur a la possibilité de mettre un pseudo. Le pseudo et le hiscore sont transmis à scores.php qui écrit dans le fichier assets/scores.csv, puis reli le fichier et met en forme les 10 meilleurs scores.

podzit commented 3 years ago

Le retournement des cartes et les différents settimeout produisent l'effet voulu.