Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Vue.js 2

Implémenter une méthode de démarrage

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour démarrer votre application, assimilez puis utilisez une méthode qui se chargera de mettre en place toute la logique.
05:33

Transcription

L'application est presque terminée, mais il vous reste quand même un petit peu de modifications, si vous voulez pouvoir faire le démarrage de cette application là. Quand est-ce qu'il intervient vraiment le démarrage? Le démarrage, il intervient en vrai, quand l'utilisateur va démarrer vraiment, va mettre son nom. Donc, pour ça, on va devoir bloquer pas mal de choses et utiliser des transitions CSS pour améliorer l'interface. Alors voilà ce que ça va donner lorsque vous aurez fait les modifs que je vais vous expliquer ensuite. Là, ça va démarrer et ensuite on va pouvoir jouer. Et là, effectivement, c'est quand même beaucoup plus sympa avec des transitions et avec un petit peu plus de fun dans l'interface. Alors, je vous explique ce qui a été mis en place pour démarrer. On sait que le démarrage, c'est lorsque le joueur va se connecter. Ca veut dire quoi? Ca veut dire qu'on va pouvoir utiliser la méthode précédente de mises à jour d'informations pour remonter l'utilisateur. Comment on va se débrouiller pour faire ça? On va faire un emit player, au moment où il se connecte. Ce qui va dire que notre app, qui est le parent, va devoir répercuter cette info. Comme d'habitude, on va devoir mettre un player ici, alors je l'ai mis à <, on peut faire ça comme ça, c'est très simple. Player à false Dans ce cas-là, ça veut dire qu'on va pouvoir envoyer une méthode < avec player à true Quand on va avoir l'évènement player sur player qui va être soulevé, et surtout dans Game, on va refléter player en ajoutant un props. Cette props va être mise à jour, player va être mis à jour à true, ce qui veut dire que dans Game on va pouvoir récupérer l'information, donc on ajoute simplement une propriété player et on va pouvoir dire que quand player est démarré, du coup, ça démarre l'interface. Alors quelques petites améliorations. J'ai mis une class ici, qui est une class wait sur game qui me permet ici, à tous moments de venir faire une transition entre le moment où on ne peut pas jouer et le moment où on peut jouer. Vous remarquerez également que j'ai ajouté sur le score le player pour pouvoir l'afficher ou pas, avec un v-if player et à ce moment là je reflète simplement la props comme ça vous pouvez voir qu'effectivement on peut utiliser plusieurs props en même temps. Ensuite, j'ai fait quelques petites améliorations qui sont des améliorations graphiques et de blocage. Alors je m'explique. Au niveau du blocage, dans Game, il va falloir qu'on bloque pas mal de choses. Déjà les améliorations graphiques. J'ai simplement fait une transition ici, pour le round, sur le width, le height et le margin Ca c'est assez simple. Pour game, j'ai fait une transition sur l'opacité et je lui ai aussi donné une opacité à 1 quand c'est .game, quand c'est la classe game. Par contre quand c'est la classe wait? Je lui mets une opacité à 0.3, ce qui me permet d'avoir la petite transition sympa. Et puis ensuite, j'ai été obligé de bloquer pas mal de choses, oui, parce que évidemment , sinon, quand je vais cliquer, ça va jouer. Donc comme j'ai une propriété player, je peux l'utiliser pour venir travailler et pour vérifier des choses. Alors qu'est-ce que je vais vérifier en l'occurence? Je vais vérifier qu'on a bien un player. Et ici, j'ai créé une méthode updateClick pour updater et pour faire la vérification, et sortir si jamais je n'ai pas de joueur, comme je ne mets pas à jour. Le log, c'est une fonction différente, donc mêmechose pour le log, il faut vérifier, que l'utilisateur existe ou pas. Ca, on aurait pu le mettre dans une autre fonction pour le vérifier une seule fois, en tous cas ça fonctionne comme ça. Une fois que vous avez fait ça, là, vous avez déjà une interface quasiment fonctionnelle, parce que quand vous allez démarrer le player, vous allez forcément émettre, ça va émettre vers le parent, le parent va répercuter l'info, le score va s'afficher, le game va démarrer, et à partir de là, ça marche très bien. J'ai fait une petite amélioration tactique. Alors, je m'explique, ce que j'ai fait, c'est que, comme vous pouvez le remarquer ici, quand je vais cliquer la première fois, eh bien ça va répercuter une deuxième fois, au bout d'une seconde, ça me répercute un changement dans ma position. En fait, je voulais absolument un changement dans la position, pour pas que ce soit trop simple, pour que si l'utilisateur va cliquer, c'est bon, il y arrive, mais sinon, il peut se tromper en approchant la souris, ça bouge au dernier moment et il nous faut quelques secondes quand même pour aller chercher la souris donc du coup, on a quand même quelque chose qui vient être modifié. Donc ça c'est sympa, ça vous emmène un peu de fun dans l'interface. Comment j'ai réalisé ça? De façon très simple, je suis allée travailler sur la modification et sur le clic, donc je pars du principe que quand il a cliqué, il a fait un < je peux faire un < avec le < et lui dire que au bout d'une seconde, s'il n'y a pas eu de clics, eh bien il relance en fait, une modification de l'interface, ce qui fait que quand l'utilisateur va essayer de cliquer, ça va être un peu compliqué pour lui. Alors, vous voyez que là, pareil, en me basant sur les évènement en me basant un petit peu de CSS pour faire de l'animation, pas grand chose, un petit peu de transition ici, un petit peu de transition là, on commence à obtenir une interface plutôt cool. Dernière petite modif que j'ai faite. Je me suis aperçu que, de temps en temps, quand la boule sortait un petit peu, eh bien on avait des petits problèmes avec l'overflow sur l'élément html. Donc, je suis venu simplement ajouter du style sur élément html de base dans index.html. ce qui me permet d'avoir une interface un petit peu plus sympa. A partir de là, on a aussi remis un petit peu de style sur score pour avoir quelque chose de vraiment correct, alors vous voyez que c'est pas très bien aligné, donc, hop on va le faire tout de suite. Là, on a une interface qui commence à être très intéressante, la seule chose qui va nous manquer, en réalité, c'est de l'arrêter ce jeu, parce que, pour le moment, il est en mode infini, je peux jouer autant que je veux. Ce serait bien qu'il y ait un temps, un timer, et que on ait qu'un certain temps pour jouer, et qu'à partir de ce timer on puisse jouer et à la fin ça s'arrête, comme ça celui qui fait le meilleur score, il a gagné. Donc on peut, après, mettre en place des petites compétitions d'attrappage de boules.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !