Pekâlâ, hoş geldiniz.
Hadi başlayalım ve başlayalım.
RG, oyun uygulamasını tahmin ediyor olmalı.
Önce h tim dosyasını ve C SS'yi yapacağım ve bu basit ızgarayı oluşturacağım.
Bu yüzden, arka plan renkleri ve yazı tipleriyle stilize etmeyeceğiz ve
şimdi bu altı kareden basitleşmeye başlayacağız ve onlara bazı arka plan renkleri koyabileceğimiz halde
aralarında biraz boşluk bırakacağız, ancak olmayacağız yuvarlak köşeleri eklemek gibi şeyler yapın, ancak animasyonları
hiçbir şekilde eklemeyeceğiz.
Kaybolup solup altı kareler elde edeceğiz ve sonra hızlı olayların temel mantığını
ekleyip doğru rengi alıp almadığınızı kontrol edeceğiz.
Bu yüzden önce burada sahip olduğumuz dosyaya bir kenarı vermeliyiz.
Renkli oyuna her defasında sesleniyorum, böylece ekibimize ekleyeceğiz.
Kazan tablası.
Bir unvan ver.
Renkli oyun yapacağım.
Hadi devam edelim ve altı kareye ekleyin.
Bu yüzden onları divs yapacağım.
Her biri bir kare sınıfı olan bir div ve biz daha sonra onları şekillendirmek için bu kare sınıfı kullanacağız.
Pekâlâ, div sınıfı eşit Square yapacağız ve içindeki herhangi bir şey koymamız gerekmiyor ve
altı tane alacağız.
Ve daha sonra bunu daha temiz bir hale getirmek için, daha sonra stil verebileceğimiz başka bir div yerine
hepsini koyacağım.
Ben sadece konteyner diyeceğim.
Yani önceden açıkça bir şey yapmayacak.
Sonunda siteyi duyarlı hale getirmek ve ızgarayı küçültmek için kullanacağız.
Şimdilik sadece onları bir araya getireceğiz, böylece etrafında yüzen 6 kare yok.
Tamam, altı karemiz burada.
Eğer onu tarayıcıda açarsak, ona kenetlenir.
Elbette birkaç nedenden ötürü hiçbir şey görmüyoruz.
Biri altı divuza sahip olsalar bile, hiçbir şeye sahip değiller. Hiçbir renk farkı yoktur, bu nedenle hiç
bir şey görmüyoruz.
Bu yüzden, onları temel olarak şekillendirerek başlayacağız.
Dolayısıyla bir stil sayfasında eklemeniz gerekir; bu yüzden önce oluşturmadığım stil sayfasını bağlayın ve bunu biraz daha
büyük yapın.
Bu yüzden renkli oyun diyeyim SS'ye bakın ve kaydetmek ve daha sonra bu dosya renk oyunu C Ss yapmak ve yapacağım
ilk şey sadece tüm vücuduma bir arka plan rengi eklemek.
Şimdiye kadar arka plan rengini ve kullanacağım rengi altı köşeli bir koddur.
2 3 2 3 2 3'tür ve kaydedildiğinden emin olun.
Evet.
Böylece doğru arka plan rengini alıyoruz.
Bir sonraki adıma devam edip karelerimizi şekillendirmeye başlıyoruz.
Bu VSS'yi fotoğraf koleksiyonu sitesinde kullanmak için kullandığımız strateji, kare görüntülerin tepkisel
ızgarasının bulunduğu aynı stratejiyi kullanacağız.
Hepsi siyah-beyazdı.
Aynı fikri burada kullanabilir misin?
Dolayısıyla bunu yapmamızın yolu, bunların her biri bir konteynerin içinde ve her biri bu
konteynırın yüzde 30'unu kaplıyor.
Dolayısıyla kap sadece bu karelerin etrafında dolaşıyor.
Kareler etrafındaki bütün vücut burada değil.
Yüzde 30'u alıyorlar ve aralarında her tarafta bir fark var.
1. 6 yüzde 6.
Böylece, konteynırın yüzde 100'ü kadar toplanır.
Bu yüzden ilk yüzde kareyi yüzde 30 alacağız.
Ve bunu bırakıp ona bir arka plan verirsek, mor yapalım ve kurtaralım ve hala
hiçbir şey görmeyelim.
Ve bunun nedeni hayatımın sayfasında olduğunu muayene edersek sana göstereceğim.
Hâlâ boş.
Ne yapmamız gerekiyor.
En son görüntümüz ve görüntünün olduğu bazı içerikler var, ancak bu divler boş.
Bu yüzden biraz boşluk ekleyeceğiz ve alt dolgu kullanacağız.
Ayrıca padding top kullanabilirdik, bu yüzden doldurma dibinde olsaydı ve bu da yüzde 30 olacaktı.
Yenilersem.
TAMAM.
Artık altı karemiz var, ancak hepsi bizim istediğimiz gibi olmayan bir çizgide.
Aynı hatta olmalarını istiyoruz.
Dolayısıyla bunları sola kaydırmalıyız ki bu da görüntü ızgarasıyla yaptığımız şey.
Bu yüzden kaybolun ve yenileyelim.
Ve şimdi burada büyük ızgarayla bitiyor.
Oh, devam edin ve neler olduğunu görebilmeniz için kenar boşluğunda.
Yani marjin 1 alacağız. 6 yüzde 6 ve kaydetmek.
Artık ızgaramızı burada görebiliyoruz ve bu ızgaranın tüm ekranı kaplıyor.
Bu yüzden biraz değiştireceğim.
Bunun çok büyük olmasını istemiyoruz.
Ve yapabileceğimiz, bu div kimliği kapsayıcısı sağladığımız kapsayıcıyı kullanmaktır.
Bu yüzden, div'ı, bunu seçeceğimiz kapsayıcı fikriyle tarzlandırırsak, maksimum
genişliğinin olması gerektiğini söyleyerek başlayabiliriz.
Sanırım 600 piksele gittim.
O sayı ile oynayabiliriz.
Artık şimdi yenileyebilirsem, daha küçük olduğunu görebilirsiniz.
Bu da onun bir parçası.
Ve sonra da bunu Merkez ediyor.
Bu yüzden 2 marjı yapacağız.
0 otomatik.
Konteynerin üstünde ve altındaki sıfır kenar boşluğunu unutmayın ve sola ve sağa auto, her
iki tarafta da aynı büyüklükte olmasını sağlayacak şekilde yapar.
Ve şimdi bu güzel merkez ızgarımız var.
Tamam.
daha yapalım, böylece burada bir H1'e sahip olacağım ve sadece büyük R'yi söyleyeceğim.
Ve H-1'mizde bir şey G. renkli oyun olsun, biz sadece böyle başlayacağız.
Tabii ki yenilersek görmek gerçekten zor.
H-1 beyaz renkte beyaz yapalım ve kaydedin.
Ve bununla başlayacağız.
Şimdi biraz javascript kullanalım.
Her birine farklı bir renk vermek için javascript ayarlayacağız.
Şimdi gidelim ve yeni bir dosya oluşturalım ve buna renkli oyun diyelim.
J. S. ve kaydet.
Ve hep istediğim gibi, bağlı olduğumuzu söyleyen alarmımıza ekleyelim.
Şimdi, oyunu renkli oyuna eşit olarak ekleyelim.
Evet sayfayı yenilemek kaydetmek ve biz bağlı alarmı almak.
Tamam, böylece orada pencereyi yeniden boyutlandıracağım.
Şimdi onlara farklı renkler vermek için kodu ekleyelim.
Sonunda sonunda oyunda sonuçlanır.
Sayfa her yüklendiğinde altı rastgele renk seçer ve her rengi div'lerden birine atar.
ile başlayacağız ve biz sadece her zaman aynı olan altı renk atayacağız.
Rastgele yönü
Ve sonra onları rasgele seçmeye devam edeceğiz.
Şimdi renkli oyunuma gidelim Evet ve bir renk listesi yaparak başlayacağım ve sadece
renk diyeyim.
Bu bir dizi.
Ve son üründe unutmayın ki bu rastgele renk listesidir.
Şimdilik ben sadece kendiminkini de ekleyeceğim.
Bu yüzden G-B ve hepsi kırmızı ile başlayacağım.
Yani 2 5 5 0 0 ve bunu sizin için okunaklı hale getirmek için her şeyi ayrı çizgiler halinde yapalım.
Bu yüzden altı tane alacağız.
Ve birincisi kırmızı olacak ve daha sonra sarı yapacak olan hepsi kırmızı ve yeşil olan başka
bir tane alacağız.
Ve bir sonraki kırmızı kırmızı olacak ve yeşil olacaktır.
Ve sonra bundan sonraki olan sıfır kırmızı ya da yeşil olacak ve hepsi mavi olacak ve sonra da yapacak.
Yani 0 yeşil 255 mavi okuduğunuzda 255 kırmızı 0 yeşil 255 mavi yapacağız ve bu bize altı dizge dizisi
olarak bir dizi verecektir.
Ve sonra yapmak istediğimiz, bu karelerden altısının arasından geçip bunlardan birini her
birinin arka planına atamaktır.
İlk önce tekrarlamak için şu ana kadar seçmek zorundayız ve kareler eşittir belge olarak adlandıracağız ve burada
birçok seçenek var.
Bir sorgu seçici kullanacağım.
Bu yüzden, sadece ilkinden ziyade hepsini almaya özen gösteriyorum.
Ve sınıf meydanına dayalı olarak seçeceğiz.
Div'i yeni yapmış olsaydık, bir kapsayıcı div'imiz olduğunu ve bu kutuyu seçmek istemediğimizi hatırlayın.
Bu altı kare div'u çok kare istiyoruz ve sonra dört sıfıra eşit sıfıra dönelim.
Kareler boyundan az ve ben artı artı yerine burada kareler söyleyeceğim, stil nokta arka plan eşittir;
bu da o gözü alıp renklere erişmek için kullanacağımız ilginç
kısımdır.
Ya Colt, burada gerçekten sonra ilave edeceğim küçük bir düzeltme ile geldim.
Sadece hızlı bir not.
Bu stil arka plan rengini tercih ettiğinizden çok tercih ettiğinizden, bu videoda kullandığım şey stil nokta
arka planından ziyade arka plan rengini bir kelimeyle büyük harfle C vurgulamaktır.
Arka planı stilize ettiğinizi gördüğünüz her seferinde arka plan rengini değiştirin.
Ve bunun nedeni şu anda tüm tarayıcılarda çalışacak ancak arka
plan Firefox'da çalışmıyor, dolayısıyla teknik olarak tarzda çalışıyor.
Bu arka plan, örneğin Chrome'da işe yarayacak ve oyun işe yarıyor ancak Firefox'ta neler
olup bittiği hakkında bir sürü soru alıyorum ve bu gerçekten temel suçlu olan arka
plan rengidir.
Ayrıca, Del Anderson'ı tartışmaya açan forumların öğrencilerinden biri olarak düşünmek
isterim ki en son kodlamaya geri döneceğim.
Yaptığımız şey altı kareden oluşuyor ve gözümüz 0 1 2 3 4 5'den gidiyor ve bu her
kare boyunca dönecek.
Ve sonra ilk kareye ulaştığım zaman, sıfır alıp renklerin burada sıfır olan arka
plan rengini vereceğim.
Bu doğru olur.
Ve sonra devam ediyoruz ve biz ikinci div için bir tane alıyoruz ve 1'e endeksli ikinci rengi veriyoruz
ve sonuna kadar bunu yapmaya devam ediyoruz.
sırayla dizideki bu renkleri kullanarak renklendirileceği sırayla temelde gidiyoruz.
Bu nedenle, div'lerin sayfadaki
Yenilemeyi bırakırsak, altı temel rengimiz olduğunu görebilirsiniz.
Bu yüzden kırmızı sarı yeşil cam göbeği mavi kırmızıya sahibiz.
Bu yüzden şimdilik iyi.
Daha sonra rasgele renkler üzerinde yoğunlaşacağız.
Ancak önizleme yapmamız gerekse de, 0'dan 255'e üç farklı sayı
üretmek ve bunları birleştirmek.
Yani sadece üç farklı kanal hepsi randomize.
Ve sonra bunları r ile büyük bir dize haline getiririz. g B ve etrafındaki parantezler.
Ancak şu an bu renklerle devam edeceğiz.
Yapmamız gereken sonraki şey, sayfanın her yüklendiği şeydir.
Burada size göstereceğim altı renk seçilmedi.
Bu renklerden biri hedef olarak veya aradığım renk olarak seçilmiştir.
Dolayısıyla bu durumda bu seçilen bir renktir.
Bunu da yapacağız ve Portus'u sabit kodlamaya başlayacağız ve daha sonra bunu
rastgele seçeceğiz.
Bu yüzden altın rengi cam mavisi olduğunu söyleyerek başlayacağız.
Demek ki üçüncüsü dördüncü renk endeksi.
Bu durumda, renk değişkeni index 3'e eşittir.
Ve bu Suyin'ı seçecek ya da burada bu renk R. G. B.
0 2 5 5 2 5 5 ve bir dize olduğunu unutmayın, o zaman ne yapmak istediysek sayfamızı güncelleyelim, burada
burada olduğu gibi burada olduğunu söylüyor.
Açıkçası aynı şekilde şekillendirilmedi, ancak R söylemek istiyoruz. G. B.
bir H1'in bulunduğu skorekeeper oyununu tekrar düşünebilirsek değiştireceğiz ya da biraz değiştireceğiz ve onu değiştiriyoruz.
Ve sonra parantez içinde 0 2 5 5 5 5 bunu yapmak için
Oyuncu bir oyuncu başlangıçta iki puana sahip.
Bir uçak bulduk H-1 Ve güncellediğimizde, içerideki her şeyi otomatik olarak üzerine
yazdı.
Ancak bunu yapmak istemiyoruz.
Metni harika ve renk oyununda tutmak istiyoruz ve renklerimiz sadece buraya geliyor ancak ayrı bir H-1 veya başka
bir şeye sahip olmak istemiyoruz çünkü bunlar ayrı çizgiler halinde olacaktı.
Dolayısıyla, atıcı oyununda yaptığımız gibi bir eğilim kullanacağız ve sadece R ekleyeceğiz. G. yer tutucu ol.
orada bir
Dolayısıyla hiçbir şey gözükmese de, eğer biz teftiş edersek.
Artık kolayca seçebileceğiniz ve metni işleyebileceğiniz anlamına gelen bir açıklığa sahip olduğumuzu görebilirsiniz.
Ve bunu sadece daha da kolaylaştırmak için bir fikir vereceğiz.
Bu yüzden ona kimliği vereceğiz.
Ve ona sadece renkli ekran diyelim.
Ardından, javascriptimize gidip seçeceğiz.
renkli görüntü belgeye eşit ve biz sadece çeşitli çerez çocuk öğesi için kimliğe göre öğeye göre öğesini alacağız.
Şimdiye kadar
Ve renkli gösteriydi.
Ve biz de kurtaracağız ve bunu biraz daha büyük yapacağız.
Dosyayı kaydedin ve renk ekranını, aldığımız bu rengi söyleyecek şekilde güncellemek istiyoruz.
Dolayısıyla, renk ekranı metin içeriği onun gibi bir renk seçin ve yeniler.
Ve şimdi burada rengimizle bitiyor.
Harika.
Şimdi tıklama olayları için mantığı ekleyelim.
Dolayısıyla bu karelerden birine tıkladığımızda, üzerine tıkladığım karenin hangi rengin olduğunu anlamaya çalışacak
bir kod çalıştırmak istiyoruz.
Ve bir kere biz o pix renk karşılaştırmak için gidiyoruz var.
Bu burada.
Ve eğer farklıysa o karenin arka plan rengini değiştireceğiz, böylece vücudun
arka planı ile aynı renge gidecek.
Ve eğer bunlar aynıysa, oyunun bir tane olması anlamına gelir.
Ve bazı özel şeyler yapmak zorundayız.
Ve eğer farklıysa, bir oyuncu yanlış rengi seçti ve bunun başlaması için de uğraşmak zorunda kalacağı
anlamına gelir.
Şimdi sadece tıkladığımızda uyaran düz bir tıklama olay işleyicisi ekleyelim.
Böylece karelerden her birine bir olay işleyicisi ekleyeceğiz, böylece sahip olduğumuz
aynı döngüyü kullanabileceğiz.
Bu yüzden burada bir açıklama ekleyeceğim; ilk renkler karelere eklendikten sonra bir sonraki bölüm
dinleyicilere iki kareyi tıklatacak.
Böylece ben nokta bu karelerden biri başka bir olay dinleyici ekleyin.
Tıklama ve geri arama işlevinin zamanı geldi.
Tek yapacağımız, oldukça karanlık bir uyarı yapmak ve altı kişiden de bizi uyaracaklarına emin olmak.
Sağ tıklayın kareyi tıklayın.
Tamam, hepsi de ihtiyaç duydukları şekilde çalışıyor gibi görünüyor.
Şimdi yapmamız gereken, tıklanan kare rengini kapmak ve daha sonra renk seçmek için renk karşılaştırmak.
Tanımladığımız değişken resim rengi görünür, o renk almaya başlayacağız.
Kare üzerinde tıklanan öğeye atıf yapan bu öğeyi kullanabildiğimizi unutmayın.
Bu yüzden bu arka plan stilini söyleyebiliriz.
Ve şimdi burada bir alarm daha yapalım ve neler olduğuna bir göz atalım.
Yani kırmızı olanı tıklarsam beni uyarır.
RG B 2 5 5 0 0 ve ben bir tane atamak tıklarsam R G B 0 2 5 5 2 5 5.
Yani bu çalışıyor.
Şimdi ne yapacağız bunu sadece buna benzer renkte tıkladığımız bir değişkene kaydedin.
Sonra, Quick renklerini karşılaştırmak için bir IF deyimi yazacağız, eğer renk
üçlüsü eşitse renkleri güzel kafiye orada seçersek, doğru uyaracak duruma gelir.
Ve eğer eşleşmezlerse ya da yanlış anlarız.
Haydi bir yenileme verelim.
Buna bir tıkla.
Yanlış.
Ve gerçek test.
Doğru yazan doğru kelimeyi tıklıyorum.
çalışıyor, rastgele renklerden herhangi birinde sahip olmadığımız halde çalışıyor; altı kodlu bir
dizi zor kodlanmış ve her kareye bir renk atadık ve sonra topluyoruz.
Dolayısıyla mantığımız
Bu durumda cam göbeği ve tabii ki rasgele olacak, ancak cevabımız olan bir renk seçiyoruz.
Ardından, kullanıcı o kare veya herhangi bir kareyi tıkladığında her kareye bir olay dinleyicisi ekliyoruz.
Eşleşenlerse, verilen karenin rengini resim rengiyle karşılaştırabiliriz.
Bir şey yaparız.
Eşleşmezlerse, bir sonraki videoda, eşleşmeleri durumunda aslında yaptıklarımız hakkında konuşacağımız başka bir şey
daha yaparız.
Ve eşleşmezlerse ne yapacağız.