Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Vue.js 2

Arrêter une partie

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Exercez-vous à terminer la partie après un temps écoulé. Apprenez également à présenter le résultat à l'utilisateur.
04:24

Transcription

La dernière partie de notre jeu pour le rendre pleinement fonctionnel, ça va être d'activer un timer. Alors comment on va faire pour activer un timer? On va commencer par une popriété time, sur, forcément, le composant Game. Et puis on va, ici, travailler sur la mise à jour de ce temps. Alors comment ça va se passer? Alors on va aussi avoir une propriété stopped pour demander un arrêt pour dire que l'application est arretée ou pas. Et puis quand le player va apparaître, donc c'est un watch sur le player, on va dire que le stopped ,il est à false. Donc l'application démarre. On aurait pu l'appeler round pour le mettre à true, enfin bon voilà. Après c'est à vous de voir. Le time, il est ici. Moi, j'ai mis 10 secondes. Et ensuite, regardez, je vais cabler simplement une intervalle avec <, faites bien attention à mettre < en extérieur pour pouvoir utiliser l'updateTime, et on le met à une seconde comme ça ça va décrémenter. Dans les méthodes, on va avoir une méthode <. Qu'est-ce qu'elle va faire? Elle va vérifier que le time n'est pas ==0 sinon, si le temps ==0, on va stopper l'application. Sinon, qu'est-ce qu'il va se passer? Eh bien sinon, on va simplement, ici, décrémenter, et le temps va décrémenter toutes les secondes comme ça on va aller jusqu'au bout. Maintenant, il faut bien pouvoir arrêter le jeu. Pour pouvoir arreter le jeu, il faut donc empêcher la personne de pouvoir cliquer. Pour empêcher la personne de pouvoir cliquer, vous allez simplement rajouter ici, une petite méthode qui va permettre de dire donc, du coup,on va affiché ici, on va pas faire de addLog au moment où il va cliquer. donc si l'application est stoppée. Pensez également à le faire au niveau du updateClick, parce que c'est pareil, l'updateClick, si c'est stoppé, ça sert à rien de le faire, donc on arrête de le faire, on arrête d'updater. Maintenant, il y a autre chose. Il faut aussi au niveau de l'interface que la class wait vienne s'appliquer si l'application elle est stoppée. Donc ça, vous allez le faire ici, vous allez pouvoir rajouter un ou, donc les conditions au moins fonctionnent également, à cet endroit là, au niveau des classes, donc on va faire la classe wait si jamais c'est stoppé. De même, on va rajouter ici, le timer. Donc le timer va simplement exposer le time, Il va avoir une classe time, je vais vous montrer le style juste après. Et ne va être affiché que si l'appication n'est pas stoppée. Le rond qu'on doit cliquer, la petite boule, il faut aussi lui mettre une condition pour lui dire qu'elle ne s'affiche que si l'application n'est pas stoppée. A partir de là, vous avez un jeu fonctionnel avec un timer et vous pourrez, bien sûr, augmenter le temps si vous le souhaitez, je l'ai mis à 10 secondes moi, pour l'exemple évidemment, pour pas que ça prenne une minute à tester, et puis en plus parce que je fais des scores qui ne sont pas forcément glorieux. Donc du coup ici, je l'ai mis à 10 secondes, mais vous pourrez, bien évidemment, l'augmenter. Le dernier style que l'on va ajouter, c'est le style pour le timer. Moi, j'ai mis simplement une position absolue, avec une font-size à 90 points, un padding-left à 30 pour le décaler un petit peu de la gauche. Une couleur <. Et ici, une opacité à 0.2 pour que ce soit un peu sympa sur l'interface. Alors voilà ce que ça donne, on va recharger, alors ici, on a juste un tout petit problème, au niveau du trailing-space, donc voyez-vous en, toujours des petites erreurs qui apparaissent et qui surtout, sans display, c'est assez interessant. On vous dit que c'est la ligne 49, donc il faut aller regarder, effectivement, à ces petits, voyez, c'est toujours ça, c'est les petits espaces qu'on a en trop, il faut les enlever sinon ça marche pas. Là maintenant, mon interface ne fonctionne pas. Je vais simplement renseigner mon nom, et je vais cliquer sur jouer. Et ça démarre 10 secondes. Et là, on est parti, pendant 10 secondes,on peut s'amuser. Donc nous, on est au courant qu'avec alt on peut gagner des points. On va l'utiliser, si on y arrive. Voilà, j'ai fait un score de 7, bon c'est pas forcément génial. En tous cas, ce qui est sûr, c'est qu'on a développé une application complète. Et elle est fonctionnelle, et on peut s'amuser, et on va pouvoir faire jouer nos amis sur cette application. Vous voyez que avec Vue.js, vous avez la possibilité de créer tout un tas de choses vraiment incroyable, en peu de lignes de codes. J'espère que vous vous êtes bien amusé, parce que là, vraiment, on a quelque chose de sympa. Et puis bien sûr, maintenant, vous pouvez l'améliorer, vous allez pouvoir rajouter pleins de choses en plus à cette application. J'espère que vous le ferez. On peut ajouter des bonus, on peut ajouter pleins de choses qui vont apparaître de façon aléatoire. pourquoi pas demander à la personne d'activer une touche ou une autre en fonction de... Il y a pleins de choses à faire, là, on peut vraiment s'amuser. C'est un début de jeu, maintenant, c'est à votre tour.

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 !