1
00:00:00,650 --> 00:00:02,670
Tamam, bu videoda tekrar geleceğiz.

2
00:00:02,670 --> 00:00:05,040
Birkaç yeni özellik üzerinde çalışacağız.

3
00:00:05,040 --> 00:00:08,190
İlki, oyunu kazandığım zamandır.

4
00:00:08,460 --> 00:00:09,410
Bana doğru olduğunu söylüyor.

5
00:00:09,630 --> 00:00:15,440
Ve sonra yeni renkler almak için tekrar oynayabilirim ve eğer henüz kazanamamışsam.

6
00:00:15,530 --> 00:00:19,460
Ama ben de yeni renkler istiyorum çünkü bazı renklerimden hoşlanmıyorum.

7
00:00:19,680 --> 00:00:21,750
Yeni renkler düğmesini de tıklatabilirim.

8
00:00:21,930 --> 00:00:27,300
altı rastgele renk arasından görünmesi ve en son kolay ve zorlu moda geri geleceğiz.

9
00:00:27,300 --> 00:00:32,770
Temel olarak yeni renkleri seçmek için oyunu sıfırlayacak bir butona ihtiyacımız var rasgele bir rengin

10
00:00:32,940 --> 00:00:35,870
Yani bu düğme aynı şeyi yapar.

11
00:00:36,040 --> 00:00:42,240
Metin, oyunu kazanmışsak ve yeniden oynamak isteyip istemediğimizi sorarsa oyna tekrar tıklayabiliriz

12
00:00:42,240 --> 00:00:44,150
ve bu onu sıfırlar.

13
00:00:44,220 --> 00:00:48,540
Ancak aynı zamanda yeni renkleri tıklayabilir ve bu da onu sıfırlar.

14
00:00:48,570 --> 00:00:49,840
İşte odaklanacağımız şey de bu.

15
00:00:50,010 --> 00:00:55,590
Ve başlamak için devam edip düğmeye basacağım ve bu şeritte bu düğmeyi

16
00:00:55,590 --> 00:01:00,290
yeni bir renk veya yeniden oynamak için içerilecek olan şeridi ekleyeceğim.

17
00:01:00,870 --> 00:01:02,890
Ve zaten sahip olduğumuz mesajı içeriyor.

18
00:01:03,060 --> 00:01:04,970
Ve sonra iki buton daha sonra yapacağız.

19
00:01:05,250 --> 00:01:11,590
Yani, yapmamız gereken ilk işi yaparsak, zaten bir div sahibiz, sadece şerit kimliğini vereceğim

20
00:01:12,750 --> 00:01:14,240
ve bunu kullanabiliriz.

21
00:01:14,550 --> 00:01:19,560
Ve sonra, zaten doğru veya yenisini gösterecek bir alana sahibiz.

22
00:01:19,590 --> 00:01:27,990
Ve burada, düğmesini ekleyeceğiz ve bu düğme, yenileyebileceğimiz yeni renkler söyleyerek

23
00:01:28,780 --> 00:01:29,820
başlayacak.

24
00:01:30,160 --> 00:01:33,140
Tamam, beklediğiniz kadar kötü görünüyor.

25
00:01:33,330 --> 00:01:39,330
Devam edin ve beyaz arka plan rengini ekleyelim ve her şeyi bu div içine ortalayalım. Yani div ''

26
00:01:39,330 --> 00:01:40,210
şerit olarak adlandırılıyor.

27
00:01:40,590 --> 00:01:45,220
Hadi C SS'lerimize gidelim ve bir ID olan Strype'i seçeceğiz.

28
00:01:45,360 --> 00:01:48,970
Dolayısıyla şeridi daha sonra düşünmemiz gerekir.

29
00:01:49,260 --> 00:01:54,580
Ve biz beyaz olacak arka plan rengi bir arka plan ayarlayacağız.

30
00:01:54,660 --> 00:02:02,460
Yüksekliği 30 piksel olacak şekilde ayarlayacağım, böylece güzel ve uzun boylu div,

31
00:02:02,460 --> 00:02:09,030
göreceli olarak uzun boy div olacak ve metni Center olarak ayarlayacağım.

32
00:02:09,300 --> 00:02:13,330
Ve eğer şimdi yenersem beyaz bir div elde etmeye başlasın.

33
00:02:13,350 --> 00:02:15,220
Olandan biraz daha uzun boylu.

34
00:02:15,240 --> 00:02:17,230
Burada herhangi bir şeye bir düğme var.

35
00:02:17,400 --> 00:02:23,640
Kazanırsam veya kaybedersem ya da yanılıyorsam, göremediğin bir alan var demektir.

36
00:02:23,640 --> 00:02:27,290
Bunun nedeni, o aralıktaki metin beyazdır.

37
00:02:28,380 --> 00:02:34,950
Dolayısıyla ne yapmayı düşündüğünüz şerit bölümümüze gidiyor ve metin renginin siyah

38
00:02:34,950 --> 00:02:38,690
olması gerekiyor, ancak maalesef bu işe yaramıyor.

39
00:02:38,880 --> 00:02:45,390
şey siyah metin rengi olmalı ve siz de bunu düşünebilirsiniz, süper spesifik olan

40
00:02:45,390 --> 00:02:52,110
yumuşak bir metin olduğunu düşünürsünüz. CSS özgünlüğümüzün erken dersleri ve kimliği çok özeldir.

41
00:02:52,170 --> 00:02:58,890
Ve bu özgünlük meselesidir çünkü biz burada bu çizgiyle şerit fikriyle olan şeyin

42
00:02:58,890 --> 00:02:59,710
içindeki her

43
00:02:59,790 --> 00:03:05,440
Bunun nedeni, renklerin ID şeritli div'de siyah olmasıdır.

44
00:03:05,970 --> 00:03:13,080
Ve sonra tüm alanları genişletiyoruz, böylece burada renk beyaz olarak görülebiliyor ve böylece beyaz renk olarak ayarlanıyor ve

45
00:03:13,140 --> 00:03:17,820
daha spesifik hale geliyor çünkü aslında öğenin üst kısmından daha çok hedefleniyor

46
00:03:17,820 --> 00:03:20,630
ve rengin miras sahibi olmasını sağlıyoruz.

47
00:03:21,090 --> 00:03:22,570
Bu yüzden birkaç seçeneğimiz var.

48
00:03:22,590 --> 00:03:25,960
Yapacağım, aslında şu ana kadar bundan kurtulmaktır.

49
00:03:26,040 --> 00:03:31,710
Rengi artık beyaz olacak şekilde ayarlamayacağız ve yenileyebiliriz ve renklerin değişmediğini göreceksiniz, ancak

50
00:03:31,710 --> 00:03:36,720
tüm açıklıkların beyaz olduğunu söyleyen çizgiden kurtulduğumuz halde, hala beyaz bir

51
00:03:37,050 --> 00:03:42,960
alan olduğunu göreceksiniz çünkü bir H1'in içindedir ve beyaz olan H1 metin rengini devralır.

52
00:03:42,990 --> 00:03:45,590
Aynı şekilde bu alan siyah.

53
00:03:45,600 --> 00:03:51,720
Siyahın metin rengini ya da sadece burada normal renkte siyah olan rengini, burada

54
00:03:51,720 --> 00:03:55,160
renk siyahı olarak görebileceğiniz çevresindeki şerit div'den devraldı.

55
00:03:55,410 --> 00:03:56,770
Ve bizim işimiz bu.

56
00:03:57,060 --> 00:03:57,660
TAMAM.

57
00:03:57,810 --> 00:04:06,720
Şimdi, oyunu başlatmak için bu düğmeyi başlatmak için bir olay dinleyicisi eklememiz gerektiğini düşünelim.

58
00:04:06,870 --> 00:04:09,750
Ve bunu yapmadan önce o düğmeyi seçmemiz gerekiyor.

59
00:04:09,960 --> 00:04:18,000
Bu yüzden bu düğmeyi ve kimliğini burada vereyim, onu yalnızca Kimliğini sıfırlamak eşit ararız ve daha sonra

60
00:04:18,000 --> 00:04:21,000
bir Javascript yerine sıfırlama düğmesini seçeceğiz.

61
00:04:21,000 --> 00:04:31,980
Yani var reset düğmesi oktavımızla sorguyu sorgulayan veya sıfırlayan belgede eşittir.

62
00:04:31,980 --> 00:04:37,120
Ve sonra her zaman olduğu gibi basit test olayı dinleyicisini eklemek isterim.

63
00:04:37,140 --> 00:04:40,680
Böylece sıfırlama düğmesi olay dinleyicisi ekler.

64
00:04:40,860 --> 00:04:51,990
yapacağımız şeyleri tıklarsak tazelemek gibi basit bir uyarı hızlı sıfırlama düğmesi yaparsınız.

65
00:04:52,070 --> 00:04:52,820
Tıklayıp

66
00:04:52,970 --> 00:04:57,590
Ve ben şunu tıklarsam uyarı alırım ve bu gitmek için iyi olduğum anlamına gelir.

67
00:04:57,590 --> 00:05:01,030
Öyleyse bir sonraki adımda, aslında sıfırlama mantığı üzerinde çalışabiliriz.

68
00:05:01,250 --> 00:05:03,890
Dolayısıyla yapmamız gereken sözde kodu yazalım.

69
00:05:03,890 --> 00:05:10,030
Bu düğmeye tıkladığınızda tüm yeni renkleri üretmeniz gerekir.

70
00:05:10,040 --> 00:05:20,750
Diziden yeni rasgele bir renk seçmeliyiz ve sayfadaki karelerin renklerini

71
00:05:20,750 --> 00:05:22,030
değiştirmeliyiz.

72
00:05:22,280 --> 00:05:28,310
Dolayısıyla tüm yeni renkleri üretmek için aslında mevcut rastgele renkler üreten işleve sahip olduk.

73
00:05:29,030 --> 00:05:33,940
Dolayısıyla sadece renklerin şu anda altı rasgele renk üretmeye eşit olduğuna inanıyoruz.

74
00:05:34,580 --> 00:05:41,270
Ve sonra yeni bir rasgele renk seçeceğiz, böylece rengi seçmek, tanımladığımız yöntem veya işlevin

75
00:05:41,270 --> 00:05:42,860
rengini seçmeye eşit.

76
00:05:42,860 --> 00:05:48,890
Gerçekten yapmamız gereken bir şey daha var; bu, bu görüntü rengini yeni renkler ile eşleşecek

77
00:05:48,890 --> 00:05:49,540
şekilde değiştiriyor.

78
00:05:49,850 --> 00:05:52,040
Dolayısıyla, basit bir şekilde

79
00:05:55,250 --> 00:06:01,090
elde edilen renge uyacak şekilde renkli ekran görüntüsünü değiştirelim deriz.

80
00:06:01,160 --> 00:06:08,870
yeni renkler tıklamaya çalışırsak yaptığı iş altı yeni renk üretiyor demektir.

81
00:06:12,890 --> 00:06:21,890
Tek yapmamız gereken renkli ekran nokta metin içeriğinin seçilen renge eşit olması ve

82
00:06:21,890 --> 00:06:23,110
sayfamızı yenilersek

83
00:06:23,120 --> 00:06:25,400
Onları henüz görmüyoruz çünkü bu kodumuz yok.

84
00:06:25,580 --> 00:06:30,750
Ve sonra bunlardan birini seçilmiş renkte seçip, burada gördüğümüz pikta rengine uyacak

85
00:06:30,770 --> 00:06:31,410
şekilde değiştiriyor.

86
00:06:31,730 --> 00:06:36,220
Dolayısıyla orada yeni bir rasgele renk ve perde arkasında altı rastgele renk veriyor.

87
00:06:36,230 --> 00:06:42,230
Son parça, sayfadaki bu altı yeni rengi yansıtacak ve bunu daha önce yaptık.

88
00:06:42,260 --> 00:06:49,070
kareleri dolaşıyoruz ve kare biçiminde olan bu arka planı renkler olarak değiştiriyoruz.

89
00:06:49,460 --> 00:06:50,440
Aşağıda tüm

90
00:06:50,450 --> 00:06:56,060
Bu yüzden hepsini burada çoğaltarak başlayacağım ve bunu refactor edeceğiz.

91
00:06:56,350 --> 00:06:58,340
Ama hepsini buraya koymaya başlamak için.

92
00:06:58,370 --> 00:07:07,170
Dolayısıyla tüm kareler karelerinden geçerek artı artı çizin ve sonra yapmamız gereken tek

93
00:07:07,450 --> 00:07:12,600
şey kareleri söylemek, arka planın renklere eşit olması.

94
00:07:13,020 --> 00:07:15,820
Kurtaracağım.

95
00:07:16,070 --> 00:07:21,660
Yenilersek ve yeni renkler üzerine tıklarsak 60 rasgele renk üretir.

96
00:07:21,740 --> 00:07:22,820
Bir tane seçer.

97
00:07:22,820 --> 00:07:29,090
Ekranı resim rengini yansıtacak şekilde günceller ve yeni altı rengi eşleştirmek için altı

98
00:07:29,090 --> 00:07:30,360
kareyi de değiştirir.

99
00:07:30,710 --> 00:07:34,730
Öyleyse deneyelim ve önceki mantığımızın devam edip etmediğini kontrol edelim.

100
00:07:35,240 --> 00:07:35,850
TAMAM.

101
00:07:36,290 --> 00:07:39,130
Yani bu iyi bir miktar kırmızı.

102
00:07:39,140 --> 00:07:41,460
Çok az yeşil ve iyi mavi bir miktar.

103
00:07:41,840 --> 00:07:45,280
Haklı olduğunu düşünmediğimiz bazılarını tıklamaya çalışalım.

104
00:07:46,160 --> 00:07:48,880
Ve şimdi de mendillerden birine gidelim.

105
00:07:49,070 --> 00:07:50,940
Yani mavinin biraz daha kırmızı gibi görünüyor.

106
00:07:50,960 --> 00:07:56,510
Bu yüzden bunu tahmin edeceğim ve haklıyız ve işler hala iyi durumda gibi görünüyor.

107
00:07:56,540 --> 00:07:58,470
Yeniden yeni renkler.

108
00:07:58,610 --> 00:08:00,320
Bunu sıfırlamak istiyoruz.

109
00:08:00,320 --> 00:08:01,960
Bu çok küçük bir kozmetik şey.

110
00:08:02,030 --> 00:08:08,470
Fakat yeni renkleri tıklarsak, ekranı sıfırlarsak siyaha veya bu

111
00:08:08,510 --> 00:08:11,000
koyu gri renge döner.

112
00:08:11,000 --> 00:08:16,670
şey, burada tekrar görebilmek için oynamak istediğimizde, burada kazanacağımızı söylemek istiyoruz.

113
00:08:17,030 --> 00:08:18,480
Yapmamız gereken diğer

114
00:08:18,530 --> 00:08:20,350
Bu çok yeşil.

115
00:08:20,540 --> 00:08:24,980
Kazanıyorum ve bana tekrar oynatmamı söylüyor ve aynı şeyi yapıyor.

116
00:08:24,980 --> 00:08:29,260
İşlevsel olarak gerçekten de sadece biz ve farklı metin değişmez.

117
00:08:29,300 --> 00:08:31,060
Bu yüzden yapmak kolaydır.

118
00:08:31,100 --> 00:08:35,150
Tek yapmamız gereken, kodun kazanım olup olmadığını kontrol etmek olduğunu bulmak.

119
00:08:35,180 --> 00:08:36,240
İşte burada.

120
00:08:36,620 --> 00:08:39,500
Ve sonra sadece o düğmenin metin içeriğini değiştirmek istiyoruz.

121
00:08:39,740 --> 00:08:41,820
Böylece düğmeye reset butonu adı verildi.

122
00:08:41,930 --> 00:08:51,740
Böylece sıfırlama düğmesi, metin içeriği yeni bir renk söyleyen bir soru işareti yenileyerek yeniden oynatılır.

123
00:08:52,790 --> 00:08:54,560
Şimdi bunlardan birini denemeyi deneyelim.

124
00:08:54,740 --> 00:08:58,750
Bu yüzden bu çok kırmızı ve çok yeşil ve biraz mavi.

125
00:08:58,790 --> 00:09:02,070
Bu yüzden çok kırmızı ve yeşil bir sürü bize sarı renk verecek.

126
00:09:02,210 --> 00:09:04,100
Bu yüzden bazılarını daraltalım.

127
00:09:04,100 --> 00:09:08,180
Ve sonra biraz mavi daha aydınlık ve daha parlak hale gelecek.

128
00:09:08,480 --> 00:09:13,590
Bu yüzden bunlardan birini ya da bunu denersek, haklı olmadığını görürsün.

129
00:09:13,880 --> 00:09:17,230
Ve bu bizim cevabımız burada ve bize tekrar oynamamızı söylüyor.

130
00:09:17,300 --> 00:09:20,120
Ve gerçek hızlı ve aynısını yapar.

131
00:09:20,180 --> 00:09:23,570
Bahsettiğim son şey arka plan rengini değiştiriyor.

132
00:09:23,570 --> 00:09:28,430
Yani burada, sıfırlama düğmesinin sonunda bunu yapabiliriz.

133
00:09:28,520 --> 00:09:30,950
Sadece H-1'i seçeceğiz.

134
00:09:31,200 --> 00:09:34,610
Burada seçtiğimiz tek nokta.

135
00:09:34,670 --> 00:09:37,090
Arka planı çevirin.

136
00:09:37,160 --> 00:09:40,600
UPS eşittir.

137
00:09:40,640 --> 00:09:47,600
Ve bu onaltılık 2 3 2 3 2 3, ki bunu unuttuysanız, SEE'ye bakıp vücut

138
00:09:47,900 --> 00:09:49,560
arka plan rengini değerlendirebilirsiniz.

139
00:09:49,800 --> 00:09:55,410
Ya da yanlış rengi seçerseniz, renklerden birini kaldırdığımızda buraya koyduk.

140
00:09:55,580 --> 00:09:58,680
Arka plan rengini cesetle aynı olacak şekilde değiştiriyoruz.

141
00:09:59,150 --> 00:10:02,130
Tamam, yeni renkleri yenileyelim.

142
00:10:02,330 --> 00:10:03,820
Şimdi kazanalım.

143
00:10:04,010 --> 00:10:10,760
Sadece rastgele sadece zaman uğruna tekrar oynattık ve tekrar siyah bir zemine

144
00:10:10,760 --> 00:10:11,300
dönüyor.

145
00:10:11,310 --> 00:10:13,060
Ya da koyu gri arka plan.

146
00:10:13,570 --> 00:10:15,530
Tamam, hepsi bu video için.

147
00:10:15,530 --> 00:10:19,790
Sonraki adımda, kolay ve sert mod arasında seçim yapmak için düğmeleri ekleyeceğiz.

148
00:10:19,820 --> 00:10:22,590
Ve son olarak, güzel görünmesi için şeyleri stilizeceğiz