1
00:00:00,170 --> 00:00:06,330
In deze video zijn er een paar kleine veranderingen die ik wil maken en dan ga ik om te praten over hoe we dit een beetje kon refactoren.

2
00:00:06,330 --> 00:00:09,570
Dus de eerste verandering is dat wanneer we winnen dit spel.

3
00:00:09,840 --> 00:00:11,860
Dus laten we winnen hier.

4
00:00:11,880 --> 00:00:16,320
Daar gaan wij en ik krijg dit juist bericht en ik klik opnieuw op het spel.

5
00:00:16,710 --> 00:00:18,080
Er staat nog steeds correct.

6
00:00:18,300 --> 00:00:22,030
En we willen dat dit opnieuw in te stellen die echt een snelle verandering.

7
00:00:22,320 --> 00:00:30,730
Alles wat we moeten doen is de code die gebruikt wordt wanneer we klikken op spelen weer dan we nodig hebben om de overspanning die we hier hebben te veranderen en maken het alleen maar leeg.

8
00:00:30,750 --> 00:00:33,760
Dus laten we gaan vinden dat dit het volledige scherm te maken.

9
00:00:34,410 --> 00:00:38,570
Dus toen we op dat reset knop die is hier.

10
00:00:39,360 --> 00:00:44,190
Alles wat we moeten doen is ons display dat we noemden boodschap display.

11
00:00:44,190 --> 00:00:48,090
Dus we dat gewoon overal doen hier beneden.

12
00:00:48,090 --> 00:00:57,960
Berichtvertoning tekst ups tekstinhoud gelijk lege string.

13
00:00:58,360 --> 00:01:00,330
En laten we eens kijken hoe dat gaat.

14
00:01:00,540 --> 00:01:01,730
Vernieuwen.

15
00:01:01,810 --> 00:01:03,740
OK laten we klikt u gewoon totdat we winnen.

16
00:01:04,050 --> 00:01:05,680
OK dus het juist hier zegt.

17
00:01:05,790 --> 00:01:09,440
En als ik klik nogmaals op spelen die weggaat.

18
00:01:09,660 --> 00:01:16,290
De andere kleine verandering die ik wil maken is dat deze toets pas weer zou moeten zeggen te spelen zodra de gebruiker wint.

19
00:01:16,320 --> 00:01:20,760
Dus ik zal de pagina te vernieuwen en het zegt nieuwe kleuren die is hoe we willen het aan het werk.

20
00:01:20,760 --> 00:01:23,910
En als ik win vraagt ​​het me als ik wil om opnieuw te spelen.

21
00:01:24,120 --> 00:01:30,080
En als ik dan opnieuw op te spelen willen we de knop tekst om terug te gaan naar nieuwe kleuren te veranderen.

22
00:01:30,090 --> 00:01:35,280
Dus echt klein verschil, maar ik wil alleen maar om het spel opnieuw te laten zien als de gebruiker alleen maar gewonnen.

23
00:01:35,850 --> 00:01:44,240
Dus ga naar onze code en we moeten naar de plaats waar de gebruiker het spel dat is hier wanneer de gebruiker op de geplukte kleur klikt wint vinden.

24
00:01:44,370 --> 00:01:56,650
Dus wanneer de gebruiker klikt op de juiste kleur te veranderen we de reset-knop tekst om tekstinhoud zeggen, maar dan wat we willen doen is wanneer de gebruiker klikt op de reset-knop gaan we dat veranderen.

25
00:01:56,790 --> 00:02:05,040
Deze dot tekstinhoud om terug te gaan naar nieuwe kleuren en we konden ook schrijven een resetknop.

26
00:02:05,040 --> 00:02:09,540
Maar het is makkelijker om dit te doen omdat we binnenkant van de event listener voor resetknop.

27
00:02:10,050 --> 00:02:15,270
En dat zou goed zijn als we vernieuwen snel tot we de juiste is.

28
00:02:15,360 --> 00:02:16,440
We willen om opnieuw te spelen.

29
00:02:16,680 --> 00:02:17,480
Zeker.

30
00:02:17,490 --> 00:02:26,900
Nu gaat het terug naar Nieuwe kleuren en elke keer zegt het enkel nieuwe kleuren over en over en als ik win het is de enige keer dat er staat opnieuw te spelen.

31
00:02:26,910 --> 00:02:34,350
Dus een echt klein ding, maar ik vind het echt storend is dat wanneer ik op een van deze knoppen klikt heeft dit vervelende omtrek omheen.

32
00:02:34,680 --> 00:02:36,990
En dit is eigenlijk onze browser om dat te doen.

33
00:02:36,990 --> 00:02:38,560
En we kunnen zetten dat af.

34
00:02:38,610 --> 00:02:41,940
Ik weet niet of je dat kunt zien op het scherm cast, maar er is een blauwe omtrek.

35
00:02:42,070 --> 00:02:43,190
Het is vrij van schadelijke.

36
00:02:43,200 --> 00:02:54,290
Dus om zich te ontdoen van dat we naar onze style sheet en als we onze knoppen selecteren hier iets verderop kunnen we gewoon schrijven schetsen none en terug te gaan en te vernieuwen.

37
00:02:54,310 --> 00:02:57,810
Als we nu klikken we niet dat blauw overzicht rond te krijgen.

38
00:02:57,960 --> 00:03:00,260
Dus dat is alles wat ik wilde doen voor het spel logica.

39
00:03:00,450 --> 00:03:03,500
Nu willen we een beetje tijd te besteden refactoring uw code.

40
00:03:03,630 --> 00:03:04,880
Dus laten we teruggaan.

41
00:03:04,980 --> 00:03:12,120
Het eerste dat uit springt is voor mij deze code hier, waar we hebben een harde knop een eenvoudige knop en de luisteraar voor een ieder.

42
00:03:12,240 --> 00:03:14,370
En ze zijn zeer vergelijkbaar in hoe ze werken.

43
00:03:14,370 --> 00:03:17,100
Behalve een van hen met drie vierkanten.

44
00:03:17,100 --> 00:03:20,860
De ander werkt met zes maar voor de rest doen ze in principe hetzelfde.

45
00:03:21,090 --> 00:03:23,720
Dus we kunnen eigenlijk verminderen dat duplicatie.

46
00:03:23,880 --> 00:03:33,180
En in plaats van het geven van een ieder een idee wat we gaan doen is zich te ontdoen van die ID's en geef ze een klasse en ze gaan tot dezelfde klasse te delen.

47
00:03:33,390 --> 00:03:37,660
Dus de klasse zal stand worden genoemd.

48
00:03:37,770 --> 00:03:39,570
Dus we zullen ze klasse mode geven.

49
00:03:39,600 --> 00:03:42,850
Vergeet niet een knop of een item kunnen twee klassen.

50
00:03:42,870 --> 00:03:45,010
Ze hoeven alleen maar te worden gescheiden door spaties.

51
00:03:45,030 --> 00:03:48,030
heeft zo deze klasse mode en klasse geselecteerd.

52
00:03:48,420 --> 00:03:49,020
OK.

53
00:03:49,160 --> 00:03:59,220
Dus nu gaan we en deze twee knoppen te verwijderen hier en maak een lijst van de knoppen genaamd modusknoppen en dat gaat om een ​​document dat selector queries zijn.

54
00:03:59,350 --> 00:04:03,090
Paul Datt mode.

55
00:04:03,160 --> 00:04:05,410
Dus dat geeft ons twee knoppen.

56
00:04:05,700 --> 00:04:08,360
Dan gaan we lus door mode knoppen.

57
00:04:08,370 --> 00:04:13,020
Dus moeten wij voor var gelijk is aan nul.

58
00:04:13,290 --> 00:04:16,740
Minder dan modusknop opzienbarend.

59
00:04:16,910 --> 00:04:25,380
En wat dit ook zal laten doen is als in de toekomst willen we een medium of normal moeilijkheid modus of een super hard moeilijkheidsgraad mode toe te voegen.

60
00:04:25,470 --> 00:04:34,800
We hoeven niet extra luisteraars toe te voegen, omdat we allemaal van ze te selecteren en vervolgens met behulp van een lus versus Hier hebben we met de hand te schrijven een voor elke knop die we toevoegen.

61
00:04:35,100 --> 00:04:35,330
OK.

62
00:04:35,340 --> 00:04:36,480
Zo eindigen de loop hier.

63
00:04:36,570 --> 00:04:37,740
Plus plus.

64
00:04:38,100 --> 00:04:50,590
En wat we gaan doen is het toevoegen van een modusknoppen ik dot toe te voegen event listener klik en ze zullen gewoon laten het op dit voor nu.

65
00:04:50,590 --> 00:05:01,100
Voordat we verder gaan Ik ben eigenlijk van plan om commentaar uit de code gewoon zo dat we kunnen vertellen wat loopt van onze nieuwe code en wat we willen dat er gebeurt wanneer we op één van deze knoppen.

66
00:05:01,210 --> 00:05:05,580
Het eerste wat we willen dat er gebeurt is dat de geselecteerde klasse te worden toegepast.

67
00:05:05,680 --> 00:05:07,260
Dus nu is het alleen wanneer we zweven.

68
00:05:07,300 --> 00:05:10,220
We krijgen dat de kleur die ik wil dat het zijn als we klikken.

69
00:05:10,780 --> 00:05:23,510
Dus moeten we deze dot klasse lijst dot doen zijn geselecteerd, net als dat dat is wat we hier hebben naar beneden behalve wij doen het gemakkelijk knop en hard te drukken.

70
00:05:23,710 --> 00:05:27,070
We kunnen gewoon doen om dit die verwijst naar wat er geklikt.

71
00:05:27,220 --> 00:05:31,180
Het enige probleem is dat we nodig hebben om het uit te zetten het origineel ook.

72
00:05:31,540 --> 00:05:47,320
En dat doen we gaan gewoon naar de harde code dit een beetje en schrijf modusknoppen zero dot dot klasse lijst verwijderen geselecteerd en dan zullen we het van de andere ook verwijderen.

73
00:05:47,800 --> 00:05:49,360
Dus omdat er slechts twee knoppen.

74
00:05:49,390 --> 00:05:50,550
Dit is geen probleem.

75
00:05:50,560 --> 00:05:57,690
Wat we doen is het verwijderen van beide knoppen alleen maar om veilig te zijn en dan toe te voegen aan degene die we gewoon geklikt.

76
00:05:57,700 --> 00:06:00,690
Dus nu als we testen dit uit en te vernieuwen.

77
00:06:01,030 --> 00:06:06,630
Je kunt zien dat het alleen aan degene die we zojuist geklikt wordt toegevoegd en het is verwijderd uit de andere.

78
00:06:06,640 --> 00:06:10,900
Dus wat we moeten doen is het toevoegen van het grootste deel van de logica hier voor deze knoppen.

79
00:06:11,080 --> 00:06:30,420
Dus moeten we uitzoeken hoe vele pleinen om te laten zien halen nieuwe kleuren en dan moeten we een nieuwe pick kiezen om de kleur die de kleur die we proberen te proberen om te klikken op.

80
00:06:30,670 --> 00:06:37,850
En dan tot slot willen we de pagina bij te werken aan wijzigingen.

81
00:06:38,110 --> 00:06:59,650
Dus om dit alles Ik ben eigenlijk van plan om een ​​nieuwe functie en die functie ik ga gewoon noemen het resetten te doen en dat is iets wat we gaan gebruiken in een paar plaatsen, omdat we deze stappen een herhalende veel plukken nieuwe kleuren kiezen van een nieuwe geplukt kleur van de kleuren array en vervolgens de actualisering van de pagina om de nieuwe kleuren te tonen en het updaten van dit scherm hier.

82
00:06:59,650 --> 00:07:03,400
We doen dat de hele tijd, dus ik ga gewoon dat allemaal op een functie.

83
00:07:03,400 --> 00:07:08,500
Dus wat we moeten doen in deze functie is dat ik eigenlijk alleen maar gaat om het kopiëren van hier beneden.

84
00:07:08,530 --> 00:07:09,860
We hebben dit al gedaan hier.

85
00:07:09,990 --> 00:07:15,200
Ik was van plan om dit alles in te kopiëren naar onze Reset zomaar.

86
00:07:15,430 --> 00:07:17,150
En laten we eens kijken naar wat er gebeurt.

87
00:07:17,350 --> 00:07:29,310
Dus in plaats van reset of het genereren van de willekeurige kleuren, afhankelijk van de gevoelloos pleinen variabele en dan zijn we het kiezen van een nieuwe kleur we veranderen van de kleur weergegeven content.

88
00:07:29,530 --> 00:07:32,020
We hebben deze tekst inhoud is gelijk aan nieuwe kleuren.

89
00:07:32,050 --> 00:07:37,060
En dat daadwerkelijk zal niet werken omdat dit vroeger verwijzend naar de reset-knop.

90
00:07:37,390 --> 00:07:40,420
En dat was in het evenement in het centrum voor resetknop.

91
00:07:40,540 --> 00:07:43,240
We zijn nu in plaats van een aparte functie genaamd reset.

92
00:07:43,270 --> 00:07:45,720
Dus we moeten hard code die als reset-knop.

93
00:07:45,880 --> 00:07:49,140
En dan zijn we het veranderen van de boodschap display leeg zijn.

94
00:07:49,570 --> 00:07:54,660
En dan zijn we een lus door alle pleinen en we updaten van hun kleur.

95
00:07:54,970 --> 00:07:57,920
En dan zijn we het veranderen van de achtergrond van de 8: 1 terug naar de blauwe.

96
00:07:58,180 --> 00:08:02,170
En als we gewoon bellen dat in plaats van hier zijn we alleen nog maar te resetten.

97
00:08:02,170 --> 00:08:06,760
Er is een klein probleem en dat is dat we nooit bijwerkt gevoelloos pleinen.

98
00:08:06,880 --> 00:08:11,870
Dus toen ik op de eenvoudige knop klikt u de pleinen variabel drie veranderen.

99
00:08:11,920 --> 00:08:15,180
Toen ik op de harde knop klikt u wilt veranderen te zijn 6.

100
00:08:15,220 --> 00:08:22,960
Dus om dat te doen minuut gaan hier en voeg een if-statement en alles wat we kunnen doen is te schrijven als deze tekst content.

101
00:08:22,960 --> 00:08:27,880
Zodat de knop is geklikt op als de tekst inhoud is gelijk aan gemakkelijk.

102
00:08:28,250 --> 00:08:36,510
Wat we gaan doen is zeggen gevoelloos vierkanten is gelijk aan drie L's aantal vierkanten is gelijk aan zes.

103
00:08:36,640 --> 00:08:43,030
En dan zullen we de reset-functie die de gevoelloos pleinen zullen gebruiken zoals je hier kunt zien in onze reset-functie aan te roepen.

104
00:08:43,150 --> 00:08:47,410
We gebruiken een aantal pleinen op te roepen onze genereren van willekeurige kleuren functie.

105
00:08:47,600 --> 00:08:51,970
Dus moeten we een aantal pleinen bijgewerkt die we hier doen hebben.

106
00:08:52,000 --> 00:08:57,010
Er is eigenlijk een kortere manier van schrijven van dit dat sommige mensen zijn grote fans van.

107
00:08:57,010 --> 00:08:58,580
Het heet de ternaire operator.

108
00:08:58,570 --> 00:09:01,720
Dus ik ga het eerst te schrijven en dan zal ik het hebben over hoe het werkt.

109
00:09:01,720 --> 00:09:06,350
Dus deze tekst inhoud is gelijk aan gelijk gelijken.

110
00:09:06,670 --> 00:09:10,870
Gemakkelijk vraagteken.

111
00:09:11,000 --> 00:09:19,110
Numb pleinen is drie colon gevoelloos pleinen gelijk aan zes.

112
00:09:19,120 --> 00:09:23,710
Dus dit een regel hier doet precies hetzelfde als deze vier lijnen hier.

113
00:09:23,710 --> 00:09:25,430
Deze vijf lijnen.

114
00:09:25,510 --> 00:09:27,360
Dus het is wel de ternaire operator.

115
00:09:27,400 --> 00:09:28,950
Er zijn drie delen aan.

116
00:09:28,960 --> 00:09:30,860
Het eerste wat is de toestand.

117
00:09:31,070 --> 00:09:42,080
Zo kunt u dit leest alsof deze tekst inhoud is gelijk aan makkelijk dan is er geen vierkanten is gelijk aan 3 Anders is er geen vierkanten is gelijk aan 6.

118
00:09:42,250 --> 00:09:44,060
Dus het is gewoon een manier van schrijven van dit.

119
00:09:44,380 --> 00:09:46,280
En ik zal houden als dit.

120
00:09:46,270 --> 00:09:55,970
Meestal als we gewoon snel een regel als statements waar we één waarde instelt om twee verschillende mogelijke opties is het een goed use case voor de ternaire operator.

121
00:09:56,600 --> 00:09:59,420
We hebben nog steeds een probleem is echter dat we eigenlijk nooit verstopt.

122
00:09:59,420 --> 00:10:01,380
Of het tonen van het juiste aantal pleinen.

123
00:10:01,390 --> 00:10:03,940
Dus wat gebeurt er als ik te vernieuwen.

124
00:10:04,030 --> 00:10:04,950
We beginnen op de hard mode.

125
00:10:04,950 --> 00:10:05,860
Dat werkt prima.

126
00:10:05,870 --> 00:10:07,290
Alles werkt hetzelfde.

127
00:10:07,450 --> 00:10:16,160
Als ik op easy klik al hebben we nog zes vierkanten hier en je ziet de onderste drie gewoon niet kleuren te veranderen, omdat we alleen gegenereerd drie kleuren.

128
00:10:16,370 --> 00:10:21,890
Dus wat we moeten doen in plaats van onze reset-functie moeten we rekening te houden met dat.

129
00:10:21,880 --> 00:10:28,000
Zodat hier in plaats van deze lus waarin we de kleur van de kwadraten u wijzigt de kleur van de kleuren matrix exact overeenkomen.

130
00:10:28,210 --> 00:10:34,060
Als er slechts drie items in de array colors wat we eigenlijk moeten doen is verbergen van de andere drie pleinen.

131
00:10:34,270 --> 00:10:40,670
Dus ik ga om te schrijven dat met de instructie if en ik ga gewoon om te controleren of er een kleur te schilderen.

132
00:10:40,670 --> 00:10:42,070
Ik doe ook iets anders.

133
00:10:42,110 --> 00:10:47,410
Dus als er een kleur die we gaan schilderen of verander de achtergrondkleur van de kwadraten.

134
00:10:47,410 --> 00:10:57,200
I van die kleur anders moeten we pleinen ik weer aan niets te veranderen.

135
00:10:57,320 --> 00:11:02,920
En dat moet worden vormgegeven om te laten zien, net als dat.

136
00:11:03,100 --> 00:11:05,130
En dus dat zal dan te verbergen voor ons.

137
00:11:05,360 --> 00:11:14,870
Dus wat gebeurt er als ik op de eenvoudige knop klikt u op Ik heb een serie van kleuren met drie items werden doorlussen zes pleinen en een hercontrole.

138
00:11:14,920 --> 00:11:19,790
Als er een kleur die overeenkomt met dat veld en de eerste drie zal zijn.

139
00:11:19,820 --> 00:11:22,890
Dus zetten we de achtergrondkleur om de kleur van de array.

140
00:11:23,020 --> 00:11:26,700
Maar de laatste drie kleuren die ik zal niet zijn.

141
00:11:26,740 --> 00:11:27,910
Of daadwerkelijk zal worden undefined.

142
00:11:27,910 --> 00:11:29,240
Er zal geen kleur daar.

143
00:11:29,470 --> 00:11:31,010
Dus dat is vals.

144
00:11:31,270 --> 00:11:34,560
En wat er gebeurt is dan zetten we het display niet zijn.

145
00:11:34,820 --> 00:11:37,770
Dus laat ik je zien hoe dat werkt refresh.

146
00:11:38,230 --> 00:11:41,180
Als ik klik op eenvoudig de onderste drie verdwijnen.

147
00:11:41,170 --> 00:11:43,720
Blijf klikken makkelijk krijgen we drie nieuwe kleuren.

148
00:11:43,780 --> 00:11:44,840
Laten we het spel spelen.

149
00:11:44,840 --> 00:11:46,410
Daar gaan we.

150
00:11:46,450 --> 00:12:01,720
Wij doen een probleem is echter dat als ik op een harde we wisselende alle zes pleinen om een ​​nieuwe Bactrim kleur hebben, maar we zijn niet het verbergen van de onderste drie zal doen rond dat te krijgen klik hebben, is vlak voordat we geven een nieuwe achtergrond kleur om de pleinen.

151
00:12:01,720 --> 00:12:03,960
Ik ga om te gaan en opnieuw te laten zien.

152
00:12:03,970 --> 00:12:09,470
Dus het gaat om pleinen Ik dacht stijl scherm is gelijk aan block.

153
00:12:09,590 --> 00:12:11,320
Dus dat is hoe we hen terug te brengen.

154
00:12:11,410 --> 00:12:13,140
En we gaan gewoon om dat te doen voor alle zes.

155
00:12:13,150 --> 00:12:14,170
Het is geen big deal.

156
00:12:14,200 --> 00:12:19,320
Dus als we hen een achtergrondkleur we gaan gewoon om altijd ervoor te zorgen dat ze eerst zichtbaar.

157
00:12:19,340 --> 00:12:24,590
Dus nu als we vernieuwen en ze gaan te gemakkelijk hebben we drie spelen een spel.

158
00:12:24,760 --> 00:12:26,160
Ik klik op hard.

159
00:12:26,380 --> 00:12:28,070
Nu krijgen we zes bellers.

160
00:12:28,070 --> 00:12:30,520
Laten we een spelletje spelen.

161
00:12:30,520 --> 00:12:33,700
Daar gaan we op gemakkelijk en gaan we terug naar drie.

162
00:12:33,700 --> 00:12:34,280
Okee.

163
00:12:34,450 --> 00:12:37,390
Zodat u kunt zien we opgeruimd een veel code hier.

164
00:12:37,510 --> 00:12:39,480
Dit was vroeger een stuk langer.

165
00:12:39,480 --> 00:12:41,360
Het is als drie keer lang op zijn minst.

166
00:12:41,380 --> 00:12:46,120
En twee verschillende aangeklikte luisteraars en nu onze code is relatief veelzijdig.

167
00:12:46,120 --> 00:12:54,040
Als we wilden een middelzwaar knop toe te voegen alles wat we moeten doen is hier deze lijn waar we een nother aantal pleinen zou hebben.

168
00:12:54,040 --> 00:13:09,160
Misschien willen we 5 vierkanten of we willen een super moeilijk niveau waar we hebben 10 pleinen we hoeven alleen maar om het aantal pleinen te veranderen en bellen met onze reset-functie naar de volgende plek waar we onze reset-functie kan gebruiken krijgen is eigenlijk als we op de reset-knop .

169
00:13:09,430 --> 00:13:17,630
Dus alles wat we moeten doen is er vervangen alles in plaats van de reset-knop klikt Lisner met slechts reset net als dat.

170
00:13:17,650 --> 00:13:19,500
Zodat drijft onze code veel.

171
00:13:19,570 --> 00:13:22,650
We zijn net ontdoen van 10 of zo lijnen.

172
00:13:23,170 --> 00:13:26,280
Dus laten we terug gaan sparen zonder haakjes.

173
00:13:26,600 --> 00:13:29,020
Laten we naar de browser en zorg ervoor dat het werkt nog steeds.

174
00:13:29,020 --> 00:13:31,580
Dus laten we een spelletje spelen.

175
00:13:31,850 --> 00:13:35,000
Klik op play weer en het herstelt prima.

176
00:13:35,320 --> 00:13:40,750
Laten we op eenvoudige spelen een ander spel en ook herstelt prima.

177
00:13:40,750 --> 00:13:41,430
Okee.

178
00:13:41,530 --> 00:13:43,340
Dus rijden we onze code nogal een beetje.