Donc, nous sommes en bonne forme ici.
Ce que nous voulons faire ensuite est de faire en sorte que nous n'utilisons pas les mêmes six couleurs à chaque fois.
Au lieu de cela, nous voulons générer six couleurs aléatoires et remplir ce tableau avec ces six couleurs aléatoires et puis choisir un de ceux pour générer ces couleurs.
En fait, je vais écrire une autre fonction pour nous aider.
Donc, notre fonction Nener notre race la matrice hardcoded et je vais définir des couleurs égales à notre appel de fonction que nous allons appeler générer des couleurs aléatoires et il n'existe pas encore et il va prendre un seul argument qui décide combien de couleurs À générer dans le tableau.
Donc, si nous voulons un tableau avec trois éléments que nous voulons éventuellement quand nous allons passer au mode facile contre mode dur, nous voulons 6.
Donc, nous allons commencer par 6.
C'est ce que nous voulons lorsque la page est chargée.
Ensuite, nous devons créer la fonction générer des couleurs aléatoires qui prend un nombre et renvoie X nombre de couleurs aléatoires au lieu d'un tableau.
Alors je vais le faire ici.
Fonction de générer des couleurs aléatoires et qui devrait prendre un argument que nous allons juste appeler engourdie et puis au lieu d'ici.
Très bien mon pseudo code.
Alors je vais faire un tableau.
Je vais ajouter des couleurs aléatoires au tableau et je vais retourner ce tableau à la fin.
Donc, pour commencer, c'est la partie la plus facile.
Rendre un tableau juste un vide.
Donc, nous allons appeler un r r juste un tableau vide et puis au fond, nous allons simplement revenir le même tableau.
La partie difficile est la logique qui va entre les deux.
Donc, ici, nous devons ajouter des couleurs aléatoires de savoir.
Donc ce que cela signifie, c'est que nous devons répéter quelque chose knowm nombre de fois.
Donc six fois ou trois fois.
Nous allons donc utiliser une boucle pour le faire.
Donc nous allons commencer avec notre boucle pour de notre égal à zéro.
I est moins que engourdi I plus plus.
Et ce n'est pas grave si nous commençons à zéro ou si nous commençons à 1 et nous faisons cela inférieur ou égal à parce que nous n'allons pas réellement utiliser I c'est juste un moyen de boucle à travers trois fois six fois Nahm fois.
Et puis dans ici nous allons réellement obtenir la couleur aléatoire et pousser dans le tableau.
Donc, cette ligne est en fait juste répéter fois engourdies.
Donc je vais faire une fonction distincte en fait qui va générer la couleur aléatoire pour nous et je vais juste appeler cette couleur aléatoire.
Donc la fonction de couleur aléatoire et ce que vous voyez est que j'ai une fonction ici.
Générer des couleurs aléatoires que j'appelle à l'intérieur de celui que j'appelle une autre fonction juste appelé couleur aléatoire et c'est vraiment juste pour briser un code.
Faire clairement modulaire ce qui fait ce que nous pourrions avoir tout dans aucune fonction à tous ce pourrait juste être ce que les gens appelleront le code de spaghetti c'est partout.
Nous allons donc ajouter quelques fonctions ici pour ajouter une certaine structure.
Et encore une fois à la fin de ce projet quand nous l'avons terminé, il semble bon toutes les fonctionnalités est là.
Je vais avoir une vidéo facultative sur la refactorisation et je vais parler de comment il peut changer les choses autour de les rendre un peu plus propre un peu plus joli, mais il va fonctionner exactement de la même manière.
Donc, pour commencer les couleurs aléatoires pour faire une couleur aléatoire, nous allons avoir besoin de choisir une lecture de 0 à 5 5 reps de 0 2 à 5 5 et puis nous avons besoin de choisir un vert de zéro à 2 5 5, puis un bleu .
Et donc pour choisir n'importe quel nombre de 0 à 255, nous devons également utiliser les mathématiques pas aléatoire.
Donc, ce ne sera pas mathématique au hasard.
Cela nous donne entre 0 et 1.
Il ne comprend pas un.
Nous devons multiplier par 256 parce que rappelez-vous que nous arrondir vers le bas.
Donc, nous voulons 255 pour être le plus grand nombre possible de plusieurs à multiplier par un autre 256 et puis nous avons besoin de plancher ce plancher mathématiques.
Donc, allez à mon conseil et collez dans ce code, vous pouvez voir si nous obtenons un nombre aléatoire entre 0 et 255 et vous ne verrez probablement pas qu'il va réellement à 255.
On va juste me faire confiance.
Mais vous pouvez voir au moins, il se rapproche.
Je pense que nous avons vu 253.
C'est assez bon pour l'instant.
Et vous voyez aussi tous les carrés sont allés à pourpre et c'est parce que notre générer des couleurs aléatoires ne retourne rien.
Il renvoie simplement une chaîne vide.
Donc, nous ne sommes pas en fait en boucle et donner une couleur à chacun.
Donc, c'est juste prendre le pourpre par défaut de C Ss juste une note latérale là.
Donc, cela va générer un nombre de 0 à 255.
Nous allons le sauver à une variable appelée R et puis nous ferons la même chose pour le vert et pour le bleu, juste comme cet espace ce correctement et changer les noms de sorte que G et B qui nous donnera trois numéros de 0 à 255.
Et la pire partie est de les synthétiser dans cette grosse chaîne qui suit le format de R.G. B entre parenthèses puis les nombres à l'intérieur de R G et B.
Et cela signifie beaucoup d'ouverture et de fermeture des cordes et des signes plus.
Alors commençons par ce qui ressemble à ceci.
Nous allons avoir notre G-B, puis ouvrez les parenthèses puis le canal rouge.
Ce nombre de 0 à 2 5 5 plus une virgule plus la valeur de G plus une autre virgule plus la valeur de B plus nos parenthèses de fermeture.
Et nous devrions être bien d'aller maintenant.
Cette grosse ficelle.
Et ce que nous voulons faire, c'est effectivement retourner cette chaîne juste comme ça.
Donc, retournez cette grosse chaîne et cela générera une couleur aléatoire.
Donc c'est beaucoup de travail pour une seule couleur.
Trois nombres différents 0 2 2 5 5.
Nous les mettons avec des virgules entre elles entre parenthèses autour des lettres R.G. B.
Et puis nous revenons pour que nous puissions l'utiliser ici.
Et si nous voulons juste tester si cela fonctionne, allons de l'avant et rafraîchir la page aller à notre consul et essayez juste d'appeler aléatoirement coloré et cela semble bon pour moi.
Nous obtenons une couleur aléatoire.
Les parenthèses sont correctes.
Les virgules sont toutes bonnes.
Allons-y maintenant et utilisez-le ici.
Nous allons donc appeler cette couleur aléatoire et nous allons pousser cela dans notre tableau.
Les voici.
Donc, notre poussée DOT et nous n'avons pas à utiliser la poussée, mais qui va faire ici.
Et cela va maintenant nous construire un joli tableau de couleurs.
Donc générer des couleurs aléatoires 6.
Nous appelons cela, il se répète six fois à chaque fois.
Il pousse une couleur aléatoire dans le tableau.
Je vais donc faire passer notre commentaire ici.
Voilà.
Et de vérifier que cela fonctionne si nous rafraîchissons.
Vous pouvez voir maintenant nous obtenons six couleurs aléatoires et non seulement ce sont des couleurs aléatoires que nous choisissons la couleur que nous avons choisi dans le tableau change également.
Nous n'avons donc pas rompu cela.
Tout fonctionne toujours ou le fait.
Voyons voir.
Donc, si je clique sur certaines de ces couleurs essayez à nouveau essayer de nouveau essayer encore peut-être que j'ai juste vraiment mauvais livre, mais pas de problème.
Le problème est un peu délicat.
C'est un peu semblable au bug que j'ai évoqué quand nous avons fait le jeu de gardien de score quand nous comparons les choses ici.
Si nous vérifions si l'utilisateur a raison si elles choisissent la bonne couleur, quelque chose allait mal avant d'avoir un numéro.
Et nous le comparons à une ficelle.
Dans ce cas, c'est un peu différent.
Alors laissez-moi vous montrer juste va faire une autre con. Ceinturon log cliquez pour colorer et puis choisir la couleur.
Et voyons à quoi ils ressemblent peut-être qu'ils sont légèrement différents.
Nous allons rafraîchir la page et ouvrir la con. Et commençons à cliquer.
Donc, celui-ci est une quantité moyenne de Fred un peu vert et un peu de bleu.
Alors, nous allons cliquer sur certains.
Et notez les nombres sur la gauche la chaîne RGV et celle sur la droite.
Et bien sûr, ceux-ci ne correspondent pas.
Mais si vous cliquez sur le bon vous pouvez voir que quand ils ne correspondent encore pense que nous avons tort.
Il est dit essayer à nouveau.
Et si vous comparez les deux cordes ici celle-ci est la couleur cliquée.
C'est ce qui revient.
Lorsque nous cliquons sur un élément et nous demandons ce point marqué arrière-plan et c'est la couleur que nous avons choisi dans le tableau.
Donc, en quelque sorte, ils sont légèrement différents.
Et ce qui se passe, c'est que lorsque nous définissons réellement la couleur d'arrière-plan d'un élément, le SS ajoute automatiquement dans le dortoir automatiquement ajouter 10 espaces entre.
Donc, pour fixer ce que nous voulons faire, il suffit d'ajouter des espaces ici entre nos numéros de sorte après les comètes et si nous faisons qu'ils vont alors comparer et être égal à l'autre.
C'est donc un bug difficile.
Il a juste à voir avec la façon dont nous comparons les choses avec les trois égaux et ce n'est pas que les égaux doubles fixeraient de toute façon.
Double les appels n'ignore pas les espaces ou quoi que ce soit, mais c'est juste un problème avec la façon dont nous avons généré les couleurs.
Donc, si nous essayons de nouveau et de rafraîchir.
Maintenant, nous allons simplement cliquer autour.
Vous pouvez voir que nos espaces sont ici et ceux-ci vont certainement correspondre.
Une fois que nous avons cliqué sur la bonne couleur qui est la dernière et nous obtenons notre bonne.
Donc, un bug délicat là pour conclure.
Essayons juste de jouer un jeu et un plein écran et nous débarrasser de la console et rafraîchir et admirer nos couleurs aléatoires.
La dernière chose que nous pourrions faire est quand nous l'avons corrigé que nous pourrions également changer le fond H-1 comme j'ai fait ici.
Donc, lorsque vous devinez la bonne couleur, il change la couleur de fond ainsi.
Et c'est un simple changement.
Tout ce que nous devons faire est de sélectionner le H-1.
Alors H-1 et nous pouvons simplement le sélectionner ce seul H-1 sur la page.
Donc, ici, je vais juste sélectionner au bas de la var H-1 est égal au document que le sélecteur de requêtes H-1 enregistrer que.
Et puis quand l'utilisateur devine correctement qui est ici nous allons changer H-1 DOD arrière-plan ou de style que l'arrière-plan.
Et cela devrait maintenant égaliser collecter la couleur et nous allons sauver qui vont à la bonne version de notre rafraîchissement de jeu et essayons de cliquer.
Et là, nous allons définitivement nous avons un moyen d'aller avec notre style par rapport à cela, mais nous y arrivons avec la logique.
Donc vous devinez incorrectement qui disparaissent en changeant simplement la couleur d'arrière-plan.
Et si vous avez deviné correctement, ils changent tous de couleur et le H-1 change aussi.
Dans la prochaine vidéo, nous allons ajouter la fonctionnalité de lecture à nouveau et nous allons ajouter un peu plus de style.