Tamam, bu videoda tekrar geleceğiz.
Birkaç yeni özellik üzerinde çalışacağız.
İlki, oyunu kazandığım zamandır.
Bana doğru olduğunu söylüyor.
Ve sonra yeni renkler almak için tekrar oynayabilirim ve eğer henüz kazanamamışsam.
Ama ben de yeni renkler istiyorum çünkü bazı renklerimden hoşlanmıyorum.
Yeni renkler düğmesini de tıklatabilirim.
altı rastgele renk arasından görünmesi ve en son kolay ve zorlu moda geri geleceğiz.
Temel olarak yeni renkleri seçmek için oyunu sıfırlayacak bir butona ihtiyacımız var rasgele bir rengin
Yani bu düğme aynı şeyi yapar.
Metin, oyunu kazanmışsak ve yeniden oynamak isteyip istemediğimizi sorarsa oyna tekrar tıklayabiliriz
ve bu onu sıfırlar.
Ancak aynı zamanda yeni renkleri tıklayabilir ve bu da onu sıfırlar.
İşte odaklanacağımız şey de bu.
Ve başlamak için devam edip düğmeye basacağım ve bu şeritte bu düğmeyi
yeni bir renk veya yeniden oynamak için içerilecek olan şeridi ekleyeceğim.
Ve zaten sahip olduğumuz mesajı içeriyor.
Ve sonra iki buton daha sonra yapacağız.
Yani, yapmamız gereken ilk işi yaparsak, zaten bir div sahibiz, sadece şerit kimliğini vereceğim
ve bunu kullanabiliriz.
Ve sonra, zaten doğru veya yenisini gösterecek bir alana sahibiz.
Ve burada, düğmesini ekleyeceğiz ve bu düğme, yenileyebileceğimiz yeni renkler söyleyerek
başlayacak.
Tamam, beklediğiniz kadar kötü görünüyor.
Devam edin ve beyaz arka plan rengini ekleyelim ve her şeyi bu div içine ortalayalım. Yani div ''
şerit olarak adlandırılıyor.
Hadi C SS'lerimize gidelim ve bir ID olan Strype'i seçeceğiz.
Dolayısıyla şeridi daha sonra düşünmemiz gerekir.
Ve biz beyaz olacak arka plan rengi bir arka plan ayarlayacağız.
Yüksekliği 30 piksel olacak şekilde ayarlayacağım, böylece güzel ve uzun boylu div,
göreceli olarak uzun boy div olacak ve metni Center olarak ayarlayacağım.
Ve eğer şimdi yenersem beyaz bir div elde etmeye başlasın.
Olandan biraz daha uzun boylu.
Burada herhangi bir şeye bir düğme var.
Kazanırsam veya kaybedersem ya da yanılıyorsam, göremediğin bir alan var demektir.
Bunun nedeni, o aralıktaki metin beyazdır.
Dolayısıyla ne yapmayı düşündüğünüz şerit bölümümüze gidiyor ve metin renginin siyah
olması gerekiyor, ancak maalesef bu işe yaramıyor.
şey siyah metin rengi olmalı ve siz de bunu düşünebilirsiniz, süper spesifik olan
yumuşak bir metin olduğunu düşünürsünüz. CSS özgünlüğümüzün erken dersleri ve kimliği çok özeldir.
Ve bu özgünlük meselesidir çünkü biz burada bu çizgiyle şerit fikriyle olan şeyin
içindeki her
Bunun nedeni, renklerin ID şeritli div'de siyah olmasıdır.
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
daha spesifik hale geliyor çünkü aslında öğenin üst kısmından daha çok hedefleniyor
ve rengin miras sahibi olmasını sağlıyoruz.
Bu yüzden birkaç seçeneğimiz var.
Yapacağım, aslında şu ana kadar bundan kurtulmaktır.
Rengi artık beyaz olacak şekilde ayarlamayacağız ve yenileyebiliriz ve renklerin değişmediğini göreceksiniz, ancak
tüm açıklıkların beyaz olduğunu söyleyen çizgiden kurtulduğumuz halde, hala beyaz bir
alan olduğunu göreceksiniz çünkü bir H1'in içindedir ve beyaz olan H1 metin rengini devralır.
Aynı şekilde bu alan siyah.
Siyahın metin rengini ya da sadece burada normal renkte siyah olan rengini, burada
renk siyahı olarak görebileceğiniz çevresindeki şerit div'den devraldı.
Ve bizim işimiz bu.
TAMAM.
Şimdi, oyunu başlatmak için bu düğmeyi başlatmak için bir olay dinleyicisi eklememiz gerektiğini düşünelim.
Ve bunu yapmadan önce o düğmeyi seçmemiz gerekiyor.
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
bir Javascript yerine sıfırlama düğmesini seçeceğiz.
Yani var reset düğmesi oktavımızla sorguyu sorgulayan veya sıfırlayan belgede eşittir.
Ve sonra her zaman olduğu gibi basit test olayı dinleyicisini eklemek isterim.
Böylece sıfırlama düğmesi olay dinleyicisi ekler.
yapacağımız şeyleri tıklarsak tazelemek gibi basit bir uyarı hızlı sıfırlama düğmesi yaparsınız.
Tıklayıp
Ve ben şunu tıklarsam uyarı alırım ve bu gitmek için iyi olduğum anlamına gelir.
Öyleyse bir sonraki adımda, aslında sıfırlama mantığı üzerinde çalışabiliriz.
Dolayısıyla yapmamız gereken sözde kodu yazalım.
Bu düğmeye tıkladığınızda tüm yeni renkleri üretmeniz gerekir.
Diziden yeni rasgele bir renk seçmeliyiz ve sayfadaki karelerin renklerini
değiştirmeliyiz.
Dolayısıyla tüm yeni renkleri üretmek için aslında mevcut rastgele renkler üreten işleve sahip olduk.
Dolayısıyla sadece renklerin şu anda altı rasgele renk üretmeye eşit olduğuna inanıyoruz.
Ve sonra yeni bir rasgele renk seçeceğiz, böylece rengi seçmek, tanımladığımız yöntem veya işlevin
rengini seçmeye eşit.
Gerçekten yapmamız gereken bir şey daha var; bu, bu görüntü rengini yeni renkler ile eşleşecek
şekilde değiştiriyor.
Dolayısıyla, basit bir şekilde
elde edilen renge uyacak şekilde renkli ekran görüntüsünü değiştirelim deriz.
yeni renkler tıklamaya çalışırsak yaptığı iş altı yeni renk üretiyor demektir.
Tek yapmamız gereken renkli ekran nokta metin içeriğinin seçilen renge eşit olması ve
sayfamızı yenilersek
Onları henüz görmüyoruz çünkü bu kodumuz yok.
Ve sonra bunlardan birini seçilmiş renkte seçip, burada gördüğümüz pikta rengine uyacak
şekilde değiştiriyor.
Dolayısıyla orada yeni bir rasgele renk ve perde arkasında altı rastgele renk veriyor.
Son parça, sayfadaki bu altı yeni rengi yansıtacak ve bunu daha önce yaptık.
kareleri dolaşıyoruz ve kare biçiminde olan bu arka planı renkler olarak değiştiriyoruz.
Aşağıda tüm
Bu yüzden hepsini burada çoğaltarak başlayacağım ve bunu refactor edeceğiz.
Ama hepsini buraya koymaya başlamak için.
Dolayısıyla tüm kareler karelerinden geçerek artı artı çizin ve sonra yapmamız gereken tek
şey kareleri söylemek, arka planın renklere eşit olması.
Kurtaracağım.
Yenilersek ve yeni renkler üzerine tıklarsak 60 rasgele renk üretir.
Bir tane seçer.
Ekranı resim rengini yansıtacak şekilde günceller ve yeni altı rengi eşleştirmek için altı
kareyi de değiştirir.
Öyleyse deneyelim ve önceki mantığımızın devam edip etmediğini kontrol edelim.
TAMAM.
Yani bu iyi bir miktar kırmızı.
Çok az yeşil ve iyi mavi bir miktar.
Haklı olduğunu düşünmediğimiz bazılarını tıklamaya çalışalım.
Ve şimdi de mendillerden birine gidelim.
Yani mavinin biraz daha kırmızı gibi görünüyor.
Bu yüzden bunu tahmin edeceğim ve haklıyız ve işler hala iyi durumda gibi görünüyor.
Yeniden yeni renkler.
Bunu sıfırlamak istiyoruz.
Bu çok küçük bir kozmetik şey.
Fakat yeni renkleri tıklarsak, ekranı sıfırlarsak siyaha veya bu
koyu gri renge döner.
şey, burada tekrar görebilmek için oynamak istediğimizde, burada kazanacağımızı söylemek istiyoruz.
Yapmamız gereken diğer
Bu çok yeşil.
Kazanıyorum ve bana tekrar oynatmamı söylüyor ve aynı şeyi yapıyor.
İşlevsel olarak gerçekten de sadece biz ve farklı metin değişmez.
Bu yüzden yapmak kolaydır.
Tek yapmamız gereken, kodun kazanım olup olmadığını kontrol etmek olduğunu bulmak.
İşte burada.
Ve sonra sadece o düğmenin metin içeriğini değiştirmek istiyoruz.
Böylece düğmeye reset butonu adı verildi.
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.
Şimdi bunlardan birini denemeyi deneyelim.
Bu yüzden bu çok kırmızı ve çok yeşil ve biraz mavi.
Bu yüzden çok kırmızı ve yeşil bir sürü bize sarı renk verecek.
Bu yüzden bazılarını daraltalım.
Ve sonra biraz mavi daha aydınlık ve daha parlak hale gelecek.
Bu yüzden bunlardan birini ya da bunu denersek, haklı olmadığını görürsün.
Ve bu bizim cevabımız burada ve bize tekrar oynamamızı söylüyor.
Ve gerçek hızlı ve aynısını yapar.
Bahsettiğim son şey arka plan rengini değiştiriyor.
Yani burada, sıfırlama düğmesinin sonunda bunu yapabiliriz.
Sadece H-1'i seçeceğiz.
Burada seçtiğimiz tek nokta.
Arka planı çevirin.
UPS eşittir.
Ve bu onaltılık 2 3 2 3 2 3, ki bunu unuttuysanız, SEE'ye bakıp vücut
arka plan rengini değerlendirebilirsiniz.
Ya da yanlış rengi seçerseniz, renklerden birini kaldırdığımızda buraya koyduk.
Arka plan rengini cesetle aynı olacak şekilde değiştiriyoruz.
Tamam, yeni renkleri yenileyelim.
Şimdi kazanalım.
Sadece rastgele sadece zaman uğruna tekrar oynattık ve tekrar siyah bir zemine
dönüyor.
Ya da koyu gri arka plan.
Tamam, hepsi bu video için.
Sonraki adımda, kolay ve sert mod arasında seçim yapmak için düğmeleri ekleyeceğiz.
Ve son olarak, güzel görünmesi için şeyleri stilizeceğiz