1
00:00:00,240 --> 00:00:01,080
Welkom terug.

2
00:00:01,080 --> 00:00:07,350
In deze video gaan we om zich te concentreren op het toevoegen van de gemakkelijke en de harde toetsen hier, dat zal invloed hebben op de moeilijkheidsgraad van het spel.

3
00:00:07,350 --> 00:00:14,590
Dus toen we de pagina laadt moeilijk is reeds geselecteerd en zien we zes verschillende knoppen hier of zes verschillende pleinen.

4
00:00:14,760 --> 00:00:18,610
En dan kan ik op eenvoudig is en dat blijft geselecteerd.

5
00:00:18,900 --> 00:00:21,180
En we hebben slechts drie pleinen om uit te kiezen.

6
00:00:21,270 --> 00:00:23,270
En dan kan ik terug naar het hart.

7
00:00:23,520 --> 00:00:26,860
We gaan beginnen met het toevoegen van de twee knoppen die we nodig hebben.

8
00:00:27,000 --> 00:00:31,050
Dus ik ga in mijn HMO te gaan en toe te voegen in twee knoppen.

9
00:00:31,560 --> 00:00:33,800
De eerste die we zullen zeggen gemakkelijk.

10
00:00:34,020 --> 00:00:37,470
De tweede zal zeggen hard en zal vernieuwen.

11
00:00:37,900 --> 00:00:38,440
OK.

12
00:00:38,520 --> 00:00:40,610
En dat ziet er prima voor nu.

13
00:00:41,160 --> 00:00:44,030
U zult merken onze overspanning is nog geen toegang tot iedere ruimte.

14
00:00:44,300 --> 00:00:46,020
En ik zie dat er wat tekst verschijnt.

15
00:00:46,020 --> 00:01:01,900
Het duwt deze knoppen weg zal later richten op de styling, maar er is één element van de styling die ik wil concentreren op die wordt waardoor het lijkt geselecteerd wanneer de pagina wordt geladen of wanneer we kiezen makkelijk of moeilijk de bijbehorende knop moet blauw blijven.

16
00:01:02,160 --> 00:01:06,540
En de manier waarop we dat gebruikt een klasse en draaien die klasse en uitgeschakeld.

17
00:01:06,540 --> 00:01:12,780
Dus ik ga een klas hier te definiëren en het gaat om eenvoudiger dan deze stijl styling hier slechts gaat om een ​​kleur te zijn.

18
00:01:12,810 --> 00:01:18,520
Dus onze achtergrondkleur en de klasse zal worden genoemd gekozen, want dat is wat we doen.

19
00:01:18,720 --> 00:01:22,110
We voegen de geselecteerde klasse aan de knop die geselecteerd is.

20
00:01:22,440 --> 00:01:25,870
En het is gewoon gaat om een ​​achtergrond set aan jou om te starten.

21
00:01:26,280 --> 00:01:33,820
En dan wat we gaan doen is gewoon geven de hard mode knop klasse gelijk gekozen.

22
00:01:34,500 --> 00:01:39,600
En als we frissen op onze code kun je zien dat hard bezig.

23
00:01:39,810 --> 00:01:44,540
Het is afschuwelijk Ja, maar het op zijn minst laat ons zien dat we op hard mode.

24
00:01:44,550 --> 00:01:55,070
Dus dan wat we willen doen is de code dat is een schakelaar die wanneer ze op gemakkelijk en dan is het lastigste deel toont de drie kleuren wanneer u klikt op de gemakkelijke en de zes kleuren wanneer u klikt op het hart.

25
00:01:55,350 --> 00:01:56,340
OK.

26
00:01:56,610 --> 00:01:58,580
Laten we hier beginnen.

27
00:01:58,650 --> 00:02:08,460
Dus om deze knoppen eigenlijk werken we nodig hebben om ze in onze javascript te selecteren en dan moet een aantal snelle luisteraars en doe wat en lopen wat code bij elk van hen wordt geklikt.

28
00:02:08,520 --> 00:02:14,490
Dus laten we het gemakkelijker maken om te kiezen en ik ga om te beginnen door ze elk een ID gemakkelijk te geven.

29
00:02:14,590 --> 00:02:24,230
DTN en dan harde ETN en we zullen het veranderen van deze als u een rode vlaggen hier ziet of als u denkt dat we het gebruik van te veel ideeën.

30
00:02:24,330 --> 00:02:26,660
We zullen refactoring dit in slechts een paar momenten.

31
00:02:26,760 --> 00:02:28,630
Maar we gaan beginnen met twee verschillende ID's.

32
00:02:28,650 --> 00:02:30,500
Easy Button harde toets.

33
00:02:30,660 --> 00:02:32,570
Ga naar onze javascript en selecteer ze.

34
00:02:32,580 --> 00:02:40,100
Dus var gemakkelijk ETN gelijk document doc vraag selector met Octa.

35
00:02:40,410 --> 00:02:42,430
Gemakkelijk ETN.

36
00:02:42,600 --> 00:02:45,210
Zorg ervoor dat we kapitaliseren dingen hetzelfde.

37
00:02:45,270 --> 00:02:46,270
Daar gaan we.

38
00:02:46,650 --> 00:02:54,240
En hetzelfde voor hard en ik weet niet of je gevangen die in subliem.

39
00:02:54,240 --> 00:03:06,140
Als je het woord eenvoudig te selecteren en je raakt Kamandi het zal dan automatisch de volgende aanleg en ik kan blijven doen om ze allemaal te selecteren, maar ik wil gewoon die twee en ik ga hard typen plaats.

40
00:03:06,210 --> 00:03:09,670
Dus hebben we twee knoppen en dan kunnen we zoiets doen.

41
00:03:09,960 --> 00:03:13,690
Gemakkelijk PTEN voegen evenement luisteraar.

42
00:03:13,800 --> 00:03:23,950
Klik en alles wat we gaan doen is gewoon alert dat de gemakkelijke knop werd gestopt net als dit.

43
00:03:24,600 --> 00:03:31,170
Alert eenvoudig knop geklikt en ervoor te zorgen dat dat werkt.

44
00:03:31,200 --> 00:03:49,050
Dus we refresh klik op OK Makkelijk zegt Gemakkelijk knop geklikt en dan zullen we dit voor harde knop dupliceren en we zullen zeggen dat de harde knop is te stoppen en te vernieuwen eenvoudig werkt nog steeds en hard, maar het vertelt ons dat de harde knop is geklikt.

45
00:03:49,410 --> 00:03:57,390
Dus in plaats van gewoon te doen het werk dat te laten aan het verkrijgen van de klasse van de geselecteerde klasse om na te denken welke is geselecteerd.

46
00:03:57,810 --> 00:04:02,020
Dus als we klik op de knop gemakkelijk alles wat we willen doen is eenvoudig te drukken.

47
00:04:02,070 --> 00:04:11,120
Doc klasse lijst toe te voegen geselecteerd en als we nu vernieuwen ik klik op easy.

48
00:04:11,420 --> 00:04:12,920
Het heeft een geselecteerde klasse.

49
00:04:12,940 --> 00:04:19,630
Eenvoudig, maar het probleem is dat het nog steeds op de harde toets dus dat is eenvoudig op te lossen.

50
00:04:19,650 --> 00:04:30,520
We willen gewoon een harde knop doc Cross lijst dot verwijderen en nu als we op gemakkelijk de hard mode verdwijnt.

51
00:04:30,660 --> 00:04:47,630
Maar als we op de harde we nog steeds niet dat de logica, zodat we kunnen dat oplossen door gewoon het kopiëren van deze code over en we zullen nu moeten harde toetsen klassenloze dat add geselecteerde makkelijk knop klasse lijst die verwijderen geselecteerd.

52
00:04:48,160 --> 00:04:49,970
OK laten we testen het uit.

53
00:04:50,890 --> 00:04:51,630
Okee.

54
00:04:51,630 --> 00:05:02,930
Dus hebben we nu het gemakkelijker deel gedaan wat de twee knoppen tonen welke momenteel is geselecteerd en ik verfrissen en hard wordt automatisch geselecteerd, want we hebben zes elementen.

55
00:05:02,940 --> 00:05:12,730
Next up moeten we de logica toe te voegen aan de moeilijkheid daadwerkelijk te veranderen niet alleen de stijl van deze knoppen hier, maar slechts drie elementen of zes vierkanten tonen.

56
00:05:12,930 --> 00:05:15,840
Dus we moeten doen dat de volgende voordat we aan de slag.

57
00:05:15,870 --> 00:05:19,110
Laten we eens kijken terug op de oplossing om te zien hoe het werkt.

58
00:05:19,110 --> 00:05:36,510
Dus als ik te vernieuwen en ik op eenvoudige mededeling dat we nieuwe kleuren te krijgen en we hebben om dat te doen, want er is een risico dat ik zes kleuren hier en de kleur die hier gekozen is wellicht een van deze drie dat wanneer ik op gemakkelijke deze drie zijn verwijderd.

59
00:05:36,510 --> 00:05:39,400
Dus dat zou een mooi spel breken bug.

60
00:05:39,600 --> 00:05:42,860
Dus in plaats van deal met dat we gewoon gaan om drie nieuwe kleuren te kiezen.

61
00:05:42,990 --> 00:05:45,870
Zodat het proces we frissen.

62
00:05:45,930 --> 00:05:54,640
Dus het proces is wanneer ik op de eenvoudige knop klikt gaan we het genereren van drie nieuwe kleuren voor de array colors gaan één kleur uit deze drie plukken.

63
00:05:54,750 --> 00:05:57,490
We gaan update die met een geplukt kleur verschijnen.

64
00:05:57,510 --> 00:05:59,450
We gaan naar de drie pleinen hier te werken.

65
00:05:59,640 --> 00:06:08,610
En het belangrijkste is dat we ook verbergen van de drie andere pleinen, zodat we niet te verwijderen we gewoon verbergen ze door het instellen van display om niet zijn.

66
00:06:09,120 --> 00:06:11,010
En dan Hetzelfde geldt voor hard.

67
00:06:11,010 --> 00:06:13,930
Genereren we zes nieuwe kleuren in de array colors.

68
00:06:13,950 --> 00:06:16,080
We halen één van onze oogsten te worden gekleurd.

69
00:06:16,230 --> 00:06:17,850
Wij tonen dat hier.

70
00:06:18,000 --> 00:06:23,740
Dan laten we drie vakjes onderaan en stel elk een kleur.

71
00:06:24,270 --> 00:06:24,730
OK.

72
00:06:24,810 --> 00:06:26,570
Dus laten we nu aan te pakken dit.

73
00:06:26,820 --> 00:06:31,170
Allereerst toen we klik op de knop gemakkelijk laten we daar beginnen.

74
00:06:31,380 --> 00:06:39,520
We gaan willen nieuwe kleuren te genereren, zodat kleuren gelijk aan het genereren van willekeurige kleuren ditmaal 3.

75
00:06:40,410 --> 00:06:50,820
En dan een keer hebben we dat gedaan gaan we willen een nieuw geplukt kleur te kiezen dus kozen kleur gelijk kiezen kleur, net als dat.

76
00:06:50,820 --> 00:06:58,400
Dus zodra we onze kleuren en onze geplukt kleur kunnen we beginnen met alleen het veranderen van het display hier om de nieuwe foto's te laten zien kleur.

77
00:06:59,070 --> 00:07:06,050
Dus dat is net zo eenvoudig als zeggen kleurenscherm tekstinhoud evenaart geplukt kleur.

78
00:07:06,360 --> 00:07:11,410
En als we frissen ik ga wat nieuwe kleuren hier gewoon om te laten zien een paar dingen.

79
00:07:11,580 --> 00:07:19,630
Wanneer ik op makkelijk als je eerder vermeld de kleur verandert en achter de schermen is er een kleuren array die ook verandert.

80
00:07:19,650 --> 00:07:27,490
Dus laten we eens kijken welke kleuren is op dit moment en klik ik op easy mode en ik kijk naar welke kleuren weer is en het is anders.

81
00:07:27,870 --> 00:07:30,990
En het pakte ook de kleur is anders.

82
00:07:30,990 --> 00:07:38,190
Dus nu laten we praten over hoe we het verbergen van de drie onderste divs toen we op easy mode of kunnen we de top drie te verbergen.

83
00:07:38,190 --> 00:07:38,730
Het maakt niet uit.

84
00:07:38,730 --> 00:07:46,360
Maar ik ga naar de onderste drie de manier waarop we dat zullen doen is door het doorlussen en het instellen van de onderste drieën weer te geven onroerend goed voor niemand te zijn.

85
00:07:46,560 --> 00:07:48,440
Dus laat me zien hoe dat werkt.

86
00:07:48,510 --> 00:07:49,870
Ik ga gewoon naar een van ze op te halen.

87
00:07:49,980 --> 00:08:01,850
Dus laten we een document vraag selector allemaal vierkant of een vierkant en dan werken met de vijfde.

88
00:08:02,250 --> 00:08:11,320
Nou eigenlijk de zesde met een index van vijf en stel die stijl beeldscherm niet zijn.

89
00:08:12,150 --> 00:08:13,760
En je zult zien dat het verdwijnt.

90
00:08:13,770 --> 00:08:19,000
En dan, als ik wil dat het terug te komen die ik zal als we op hard mode Ik moet gewoon stijl te zeggen.

91
00:08:19,050 --> 00:08:22,160
Weergave gelijk slot.

92
00:08:22,500 --> 00:08:23,280
Okee.

93
00:08:23,490 --> 00:08:30,980
Dus laten we gaan door en de uitvoering van deze in onze code in de manier waarop zal dit te bereiken is door het doorlopen van alle zes op het eerste.

94
00:08:31,170 --> 00:08:34,820
En voor de eerste drie gaan we ze een nieuwe kleur te geven.

95
00:08:35,040 --> 00:08:37,380
En voor de onderste drie gaan we om ze te verbergen.

96
00:08:37,410 --> 00:08:40,380
Dus in plaats van twee lussen te doen dat we het in een keer zal doen.

97
00:08:40,560 --> 00:08:43,980
Dus voor var ik gelijk is aan nul.

98
00:08:43,980 --> 00:08:48,140
Ik heb net minder dan pleinen uit lengte.

99
00:08:48,300 --> 00:08:54,390
Plus plus we gaan om te profiteren van het feit dat de kleuren heeft drie items in het.

100
00:08:54,390 --> 00:08:58,000
Dus we gaan iets doen als dit als de kleuren I.

101
00:08:58,440 --> 00:09:02,350
Dus als er een volgende kleur dus dit zal gebeuren op de eerste drie.

102
00:09:02,610 --> 00:09:11,020
We gaan pleinen I stijl de achtergrond is gelijk aan kleur te schrijven.

103
00:09:12,660 --> 00:09:22,740
Dus voor de eerste drie in ons geval, want kleuren heeft slechts drie punten gaan we lus door alle pleinen en controleren of er een kleur op die index.

104
00:09:22,770 --> 00:09:27,320
En als er gaan we de kleur van de eerste drie te veranderen.

105
00:09:27,390 --> 00:09:29,160
Dus laten we Laten we ervoor zorgen dat werkt.

106
00:09:29,160 --> 00:09:33,990
Ik klik op gemakkelijk en je ziet alleen de top drie zijn aan het veranderen.

107
00:09:33,990 --> 00:09:35,470
Dus we zijn in de buurt.

108
00:09:35,520 --> 00:09:38,550
Alles wat we willen doen is nu verbergen van de onderste drie.

109
00:09:39,000 --> 00:09:41,040
Dus we zullen dat doen anders.

110
00:09:42,370 --> 00:09:48,970
Squares I stijl die vertoning gelijk none.

111
00:09:49,600 --> 00:10:00,010
En als we vernieuwen en maken het volledige scherm als ik op easy mode kun je zien dat we verliezen de onderste drie en de kleuren van de top drie zijn aan het veranderen.

112
00:10:00,640 --> 00:10:03,010
En laten we proberen om erachter te komen welke dit is.

113
00:10:03,050 --> 00:10:08,850
Dus honderd drieënzestig rood 125 groen en een beetje van blauw.

114
00:10:08,950 --> 00:10:10,190
Daar gaan we.

115
00:10:10,300 --> 00:10:13,200
U kunt vernieuwen proberen een paar meer.

116
00:10:13,210 --> 00:10:19,030
We hebben wel een klein probleem als ik een aantal van deze te vernieuwen en ik klik op easy mode.

117
00:10:19,030 --> 00:10:21,010
We alleen het genereren van drie kleuren hier.

118
00:10:21,140 --> 00:10:26,600
Maar als ik op de knop nieuwe kleuren op, dus ik zal je laten zien welke kleuren eruit ziet nu.

119
00:10:26,740 --> 00:10:27,640
Het is drie items.

120
00:10:27,760 --> 00:10:32,330
Als ik klik op nieuwe kleuren al en dan kijk ik naar kleuren.

121
00:10:33,070 --> 00:10:38,340
Het is eigenlijk zes items en dat is omdat we niet het bijhouden van die modus die we op.

122
00:10:38,350 --> 00:10:40,440
Zodat de code is hier op de reset-knop.

123
00:10:40,510 --> 00:10:44,520
We zijn net zeggen kleuren is gelijk aan willekeurige kleuren te genereren.

124
00:10:44,680 --> 00:10:46,370
Dus moeten we uiteindelijk vast te stellen dat.

125
00:10:46,600 --> 00:10:54,700
Maar voordat we dat doen laten we ons harde knop, zodat het zet ons terug naar zes pleinen en elk heeft zijn eigen kleur om dat te doen.

126
00:10:54,850 --> 00:11:00,000
Ik ga slechts enkele van deze code te nemen en te dupliceren het naar beneden hier wat altijd een slecht teken.

127
00:11:00,490 --> 00:11:03,250
En dat is waarom we dit gaan refactoren in slechts een klein beetje.

128
00:11:03,280 --> 00:11:04,870
Dus het eerste wat ik wil doen.

129
00:11:04,870 --> 00:11:09,380
Ik ga gewoon om al het in onze harde knop event listener kleuren kopiëren.

130
00:11:09,400 --> 00:11:16,000
Het gaat om zes kleuren zijn pikt kleur zal hetzelfde zijn kleurendisplay tekstinhoud is hetzelfde.

131
00:11:16,000 --> 00:11:18,880
En dan gaan we lus door ze allemaal in deze lus.

132
00:11:18,880 --> 00:11:20,590
We moeten twee verschillende dingen te doen.

133
00:11:20,590 --> 00:11:24,200
De eerste is om een ​​nieuwe kleur voor elke vierkante wijzen.

134
00:11:24,460 --> 00:11:29,980
Maar we hebben ook potentieel moeten ervoor zorgen dat de drie zijn unhidden aan de onderkant.

135
00:11:30,430 --> 00:11:38,990
Dus we gaan om zich te ontdoen van de if voor nu en we gaan gewoon om alle pleinen ingesteld op een achtergrondkleur om kleuren te zijn.

136
00:11:39,430 --> 00:11:43,880
En alle pleinen zal een weergave van blok hebben.

137
00:11:44,230 --> 00:11:51,710
Dus dit is een beetje verspilling, omdat we alleen technisch moeten de laatste drie en we zijn het resetten van alle van hen om het display blok.

138
00:11:51,850 --> 00:11:54,940
Maar dat is een heel klein ding dat we kunnen richten op later.

139
00:11:55,000 --> 00:12:03,150
Dus laten we eens zien of dit werkt refresh vertelt ons dat we hebben een syntax error on line 36 Laten we eens kijken wat we missen.

140
00:12:03,670 --> 00:12:05,600
En we hebben net een extra accolade hier.

141
00:12:05,710 --> 00:12:10,210
Dus als we nu op te slaan en te vernieuwen we hebben zes kleuren, zoals we altijd hebben.

142
00:12:10,210 --> 00:12:12,190
Als ik klik op easy krijgen we drie.

143
00:12:12,310 --> 00:12:15,260
Als ik hard op ik terug ga nu naar zes.

144
00:12:15,370 --> 00:12:18,780
Ik krijg een nieuwe kleur hier en laten we maar zorg ervoor dat die blijft werken.

145
00:12:18,850 --> 00:12:23,280
Zo makkelijk harde gemakkelijk moeilijk als ik naar hard mode.

146
00:12:23,380 --> 00:12:25,510
Laten we klikt u nogmaals op de nieuwe kleuren.

147
00:12:25,570 --> 00:12:29,570
Ga terug naar eenvoudig terug naar de harde eenvoudig en hard te gaan.

148
00:12:29,650 --> 00:12:29,930
Okee.

149
00:12:29,920 --> 00:12:32,320
En laten we dit te spelen en te zien of het werkt.

150
00:12:32,320 --> 00:12:37,410
Dus kies kleur is 196 170 57.

151
00:12:37,450 --> 00:12:42,240
Dus veel lees veel groen en een beetje blauw.

152
00:12:42,460 --> 00:12:44,970
Dus dat is veel rood en groen is een gele kleur.

153
00:12:45,070 --> 00:12:46,650
Dus het gaat niet om die ene of die ene zijn.

154
00:12:46,660 --> 00:12:52,120
Dat men gaat dit echt snel zijn en dat het lijkt alsof het werkt prima.

155
00:12:52,380 --> 00:12:55,880
Als ik op easy klik gaan we weer terug naar drie kleuren.

156
00:12:56,050 --> 00:13:11,350
Het meest urgente probleem waarmee ons is echter wanneer ik in easy mode en ik klik op het spel nogmaals dit gaat om het genereren van zes kleuren niet drie en het gaat om een ​​willekeurige kleur te kiezen van de zes die niet mogen worden weergeven van ons die gaat problematisch vast mee zijn.

157
00:13:11,350 --> 00:13:15,730
Alles wat we moeten doen is een variabele die houden van wat mode dat we op houdt.

158
00:13:15,730 --> 00:13:19,650
Makkelijk of moeilijk of het aantal pleinen drie of zes.

159
00:13:19,840 --> 00:13:21,530
Dus we zullen dat doen hier op.

160
00:13:21,640 --> 00:13:40,180
We zullen een variabele met de naam aantal pleinen en dat begint om 6 en we zullen gewoon verklaren dat hier en zeggen kleuren is gelijk aan het genereren van willekeurige kleuren van aantal en laten we het aantal velden of pleinen.

161
00:13:40,240 --> 00:13:47,020
Het is een beetje makkelijker als dat en op te slaan.

162
00:13:47,140 --> 00:13:50,120
En dan moeten we vervangen dat in een paar plaatsen.

163
00:13:50,170 --> 00:14:00,040
Dus toen we op easy mode u wilt gevoelloos vierkanten zijn drie en dan het genereren we willekeurige kleuren zonder pleinen.

164
00:14:00,430 --> 00:14:18,850
En dan verder naar beneden toen we op de harde toets willen we een aantal pleinen tot 6 zo gevoelloos pleinen gelijk aan zes en dan het genereren van willekeurige kleuren pleinen en dan is er nog een paar andere plaatsen hier toen we op dat resetknop.

165
00:14:18,850 --> 00:14:24,540
We willen het juiste aantal kleuren die zou zijn Nahm pleinen daar ook te genereren.

166
00:14:24,580 --> 00:14:28,970
Dus dat moet zorgen voor het voor ons als we terug te gaan en te vernieuwen.

167
00:14:29,530 --> 00:14:33,080
We gaan naar easy mode en laten we winnen deze.

168
00:14:33,190 --> 00:14:35,280
Dus meestal rood een weinig blauw.

169
00:14:35,320 --> 00:14:37,350
Niet deze.

170
00:14:37,660 --> 00:14:38,740
Niet die.

171
00:14:38,740 --> 00:14:39,830
Daar gaan we.

172
00:14:39,880 --> 00:14:47,140
En als ik op play klik nogmaals laten we zeker wanneer ik kleuren typen we slechts drie kleuren te zien.

173
00:14:47,140 --> 00:14:55,240
En als ik keek naar pakte kleur hoopt pakte een kleur die je kunt zien dat het inwendige van de array colors.

174
00:14:55,450 --> 00:14:56,880
Zodat we niet zorgen te maken over dat niet meer.