Şimdi odaklanabileceğimiz iki farklı şey var.
İlki, ekranı, kazanan oyuncunun yeşil olması için değiştiriyor ve bu oldukça
basit.
İkincisi, sıfırlama düğmesinin işe başlamasını sağlamak. Böylece, sıfırlayabilir ve tekrar oynayabiliriz.
Şimdi renk değişikliğiyle başlayalım ve bir CSSA dosyasında bir sınıf tanımlayarak bunu yapacağım.
Bu yüzden bir C SS dosyası yapmam lazım ve o anketçiyi arayacağım.
C Ss sonra benim HDMI dosya scorekeeper Dotsie SS ve kaydetmek yerine ona link gidiyorum.
ve sadece kış dediğimeceğim ve renklerin yeşil olduğunu söyleyeceğim ve ihtiyacımız olan ve kurtarmayacak tek şey bu.
Daha sonra CSSA dosyama gideceğim ve bir sınıf tanımlayacağım
Ve sadece onu istediğim gibi göründüğünden emin olmak için.
İstediğimizi sınıfın içine ekleyelim, böylece sınıf eşdeğer olacağına inanıyoruz ve yalnızca oyuna giren 1. oyuncu
için bir kazanan sınıfı vereceğiz.
Yenilersem yeşil 0 görebilirim.
Tam da bir artış olarak istiyoruz.
Tabii ki siyah olarak başlayıp sınıfı eklemek istiyoruz.
Oyun sona erdiğinde, javascriptimize geri dönüp bundan kurtulalım.
Yani siyaha dönüyor.
Şimdi javascriptimize gidin.
Yani sadece oyuncu 1 için başlayacağız ve oyuncu 1 puanının kazanan puana eşit olup olmadığını kontrol etmemiz gerekiyor.
Yani bir oyuncu birinciliği kazanmış demektir.
Böylece burada oyuncu 1 ekran sınıfı listesine ekleyeceğiz.
Sınıfı kazananını ekleyeceğiz ve yapmamız gereken tek şey bu.
Yenilersek, oyuncu 1 puanı arttırıp 5 puana ulaştığımı göreceksin.
Bu sınıf eklendi.
Bu yüzden bir göz atarsak inceleyeceğim.
Hiçbir sınıf yok ve 5'e gelene kadar artmaya devam ediyorum.
Dikkatinizi buraya getirin, sınıf ekolayzır ekledik 5'e geldiğimizde ekledi kazandı.
Aynı şeyi Player 2 için de yapacağız.
Böylece oyuncu iki puan kazanan puanı oyuncuyu değiştirecektir.
Artış sayısını 5 olarak kontrol edelim.
Harika.
Her şeyin düzgün çalıştığı görülüyor.
Bir sonraki parça şu anda sıfırlama düğmesinin çalışıyor olması.
Eğer oyun alırsak her zaman doğru olur.
Oyunu değiştirmek için bir yol yok.
Bu nedenle sıfırlama düğmesine tıklamak birkaç farklı kod satırı tetiklemelidir.
Değiştirmek istediğiniz ilk.
Oyuncu 1 puanı ve oyuncu sıfıra geri puanı.
Oynatıcı 1 ekranında ve oynatıcının gösterdiği sıfır değerini değiştirmek için buradaki değerleri
değiştirmek istiyoruz ve bu yeşil sınıftan hangisi açıksa onu kaldırmak istiyoruz.
Ve sonuncu şey, oyunumuzun tekrar sahte olmasına, böylece kodumuzun ve tekrar
çalışabilmesine dikkat etmemiz gerekiyor.
Bu yüzden verdiğimiz düğmeyi seçmek için ihtiyacımız olan ilk şey eşit sıfırlama id.
Bu yüzden buraya gidelim ve onu seçmeliyiz.
Bu yüzden şimdiye kadar diğer düğmelerle yapacağım.
Sıfırlama Düğmesi belge noktasına eşittir ve başka bir get öğesini kimlik numarası ile yapacağız ve bu kez kimliği sıfırlanır ve
kaydedilir ve yalnızca çalışıp çalışmadığını kontrol eder.
Sabit bir günlük yapın.
Sıfırla düğmesini sıfırlayın ve yenileyin.
Konsolumuza bakarsak doğru düğmenizi alırız.
Kayıt iptal edildi.
Tamam, o zaman sıfırlama butonuna bir tıklama için olay dinleyicimizi ekleyerek başlamalıyız, böylece
olay dinleyicisi geri arama fonksiyonumuza tıklıyoruz ve o zaman tekrar başlatmak için yapmak istediğimiz her şey, yalnızca o çalışıp
çalışmadığından emin olmak için tıklanan günlüğün iptal edilmesini iptal ettiriyor. ve orada gittik, sıfırlama düğmesine tıklandı.
Yani mantık olsa da tartıştığımız gibi ayarlamamız lazım.
Oyuncu 1 puanı ve oyuncu sıfıra geri puanı.
Bu yeterince açık.
Oyuncu 1 skoru sıfır olan oyuncu sıfırdır.
Fakat şimdi ben bunu çalıştırırsam, burada oyuncu 1 puanı sıfır puanı ve puanı arttıracak ve böylece oyuncu
bir kazanır ve daha sonra sıfırlama'yı değiştirir.
Hiçbir şey olmamış gibi görünüyor ve bunun nedeni yalnızca puanı javascript içinde değiştirmemiz.
Sayfadaki puanları hiç bir zaman güncelledik; bu, güncellememiz gereken P1 ve P2 görüntü
değişkenleridir.
Bu nedenle, bir ekran metin içeriği yapmak istiyoruz ve onu sıfıra ayarlayabiliriz.
Ayrıca 1 puanı da alabiliriz.
İkisi de sıfır olmalı.
Pete, metin içeriğini görüntülemek için sıfırdır.
Şimdi yenilersek 5'e gideriz.
İkisi de sıfıra geri dönüyorlar.
Bu yüzden daha yakından bir oyun alalım.
Ve tıklama sıfırlama hem sıfıra geri döner.
Sonraki, kazanan maddeyi kaldıralım.
Bu, kazanan sınıfını her ikisinden de kaldırarak kolay yolu yapar mıdır.
Bu yüzden hangisinin olduğunu kontrol etmeyeceğiz.
Her ikisinden de çıkaracağız.
Bu sadece bir ekran meselesi.
Sınıf listeleri galibi kaldırır.
Bu durumda madde kaldırılacak ve görüntülemeye devam edecektir.
Öyleyse hangisinin olması önemli değil, çünkü ikisini de kaldırıyoruz.
Şimdi bir oyun oynarsak kazanan oluruz.
Sıfırlamayı tıklarım.
İkisi de boş metne dönüyor.
Ama gördüğünüz gibi beş yaşıma giriyorum.
Sıfırla düğmesini yine de çalışmıyor tıklayın.
Ve çünkü oyun bitti hala.
Ve bu nedenle bu olayların yerine hiçbirimiz kodumuz çalışmayacak.
Bu yüzden yapmamız gereken son şey ayarlandı.
Oyun sahtekaya dönüştü ve oynamaya devam etmemize izin vermeliyiz.
Böylece artımları yenileyeceğim.
Haydi oyunu bitirelim.
Oraya gidiyoruz.
Artık oynayamam.
Sıfırlamayı tıkladım ve şimdi oyun sahtekârmaya döndü ve tekrar oynayıp devam ettirebiliyorum.
İşte temel işlevsellik burada.
En son yapılan şey hemen hemen her şeye sahip: oyuna başlama ya da kazanan skoru
değişken olma.
Yani her zaman sadece beş değil.
Dolayısıyla bu girdimize sahibiz ve bunu kullanmak istiyoruz, böylece bunu yedi olarak değiştirdiğimizde
7 oynamamız gerektiği söyleniyor ve maksimumumuzu veya kazanan skoruz beş yerine yedi.
Bu yüzden, oraya ulaşmak için birkaç adımız var.
Yapmamız gereken ilk şey, girdi türünün sayıya eşit olduğunu göreceğiniz bu girişi seçmektir.
Sayfadaki tek girdi budur.
Bu yüzden mutlaka bir kimlik falan vermek zorunda değiliz.
Bu yüzden buraya gidip sadece diğer seçicilerle seçeceğim.
Diyelim ki ona hiçbir giriş eşdeğer belge diyelim ve bunu elde etmenin bir çok yolu var, bu
sorgu seçici girdisini belge yapabiliyor.
Ayrıca yalnızca nerede belirtebiliriz.
Tür, sayıya eşittir, çünkü başka girdiler olabilir.
Bizim durumumuzda bunu basit tutacağım.
Tek bir girdi var.
Dolayısıyla bu işe yarayacak.
TAMAM.
O yüzden girdi seçilmiş.
Şimdi bir olay ekleyelim.
Bunun için biz, bunun istediğimiz değeri veya sayı değişikliklerini değiştirdiğinde bunun güncellenmesini
istediğimizi ve kazanan skor değişkeninin de güncellenmesini istiyoruz.
Bu yüzden yapmamız gereken bir olay eklemek.
Bu yüzden sadece hissizleşeceğiz ve Dot'un olay Lutner tıklamasını yapalım buraya sadece bunu yap.
İşlev ve hepsi bir uyarı var.
tıkladığınızda göreceğiniz şey aslında bir tıklama dinleyicisi bu iş için en iyi araç değildir.
Girişi
Çünkü evet, orada yaptığım gibi bir tıklama ile değeri değiştirebiliriz.
Ancak ayrıca silmek ve bir numara kendim yazabilirim ve tıklamamıştım çünkü hiçbir olay işten çıktı.
Küçük düğmeleri burada kullanırsam hızlı bir olay patlar.
Aksi takdirde, klavyemi kullanırsam hızlı bir olay almazsın.
Bu durumda, değişim olarak adlandırılan bu durumda daha iyi bir başka olay türü var.
Dolayısıyla, bir değişim olayı değeri her değiştirildiğinde çalışacak ve bu değerin nasıl değiştiği önemli değil.
Eğer silme anahtarını tıklattıysam ya da isabet ettiysem.
Dolayısıyla, girişi değiştirdikten sonra yenilemek için uyarıyı burada değiştirelim.
Ve onu değiştirmek için buraya tıklarsam, girdiyi değiştirdiğini söyler.
Ancak silersem tıklamayı gerektirmeyen bir sayı yazarsam, girişi değiştirdiğimi söyler,
bu yüzden harika olur.
Değişiklik olayını, bu numarayı değiştirmek istediğimizde kullanmak istediğiniz olay
budur ve kazanan puanı da güncelleyerek yeni bir puana ulaşana kadar oyunumuz
devam eder.
Umarım bu gerçek kazanma puanı değildir.
Kesinlikle uzun kaya kağıdı makası oyunu.
Bu yüzden ilk şey bu değeri burada güncellemektir.
Bu nedenle, daha önce olduğu gibi, bir paragraf olanı seçmemiz gerekiyor.
Dolayısıyla paragrafımızı seçmeliyiz ve yalnızca seçici etiketini sorgulayan bir VAR paragraf eşdeğeri
belgesini yapacağız.
Ve daha sonra bu hızlı etkinlikte, bu metin içeriğini değiştireceğiz ve tıklamış olduğumuzu
söylemek için değişerek başlayacağız veya değeri değiştirildiğini söyleyelim.
Tıpkı öyle ve canlandır.
Şimdi, paragraf değerlerinin değiştiğini söylerken değeri değiştirirsem, bu H-1 ile daha önce
karşılaştığımız aynı sorundur ve tüm paragrafı değiştirmek istemeyiz.
Sadece bu küçük kısmı değiştirmek istiyoruz.
Dolayısıyla kullanmak istediğimiz şey aslında başka bir aralık.
Bu yüzden geri döneceğiz ve sayı etrafında bir aralık ekleyeceğiz.
Ve bu, bir öğenin tamamını değil, yalnızca bir öğenin küçük bir bölümünü hedeflemek için onu tekrar
kullanabileceğimiz bir alan için mükemmel bir kullanım.
Ve aslında bu kez sadece sana başka bir seçim yöntemi sunmak için bir fikir vermeyeceğim.
Bu yüzden bir paragraf yerine bir aralık olduğunu unutmayın.
Ve bizim sayfada bunun gibi tek şey bu.
Böylece geri döneceğiz.
Dolayısıyla, paragrafı seçmek yerine yeni bir değişken oluşturalım ve kazanan puan ekranı olarak adlandıracağız
ve belge sorguları seçici olacak.
Ancak sayfadaki diğer açıklıklar olduğundan, sadece paragrafın içinde kapsar seçmek
istiyoruz.
Yazmak zorunda olduğumuz şey bu kadar.
P alanı.
Açıklık.
Ve biz de kurtaracağız.
Ve şimdi, ilerlemeye devam edelim ve burada paragraf yerine gösterilen kazanan puanı güncelleyelim.
Böylece kazanan skor şu şekilde görüntülenir.
Ve hala mükemmel olmayacak.
Sadece her seferinde değişen değeri güncelleyecek, ancak en azından tüm paragraf güncellenmiyor.
birlikte senkronize olmasını sağlamak için girişin içerisindeki numarayı görüntülemek üzere güncellenmesini sağlamak.
Bir sonraki adım, değerlerin
Dolayısıyla, verileri bir girdiden nasıl elde ettiğimizi gerçekten görmedik.
Geçerli değeri nasıl alacağız.
Ben girişi seçerek sana göstereceğim.
Yani sorgu seçici belge ve konsol girişi yapacağız ve bunu bir değişken kaydetmek için
gidiyorum yani var girdi belgesi taqueria girişinizi seçin ve sonra bir giriş
daat değeri yapacağız.
Bu değer, ne olursa olsun, bu girdide bulunan her şeyin bir dizgesi olacak.
Yani bunu 7'ye değiştirirsem ve kodu tekrar çalıştırırsam 7 olurum.
Eğer bunu çok büyük bir sayı yaparsam ve bu sefer tekrar yaparsam, bu girdinin içerdiği her
değer yansımaktadır.
Dolayısıyla, bunun yerine değiştirilen dize değeri ile bunu kullanacağız.
Buradan değeri alacak ve kazanan puanı değiştirmek metin içeriğini görüntüleyecek şekilde Nahm giriş nokta değeri
olacak şekilde değiştireceğiz.
Bu yüzden yenileyip bunu güncelliyoruz ve şimdi birlikte senkronize edebilirsiniz.
bir ila üç arasında güncelleyeceğim için çalacağım veya kazanan skor ekranında da 1 ila 3 arasında güncelleme var.
Dolayısıyla bunu
Tabii ki 123'e oynayacağız.
Hâlâ beşe oynuyoruz.
Ve mantığımız bu yeni girdi değerini yansıtmadığı için yansıttığı şey, orijinal
kazanan 5 puanımız.
Bu yüzden, aynı zamanda, burada uyuşma girdi değerine eşit olmak ve kaydetmek için puan kazanmak için değiştirmek istiyoruz.
Ve şimdi şunu değiştirmeyi deneyelim ki üçümüzde oynuyoruz ve tıklıyoruz ve biraz tuhaf davranışı
fark edeceksiniz.
Bu yüzden beşte durmadı bile.
Sadece sonsuza kadar devam ediyor.
Dolayısıyla, bu, farklı veri dizeleri ve sayı türleriyle ilgisi olan ve onları üçlü eşitlik karşılığında
iki eşittir kıyaslayan eğlenceli bir hata.
Yani onun altına almak için bazı eksilerini yapalım. günlüğü.
Yani biliyoruz ki, bunların hepsi buradadır ya da bu çizgi burada oyuncunun puanı kazanan puana
eşitse onun olup olmadığını kontrol ettiğimiz çizgidir.
İşte o zaman oyunu bitirdik.
Ve şimdi bitmiyor çünkü bu bitmiyor.
Skoru değiştirirsek.
Oyun bitmedi.
Her zaman yanlıştır.
Bu yüzden bu satırda bir şeyler yanlış gidiyor.
Şimdi iptal edilen bir günlük yapalım ve iki şey yapacağız.
Oyuncu 1 puanını yazdıracağız ve kazanan puanı çıktı alacağız ve onları virgüllerle
ayırdık ve onları sadece aynı satıra yazdıracağız.
Comstock günlüklerini kullanarak hızlıca not etmek şu an için nasıl hata ayıklayacağımızdır, ancak ileride
daha fazla hata ayıklama yönteminden bahsedeceğiz.
Yenileneceğim ve başlasak artan oyuncu 1 skoruna bakacağız ve üç puan aldığımızı ve
beş sayı ile karşılaştırdığımızı görebilirsiniz.
Yani oyuncu 1 puanı üç kazanan puanı beş puandır.
Ama en kısa sürede bunu değiştirmek için 7 olacağını diyelim ve şimdi tıklatın.
Oyuncu 1, dördüncü olan oyuncu 1 puanı ile yedi puanı kazanan puanı
karşılaştırıyoruz.
Beş ile başlasam, tekrar yenileyelim.
İşe yarıyor.
Ama bunu değiştirirsem ve şimdi sayı ve dize ile kıyaslarsak, işte bu işe yaramaz
çünkü burada üçlü eşitlik yapıyoruz.
Böylece çift eşitlik yapabilirdik, ancak bunu hayran olmadığımı biliyorsun.
Bunun yerine onun yerine ne yapacağız buraya gidip bunu alıp bu değeri koyup bir
dizede çeviriyoruz.
sayı gibi ve daha sonra içeri girip değer koyarak bir dize haline getirip skoru kazanacak şekilde ayarlayacak.
Yani sayı o sermaye ve
Bu yüzden biz taze idi.
Artık bu işe yarıyor.
Beş yaşındayız, ancak oyumuza değiştirmek için de 2'de biter.
Üzerinde odaklanmamız gereken küçük bir konu var, oysa beşe
başlayıp başladık.
Ve ben karar verirsem, bununla birlikte en yüksek puanı kazanan puanı değiştirmek istiyorum.
iyi idare edemiyor, çünkü bunu değiştirirsek yalnızca üç oyun oynuyoruz.
Kodumuz şu anda bunu
Bunu ele almanın iki farklı yolu var.
Birincisi skoru sıfırlıyor ve her şeyi sıfıra geri getiriyor.
Ve diğeri beşe kadar oynamaya devam ediyor.
Ancak gerçekte olan şey, üçümüzde oynuyor olduğumuz ama zaten üçümüzü geçtiğimiz.
Zaten geçtiğimiz için kodumuz artık işe yaramıyor, çünkü yalan söylüyoruz,
sadece kazanan puana eşit puanı kontrol ediyor.
Kazanan puandan daha büyük olup olmadığını kontrol etmek değil.
Bunu değiştirebilirsek öyleyse.
Bu, kazanan puandan daha büyük olup olmadığını söylüyor, o zaman oyun sona eriyor ve bu iyi.
Ancak bence en iyi skoru değiştirirsek sıfıra sıfırlamak daha iyi bir çözümdür; çünkü oyundaki maksimum puanı asla yarı
yarıya değiştirmedik, oysa oyuna başlamak istiyoruz ve bunu yapmamızı
isteyen başka bir sebeple kısa bir refactor için iyi bir kullanım örneğidir.
Bu yüzden puanı değiştirdiğimizde kazanan puanı burada bulabilirsiniz.
Burada oynamakta olduğumuz mantıkla aynı oyunu yeniden başlatmak istiyoruz.
Bunu yapmak için çok basit bir şekilde bu kodu kopyalayacağız ve sıfırlama adında yeni bir işlev yapacağız.
Yani fonksiyon sıfırlama sadece tüm bu kodları oraya koydu ve sonra sayı
girişi değiştiğinde resetlemeye devam edeceğiz.
Yani burada beşe oynarken sıfırlamam gerektiğini göreceksin.
Bu işe yarıyor.
Beş yaşındayız.
Sıfırla'yı tıklıyorum ve bu olay dinleyicisinin içindeki sıfırlama işlevini aramadık, bu nedenle sıfırlama
işlev çağrımızı eklemeliyiz.
Ve şimdi biz yenersek 5'e varacağız.
Sıfırlamayı tıklarım.
Her şey yolunda.
Ve şimdi eğer bir oyun ortasındaysa ve puanı değiştirirsem de bizi sıfırlar ve şimdi 1'e oynarız.
Ve çalışıyor.
Veya değiştirirsem.
Bu yüzden şimdi 7'ye oynuyoruz.
Bizi sıfıra geri getirir.
Bu yüzden eğer karar verirsem bunun aslında 2'ye giden bir oyundur, aksine spec'i sıfıra değiştirir.
Ve bunu nasıl başa çıkacağımız konusunda endişelenmene gerek yok.
Eğer yarı yolda gidersek.
Bu nedenle, yaptığımız, yalnızca burada sıfırlamak, kodu burada kurmaktan ziyade ayrı bir
işleve sahip olmak ve burada tekrarlamak değil.
Bu yüzden şimdilik bu kadar.
Yapmamız gereken tek şey bu.
Bazılarınız bu kodun gerçekten bunu yapmanın en iyi yolu olup olmadığını merak ediyor olabilir.
Cevap hayır.
Ve yakından bakarsanız, son derece benzer olduğunu göreceksiniz.
Temelde aynı, ancak burada bir tane ve P2 burada yapıyoruz.
Ama diğer tüm kelimeler aynıdır.
Dolayısıyla bunu biraz daha iyi hale getirecek daha gelişmiş yollar getiriyor.
Ancak burada yapmayacağım çünkü üzerinde odaklanmak istediğim tek şey, javascript etkinlik dinleyicileri seçicilerinin egemen
ilişkileri ve interaktif HD IMO'yu nasıl alabileceğimi kavramak ve odaklanmak istediğim şey bu.
Ancak şunu biliyoruz ki, bu gibi kodu biraz daha kısa süre daha iyi hale getirecek
yollar görüyor olacağız.
Burada yapabileceğimiz bir şey var ve olay dinleyicisine koyduk.
Burada uyuşturucu girdisinin yerini bu küçük bir değişiklik sözcüğüyle değiştirebiliriz ancak bunu yapabilir ve
kodu biraz kısaltabiliriz.
Bu yüzden eğer bunu değiştirirsek üçümüzde oynuyoruz.
Her şey hala aynı şekilde çalışıyor.
Ben sadece, bu olay, ne sayı girişi olduğunu dinliyordum anlamına gelen this anahtar kelimesini kullandım.
Pekala, bu ders için yeter.
daha önemli bir şey inşa edeceğiz ve söz veriyorum burada olacağından daha iyi görünecektir.
Bir sonraki projede de belirttiğim gibi