Nous saluons le retour.
Jusqu'à présent, tout ce que nous avons fait autour des événements et des auditeurs d'événements dans le dortoir et la relation dominante et les décharges des lettres que nous venons de faire un hors des exercices rapides qui ne sont pas vraiment beaucoup.
Et c'était juste pour montrer des morceaux individuels comment ils ont travaillé.
Maintenant, nous allons voir comment ils s'ajustent tous et faire une application quelque peu substantielle.
Donc, comme vous pouvez le voir, ce n'est pas la plus belle application qui arrive.
Nous nous concentrons uniquement sur la façon dont les pièces s'accordent ensemble sur la façon dont nous prenons des événements comment nous sélectionnons des éléments comment nous écrivons vieilli lui comment et comment ceux-ci tous ensemble.
Le style est juste supplémentaire.
À ce stade, mais dans le prochain projet que nous faisons.
Nous allons mettre beaucoup d'accent sur le style et de le rendre beau.
Je promets.
Donc, ce que nous allons faire est une application de pointage simple.
Donc je veux que vous pensiez en arrière à toutes ces périodes que vous avez joué des ciseaux de papier de roche avec un ami ou un ping-pong ou un doigt de tic tac et c'est juste tellement fatiguant de garder la trace du score et si difficile de savoir qui gagne quand ce App est pour vous la façon dont cela fonctionne.
Deux joueurs joueur 1 score joueur à marquer.
Vous chargez la page et cela nous dit que nous jouons à cinq.
Et donc tout ce que nous faisons est d'ajouter un point en cliquant sur un bouton.
Donc, pour ajouter un point au joueur 1, nous cliquons sur le joueur 1 si nous voulons ajouter un joueur de point pour cliquer sur le joueur 2 et ensuite celui qui obtient à cinq.
Vous remarquez qu'il devient vert.
Et si je tente de marquer à nouveau, je ne peux pas.
C'est parce que le jeu est terminé.
Je peux donc réinitialiser en cliquant sur le bouton de réinitialisation.
Et maintenant, un joueur de haut deux totalement balayer et c'est tout ce que nous ne pouvons plus jouer.
Et cette réinitialisation rapide.
Donc, une caractéristique supplémentaire est que nous pouvons aussi spécifier ce que nous jouons.
Donc, si vous voulez avoir un jeu qui va jusqu'à 7:00 je peux utiliser ce numéro d'entrée ici et puis tout ce que je dois faire est de nous laisser faire un jeu plus proche et un joueur se faufile par à la fin 4:53 et le jeu Se termine à 7 et le joueur 1 devient vert et nous ne pouvons pas ajouter plus de points, puis nous pouvons réinitialiser.
C'est donc ce que nous allons nous concentrer sur la construction ici.
Donc, la première chose que nous voulons faire est d'obtenir notre fichier mis en place et puis de créer l'équipe H structure L et puis nous allons dans avec javascript et faire fonctionner les choses.
Alors allons-y et commencez.
J'ai donc un document vide que je vais documenter.
Je l'appelle pointeur pointeur h Timo va ajouter dans notre boilerplate et lui donner un titre comme ça.
Je dois commencer par parler de ce que nous examinons ici.
Donc ce n'est pas H-1 H1 et nous allons changer cela finalement.
Nous ne voulons pas que ce soit juste un h solide, car il ya deux choses à l'intérieur de ce H-1, il doit être comme Player 1 score 2 joueurs à marquer, mais nous devons être en mesure de sélectionner cette séparément de cela.
Nous voulons donc un moyen de diviser ce H1 en petits morceaux.
Donc, nous allons voir comment nous pouvons faire cela dans un petit peu.
Alors voici un paragraphe que vous jouez.
Et jouons juste à sept pour commencer.
Ou faisons cinq.
Je pense que comment ça s'est passé.
Et puis nous avons une entrée ici.
Ce type d'entrée est égal au nombre.
Donc, le type d'entrée est égal au nombre et c'est tout ce dont nous avons besoin.
Et puis nous avons notre premier bouton.
Lecteur 1 ou deuxième bouton 2.
Et notre dernier bouton réinitialisé.
Donc, si nous rafraîchissons cette page et maintenant nous ouvrons notre propre page que nous avons créé.
Nous allons jeter un coup d'oeil.
Ils sont à peu près les mêmes.
Zoom sur un peu sur celui-ci qui semble juste.
Bien sûr, rien ne se passe lorsque nous cliquons sur quoi que ce soit.
Alors maintenant, allons dans notre javascript dans.
Je vais donc créer un nouveau fichier que je vais appeler le pointeur J.S. Et comme je le fais toujours ou d'ajouter mon alerte ici qui est connecté.
Ensuite, je vais passer à des pointeurs ou h t m l et inclure mon script et je vais le faire au bas ici pour commencer.
Ainsi, le type de script appelle la source javascript égale le pointeur.
Oui comme ça.
Maintenant, si nous rafraîchissons.
Ceci est ma version de la page, il me dit alerte javascript connecté.
D'accord.
Nous avons donc installé notre courrier électronique.
Cela semble très bien.
Ce que nous devons faire maintenant est d'obtenir un code javascript qui ajoutent effectivement certaines fonctionnalités.
Et comme toujours, nous devons commencer par sélectionner les différents éléments.
Commençons donc par sélectionner les boutons et faisons juste le joueur un et le joueur ou deux boutons et la première caractéristique sur laquelle nous allons nous concentrer est quand nous cliquons sur un de ces boutons le score devrait incrémenter ici.
Donc, tout ce que nous devons faire est de commencer par sélectionner ce joueur un bouton et si nous regardons c'est juste un bouton, nous pouvons vouloir ajouter dans l'ID donc nous allons appeler celui-ci et fait ici nous ajouterons un pour P2 et puis nous pouvons Ajoutez également un pour la réinitialisation que nous allons appeler la réinitialisation.
Donc, nous avons maintenant trois idées.
Il est donc beaucoup plus facile de sélectionner.
Nous l'appellerons juste VIP un bouton égale le sélecteur de requête de document.
Ou nous pourrions faire obtenir élément par ID.
Je vais les mélanger ici donc la première fera avec le sélecteur de requête P1 et puis P2.
Bouton sera point de document et nous allons faire obtenir élément par id et nous n'avons pas besoin de Octa Thorpe plus.
Donc, ça nous donne les deux boutons.
Et nous allons simplement mettre en place notre premier auditeur lorsque nous cliquons sur ce premier bouton va alerter ou annuler ce log quelque chose.
Donc nous voulons écrire le bouton P1 et ajouter l'écouteur d'événement sur le clic et alors nous ajoutons notre fonction ici.
Et à l'intérieur de cette fonction, nous allons simplement alerte alert cliqué et c'est tout.
Donc, si vous actualisez notre page et essayez à nouveau de cliquer sur "Super" pour nous dire que nous avons sélectionné correctement et que nous avons ajouté notre auditeur pour l'événement Click correctement.
Le joueur 2 ne fait rien parce que nous avons seulement ajouté cela au joueur 1 bouton.
Alors, maintenant parlons de la façon dont cela va réellement fonctionner.
Quand je clique ici, nous avons besoin d'avoir une variable qui s'appelle Player 1 score ou quelque chose qui garde la trace de combien de points.
Le joueur 1 a et je clique dessus devrait ajouter un au joueur 1 score et ensuite la dernière partie est mise à jour ceci ici pour refléter le score de joueur 1.
Donc, je vais faire une variable, nous allons simplement appeler 1 score et le mettre à zéro pour commencer.
Et puis tout ce que je veux faire, c'est quand nous cliquons, nous allons commencer, mais tout simplement en ajoutant un au joueur 1 score.
Donc, ce sera juste un score plus plus.
Juste comme ça.
Et nous rafraîchissons et nous n'avons rien vu parce que nous devrions probablement annuler ce journal.
Il a gagné la première place plutôt que l'alerte.
Il devient très ennuyeux très rapide si nous rafraîchissons maintenant et ouvrez la console et lecteur McCook 1 score et voir comment il va.
Un deux trois quatre cinq et ça va continuer.
Il y a donc quelques problèmes.
L'un est que nous ne montrons pas le score ici et deux il dit que nous jouons à cinq.
Et ce n'est évidemment pas le cas parce que nous ne faisons que l'incrémenter autant que nous le voulons.
Donc, nous devons avoir une logique qui dit si plus de cinq matchs ou quelque chose comme ça.
Mais commençons par trouver comment nous pouvons mettre à jour ce H1.
Donc, ce que nous pourrions faire est juste de sélectionner le H-1 pour commencer.
Alors allons juste appeler loin.
H1 est égal au document qui interroge le sélecteur H-1 exactement comme cela.
Et puis à l'intérieur d'ici, nous allons simplement dire H-1 dot texte contenu équivaut à un score comme ça.
Donc, nous allons prendre celui-ci et modifier le contenu du texte pour être quel que soit le score est que nous étions sans l'exploitation forestière.
Et si je marque ici bien ce genre de travaux, mais vous pouvez voir que nous avons complètement renversé tout ce qui était à l'intérieur de chacun.
Nous voulons garder les deux et les autres points.
Nous voulons simplement changer ce numéro.
Donc, il ya un moyen de faire cela en utilisant un peu plus de h à un homme qui rend sa vie beaucoup plus facile si nous retournons à notre pointeur, mais chaque fois l nous allons introduire un élément span.
Et la façon dont la portée va fonctionner, c'est qu'il ne sera envelopper le nombre de points.
Donc, ce que cela signifie, c'est que nous pouvons maintenant si je l'inspecter.
Rien ne semble changer et c'est le point d'une portée.
Il est juste nonintrusive jour si vous voulez c'est juste un moyen d'envelopper quelque chose avec une étiquette que vous pouvez ensuite utiliser plus tard ou de style différent ou sélectionnez avec javascript qui est exactement ce que nous allons faire si nous cherchons H-1, mais ici nous maintenant Ont une portée spéciale enveloppant ce nombre.
Donc, si nous sélectionnons cet intervalle et que nous changeons cette portée seulement, nous aurons toujours le tôo et notre espacement correctement et l'autre score.
Donc, nous voulons choisir cette période et aller à nouveau juste faire un ID ici.
Donc span et nous allons appeler cet écran P1 juste comme ça.
Et maintenant, nous devons aller à notre pointeur J S et changer quelques choses.
Nous n'avons donc plus besoin de sélectionner le H-1 pour nous en débarrasser.
Nous allons sélectionner loin un affichage égal à get document et nous allons faire le sélecteur de requête juste pour la variété de nouveau Sélecteur de requête.
Et nous appelons cela P1 affichage de sorte que nous donnera juste la portée et si nous voulions vérifier que cela fonctionnait.
Pourquoi ne pas nous faire juste un journal de voûte de concert ici.
L'affichage gagné juste pour voir quand nous chargeons la page l'actualise devrait imprimer OK.
Sélectionné notre spande correctement.
D'ACCORD.
Donc, maintenant, ce que nous voulons faire et nous débarrasser de cela est d'ajouter un à la partition.
Nous pouvons nous débarrasser de nos autres inconvénients. Mais connectez-vous plutôt que de modifier le contenu du texte sur l'ensemble H-1.
Nous voulons simplement le changer sur notre écran P1 qui est cette petite portée ici.
Et si nous rafraîchissons Maintenant, nous y allons.
Donc, nous obtenons que le lecteur 1 afficher le joueur de mise à jour 2 ne fait toujours rien, mais nous avons cette fonctionnalité de travail.
Alors faisons la même chose pour le joueur 2.
Donc je vais revenir ajouter dans une autre période autour de notre zéro span ID équivaut à afficher et puis passer à zéro entre les deux.
Nous rafraîchissons rien ne devrait sembler différent, mais nous avons maintenant deux travées.
Donc, vous pouvez voir, puis retournons à notre pointeur J nous et ajoutons deux nouvelles variables.
Donc, nous devons afficher span pour le joueur à besoin de le sélectionner avec cet ID.
Je vais utiliser le sélecteur de requêtes à nouveau.
Et puis nous avons besoin d'une variable pour le joueur de score à son, nous ne voulons pas qu'ils soient juste pour le même score.
De toute évidence, nous avons besoin de deux façons distinctes de suivre leurs valeurs.
Donc, la première chose que je veux faire est de tester que notre lecteur à bouton est correctement sélectionné.
Donc, je vais juste faire un joueur de log de voûte de concert pour bouton et juste voir ce qu'il imprime.
Et si nous rafraîchissons et nous regardons les contre. Vous pouvez voir quelque chose de mal.
Nous avons sélectionné le joueur un bouton pas le joueur deux bouton.
Quelque chose ne va pas avec notre sélecteur.
Vous pouvez voir ici que nous sélectionnons l'élément par l'identifiant P1 qui est le même que ce que nous avions ici.
Nous devons donc sélectionner P2 à la place.
Ok alors maintenant que c'est pris en charge si nous actualisons nous obtenons bouton ID P2 qui est grand.
Maintenant, ajoutons à notre auditeur.
Donc, Pete pour bouton que l'écouteur événement d'annonce cliquez sur et je tiens toujours à commencer par imprimer quelque chose ou d'alerter quelque chose d'un journal P2 cliquez comme cela rafraîchir.
Et nous obtenons P2 cliqué sur notre lecteur un fonctionne toujours et P2 est en cours d'exécution de certains code.
Maintenant nous avons juste besoin de mettre le bon code là-dedans.
Si nous jetons un coup d'oeil à ce que nous avons fait pour le joueur 1 bouton nous avons besoin d'un joueur de marquer un incrément variable pour commencer.
Jusqu'à présent score P2.
Et cela devrait commencer à zéro aussi.
Et puis nous allons juste venir ici et juste changer cela pour être P2 score plus pour nous et puis nous avons besoin de le mettre à jour dans l'affichage que nous n'avons pas encore sélectionné.
Donc, nous devons également sélectionner cette période.
Rappelez-vous la portée ici ID de l'affichage P2.
Nous allons donc le faire.
Elle va copier cette ligne et la changer pour afficher le document Duckery selector P2 affichage et ensuite nous allons juste changer l'affichage sur le contenu du texte pour être égal au joueur à marquer.
Alors allons jeter un coup d'oeil.
Cliquez sur le lecteur 1 qui fonctionne encore.
Que diriez-vous du joueur 2 qui fonctionne aussi bien.
D'ACCORD.
Il n'y a donc pas de fin à notre jeu en ce moment.
Ce serait juste continuer à jamais.
Nous devons donc travailler à l'ajout de cette fonctionnalité.
Et la façon dont nous allons le faire est avec une variable qui va garder une trace de l'état de notre jeu.
Donc, notre jeu a deux états.
Le premier est l'état normal maintenant où je peux cliquer où je peux jouer le jeu.
Et le deuxième état serait ce que nous pourrions appeler le jeu où quelqu'un a un.
Donc, nous avons besoin de deux états et nous pouvons utiliser un booléen pour modéliser que juste ou vrai.
Et je vais l'appeler game over jusqu'à présent.
Game over et il commence ce faux parce que plus de jeu.
Pas vrai au début du jeu.
Et puis ce que nous ferons, c'est que nous mettrons à jour le jeu pour qu'il soit vrai ou faux, selon si quelqu'un gagne.
Donc, si quelqu'un arrive à cinq matchs plus devrait maintenant être vrai et cela devrait signifier que nous ne pouvons plus mettre à jour la partition et que nous avons à toucher la réinitialisation et la réinitialisation devrait alors faire jeu sur faux et recommencer tout.
Alors laissez-moi vous montrer ce que je veux dire.
La première chose que nous voulons faire est d'ajouter une autre variable.
Je vais l'appeler score gagnant.
Et cela va être égal à 5.
Donc cette variable est ce que nous allons comparer le joueur 1 et le joueur au score 2.
Donc, nous allons vérifier si un joueur a atteint le score gagnant si c'est le cas.
Ensuite, nous devons dire que le jeu est vrai.
La logique se présentera ainsi.
Aller à avoir une déclaration si et il va juste ressembler à si le jeu n'est pas encore atteint.
Si ce n'est pas le cas, alors nous allons vous laisser ajouter à la partition comme ça.
Quand je cours ceci maintenant, vous ne remarquerez rien de différent.
Il fonctionnera exactement de la même manière pour le joueur 1 et c'est parce que le jeu est toujours faux.
Il ne change jamais.
Alors quand changerions-nous pour être vrai.
Eh bien quand il ya un match plus.
Et quand cela arrive, c'est quand les utilisateurs marquent alors quand le score du joueur 1 est égal au score gagnant.
Donc, après avoir ajouté un au joueur 1 score nous allons juste vérifier si nous allons faire un score de triples égale score gagnant.
Donc, s'ils sont égaux les uns aux autres alors commençons par dire simplement le journal de Contador.
Jeu terminé.
Juste comme ça.
Et si nous rafraîchissons et de revoir notre consul et j'ai essayé de changer cela jusqu'à présent, ce n'est pas vrai donc cela ne se produit jamais.
Cette fois bien que j'ajoute un joueur un score passe à cinq.
Nous vérifions si le score du joueur 1 est égal au score gagnant et nous obtenons le jeu plus bas ici.
Donc, plutôt que d'annuler le jeu de verrouillage sur nous voulons réellement changer cet état ou maintenant.
Le jeu est vrai.
Donc ce qui va faire pour nous, je vais vous montrer si je rafraîchir il nous empêchera d'ajouter plus à la partition parce que le jeu est vrai.
Cette petite vérification apparaît.
Il vérifie.
C'est encore fini.
Et si c'est un jeu, rien de ce code ne s'exécute.
Alors essayons ça.
J'arrive à cinq et je suis coincé.
Je ne peux plus l'augmenter.
Cependant je peux aller au joueur 2 et augmenter ce score parce que notre logique est seulement pour le joueur 1.
Nous allons vouloir passer à ce lecteur pour bannir l'écouteur d'événement et ajouter dans la même logique.
Donc, si ce n'est pas le jeu terminé, alors nous allons vous laisser incrémenter la partition et mettre à jour l'affichage et ensuite nous devons également vérifier si le nouveau joueur à marquer est égal au score gagnant, puis il est fini.
Game over est vrai, ce qui signifie que l'utilisateur ni l'utilisateur ni le joueur un ou le joueur deux ne peuvent continuer à incrémenter la partition plus.
Donc, nous allons vérifier que cela fonctionne rafraîchir.
OK, nous pouvons arriver à cinq ici et nous avons terminé.
Le joueur 2 ne fonctionne pas ou nous pouvons arriver à cinq ici et nous avons terminé.
Et le joueur 1 ne fonctionne pas non plus.