1 00:00:00,090 --> 00:00:01,280 Donc, nous sommes en bonne forme ici. 2 00:00:01,370 --> 00:00:06,980 Ce que nous voulons faire ensuite est de faire en sorte que nous n'utilisons pas les mêmes six couleurs à chaque fois. 3 00:00:07,230 --> 00:00:15,620 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. 4 00:00:15,630 --> 00:00:18,320 En fait, je vais écrire une autre fonction pour nous aider. 5 00:00:18,390 --> 00:00:34,590 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. 6 00:00:34,590 --> 00:00:41,820 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. 7 00:00:42,060 --> 00:00:43,510 Donc, nous allons commencer par 6. 8 00:00:43,560 --> 00:00:45,570 C'est ce que nous voulons lorsque la page est chargée. 9 00:00:45,900 --> 00:00:54,430 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. 10 00:00:54,450 --> 00:00:57,900 Alors je vais le faire ici. 11 00:00:57,900 --> 00:01:09,060 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. 12 00:01:09,060 --> 00:01:10,440 Très bien mon pseudo code. 13 00:01:10,440 --> 00:01:12,550 Alors je vais faire un tableau. 14 00:01:12,900 --> 00:01:23,640 Je vais ajouter des couleurs aléatoires au tableau et je vais retourner ce tableau à la fin. 15 00:01:24,120 --> 00:01:26,370 Donc, pour commencer, c'est la partie la plus facile. 16 00:01:26,370 --> 00:01:28,200 Rendre un tableau juste un vide. 17 00:01:28,380 --> 00:01:35,980 Donc, nous allons appeler un r r juste un tableau vide et puis au fond, nous allons simplement revenir le même tableau. 18 00:01:36,000 --> 00:01:38,610 La partie difficile est la logique qui va entre les deux. 19 00:01:38,640 --> 00:01:42,660 Donc, ici, nous devons ajouter des couleurs aléatoires de savoir. 20 00:01:42,690 --> 00:01:46,700 Donc ce que cela signifie, c'est que nous devons répéter quelque chose knowm nombre de fois. 21 00:01:46,760 --> 00:01:49,000 Donc six fois ou trois fois. 22 00:01:49,230 --> 00:01:50,830 Nous allons donc utiliser une boucle pour le faire. 23 00:01:51,120 --> 00:01:55,540 Donc nous allons commencer avec notre boucle pour de notre égal à zéro. 24 00:01:56,430 --> 00:02:01,800 I est moins que engourdi I plus plus. 25 00:02:02,100 --> 00:02:13,910 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. 26 00:02:14,130 --> 00:02:23,010 Et puis dans ici nous allons réellement obtenir la couleur aléatoire et pousser dans le tableau. 27 00:02:23,070 --> 00:02:28,190 Donc, cette ligne est en fait juste répéter fois engourdies. 28 00:02:28,590 --> 00:02:36,190 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. 29 00:02:36,270 --> 00:02:41,990 Donc la fonction de couleur aléatoire et ce que vous voyez est que j'ai une fonction ici. 30 00:02:42,090 --> 00:02:49,860 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. 31 00:02:49,860 --> 00:02:58,680 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. 32 00:02:58,830 --> 00:03:01,760 Nous allons donc ajouter quelques fonctions ici pour ajouter une certaine structure. 33 00:03:01,920 --> 00:03:07,090 Et encore une fois à la fin de ce projet quand nous l'avons terminé, il semble bon toutes les fonctionnalités est là. 34 00:03:07,230 --> 00:03:18,080 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. 35 00:03:18,090 --> 00:03:38,250 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 . 36 00:03:39,210 --> 00:03:45,490 Et donc pour choisir n'importe quel nombre de 0 à 255, nous devons également utiliser les mathématiques pas aléatoire. 37 00:03:45,570 --> 00:03:49,230 Donc, ce ne sera pas mathématique au hasard. 38 00:03:49,350 --> 00:03:51,760 Cela nous donne entre 0 et 1. 39 00:03:51,870 --> 00:03:53,070 Il ne comprend pas un. 40 00:03:53,220 --> 00:03:57,900 Nous devons multiplier par 256 parce que rappelez-vous que nous arrondir vers le bas. 41 00:03:58,050 --> 00:04:08,730 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. 42 00:04:08,900 --> 00:04:19,630 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. 43 00:04:19,660 --> 00:04:21,770 On va juste me faire confiance. 44 00:04:21,900 --> 00:04:23,700 Mais vous pouvez voir au moins, il se rapproche. 45 00:04:23,700 --> 00:04:25,590 Je pense que nous avons vu 253. 46 00:04:25,590 --> 00:04:26,770 C'est assez bon pour l'instant. 47 00:04:27,060 --> 00:04:33,920 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. 48 00:04:33,930 --> 00:04:36,240 Il renvoie simplement une chaîne vide. 49 00:04:36,300 --> 00:04:39,300 Donc, nous ne sommes pas en fait en boucle et donner une couleur à chacun. 50 00:04:39,300 --> 00:04:44,360 Donc, c'est juste prendre le pourpre par défaut de C Ss juste une note latérale là. 51 00:04:44,700 --> 00:04:48,480 Donc, cela va générer un nombre de 0 à 255. 52 00:04:48,870 --> 00:05:07,250 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. 53 00:05:07,530 --> 00:05:18,640 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. 54 00:05:18,900 --> 00:05:22,260 Et cela signifie beaucoup d'ouverture et de fermeture des cordes et des signes plus. 55 00:05:22,260 --> 00:05:25,390 Alors commençons par ce qui ressemble à ceci. 56 00:05:25,410 --> 00:05:32,350 Nous allons avoir notre G-B, puis ouvrez les parenthèses puis le canal rouge. 57 00:05:32,370 --> 00:05:48,980 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. 58 00:05:49,620 --> 00:05:51,230 Et nous devrions être bien d'aller maintenant. 59 00:05:51,340 --> 00:05:52,530 Cette grosse ficelle. 60 00:05:52,680 --> 00:05:58,570 Et ce que nous voulons faire, c'est effectivement retourner cette chaîne juste comme ça. 61 00:05:58,590 --> 00:06:03,350 Donc, retournez cette grosse chaîne et cela générera une couleur aléatoire. 62 00:06:03,360 --> 00:06:05,090 Donc c'est beaucoup de travail pour une seule couleur. 63 00:06:05,100 --> 00:06:07,650 Trois nombres différents 0 2 2 5 5. 64 00:06:07,650 --> 00:06:12,450 Nous les mettons avec des virgules entre elles entre parenthèses autour des lettres R.G. B. 65 00:06:12,660 --> 00:06:15,650 Et puis nous revenons pour que nous puissions l'utiliser ici. 66 00:06:15,660 --> 00:06:25,600 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. 67 00:06:25,620 --> 00:06:26,770 Nous obtenons une couleur aléatoire. 68 00:06:26,790 --> 00:06:27,910 Les parenthèses sont correctes. 69 00:06:27,990 --> 00:06:29,910 Les virgules sont toutes bonnes. 70 00:06:29,910 --> 00:06:33,510 Allons-y maintenant et utilisez-le ici. 71 00:06:34,170 --> 00:06:39,990 Nous allons donc appeler cette couleur aléatoire et nous allons pousser cela dans notre tableau. 72 00:06:39,990 --> 00:06:41,240 Les voici. 73 00:06:41,280 --> 00:06:46,510 Donc, notre poussée DOT et nous n'avons pas à utiliser la poussée, mais qui va faire ici. 74 00:06:46,710 --> 00:06:49,820 Et cela va maintenant nous construire un joli tableau de couleurs. 75 00:06:50,210 --> 00:06:52,580 Donc générer des couleurs aléatoires 6. 76 00:06:52,770 --> 00:06:56,740 Nous appelons cela, il se répète six fois à chaque fois. 77 00:06:56,910 --> 00:06:59,230 Il pousse une couleur aléatoire dans le tableau. 78 00:06:59,430 --> 00:07:02,440 Je vais donc faire passer notre commentaire ici. 79 00:07:02,460 --> 00:07:03,260 Voilà. 80 00:07:03,600 --> 00:07:06,040 Et de vérifier que cela fonctionne si nous rafraîchissons. 81 00:07:06,180 --> 00:07:15,250 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. 82 00:07:15,270 --> 00:07:16,520 Nous n'avons donc pas rompu cela. 83 00:07:16,530 --> 00:07:19,190 Tout fonctionne toujours ou le fait. 84 00:07:19,200 --> 00:07:20,000 Voyons voir. 85 00:07:20,000 --> 00:07:27,210 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. 86 00:07:27,400 --> 00:07:28,920 Le problème est un peu délicat. 87 00:07:29,130 --> 00:07:36,500 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. 88 00:07:36,930 --> 00:07:43,110 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. 89 00:07:43,110 --> 00:07:44,880 Et nous le comparons à une ficelle. 90 00:07:45,030 --> 00:07:46,760 Dans ce cas, c'est un peu différent. 91 00:07:46,920 --> 00:07:53,000 Alors laissez-moi vous montrer juste va faire une autre con. Ceinturon log cliquez pour colorer et puis choisir la couleur. 92 00:07:53,250 --> 00:07:56,190 Et voyons à quoi ils ressemblent peut-être qu'ils sont légèrement différents. 93 00:07:56,340 --> 00:08:00,570 Nous allons rafraîchir la page et ouvrir la con. Et commençons à cliquer. 94 00:08:00,570 --> 00:08:06,120 Donc, celui-ci est une quantité moyenne de Fred un peu vert et un peu de bleu. 95 00:08:06,300 --> 00:08:07,510 Alors, nous allons cliquer sur certains. 96 00:08:08,160 --> 00:08:12,700 Et notez les nombres sur la gauche la chaîne RGV et celle sur la droite. 97 00:08:12,990 --> 00:08:15,180 Et bien sûr, ceux-ci ne correspondent pas. 98 00:08:15,840 --> 00:08:21,950 Mais si vous cliquez sur le bon vous pouvez voir que quand ils ne correspondent encore pense que nous avons tort. 99 00:08:21,960 --> 00:08:23,220 Il est dit essayer à nouveau. 100 00:08:23,490 --> 00:08:28,080 Et si vous comparez les deux cordes ici celle-ci est la couleur cliquée. 101 00:08:28,080 --> 00:08:29,420 C'est ce qui revient. 102 00:08:29,550 --> 00:08:38,290 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. 103 00:08:38,400 --> 00:08:40,380 Donc, en quelque sorte, ils sont légèrement différents. 104 00:08:40,380 --> 00:08:50,620 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. 105 00:08:50,970 --> 00:09:02,930 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. 106 00:09:02,970 --> 00:09:04,890 C'est donc un bug difficile. 107 00:09:04,920 --> 00:09:11,740 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. 108 00:09:11,820 --> 00:09:16,460 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. 109 00:09:16,740 --> 00:09:19,240 Donc, si nous essayons de nouveau et de rafraîchir. 110 00:09:19,410 --> 00:09:20,990 Maintenant, nous allons simplement cliquer autour. 111 00:09:21,120 --> 00:09:24,780 Vous pouvez voir que nos espaces sont ici et ceux-ci vont certainement correspondre. 112 00:09:24,780 --> 00:09:32,060 Une fois que nous avons cliqué sur la bonne couleur qui est la dernière et nous obtenons notre bonne. 113 00:09:32,100 --> 00:09:34,650 Donc, un bug délicat là pour conclure. 114 00:09:34,650 --> 00:09:41,280 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. 115 00:09:41,280 --> 00:09:48,950 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. 116 00:09:49,110 --> 00:09:52,940 Donc, lorsque vous devinez la bonne couleur, il change la couleur de fond ainsi. 117 00:09:53,040 --> 00:09:54,910 Et c'est un simple changement. 118 00:09:54,960 --> 00:09:57,540 Tout ce que nous devons faire est de sélectionner le H-1. 119 00:09:58,080 --> 00:10:01,920 Alors H-1 et nous pouvons simplement le sélectionner ce seul H-1 sur la page. 120 00:10:01,950 --> 00:10:16,200 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. 121 00:10:16,200 --> 00:10:28,460 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. 122 00:10:29,610 --> 00:10:42,060 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. 123 00:10:42,930 --> 00:10:48,950 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. 124 00:10:49,200 --> 00:10:53,120 Donc vous devinez incorrectement qui disparaissent en changeant simplement la couleur d'arrière-plan. 125 00:10:53,400 --> 00:10:58,240 Et si vous avez deviné correctement, ils changent tous de couleur et le H-1 change aussi. 126 00:10:58,620 --> 00:11:03,910 Dans la prochaine vidéo, nous allons ajouter la fonctionnalité de lecture à nouveau et nous allons ajouter un peu plus de style.