Bu örnekte ZTYPE klonu bir oyun yapacağız. Yukarıda kod yazım videosunu izleyebilirisiniz, kodların bulunduğu github sayfasına is buradan.
Her zamanki gibi index.html dosyamızla başlıyoruz. ws-wrapper sınıflı bir element oluşturup diğer bütün elementlerimizi bunun içine yerleştiriyoruz. hero sınıflı bir element ekranın merkezinde olacak ve kelimeler bu merkeze yaklaşmadan yazarak yok etmeye çalışacağız. score ID’li bir element de skorumuzu tutacak. CSS tarafında açıklama gerektiren bir kural yok.
Javascript için ws.js dosyamız ana dosyamız olacak. Burada modülleri ve import/export özelliklerini kullanacağız. ws.js dosyamız iki modül import ediyor biri kelimeleri oluştururken kullanacağımız bir Word sınıfı için diğeri de yardımcı fonksiyonları barındıran helper modülümüz.
ws.js dosyamızda oyuna ait genel değişkenleri oluşturuyoruz. maxWordCount değişkeni aynı anda kaç kelimenin ekranda olacağını belirliyor. wordList ise kelime veritabanı rollü alıyor. Oyun mantığı gereği bir kelimenin ilk harfini tuşlarsak diğer kelimelere saldıramıyoruz, bu kelimeyi yazmaya devam etmemiz gerekiyor. Bunun için activeWordIndex değişkeni ile hangi kelimeye saldırdığımızı kayıtlı tutuyoruz. Bir döngü ile bütün kelimeleri oluşturuyoruz ve onDie, onHit olayları için gerekli fonksiyonları bağlıyoruz. keyup olayına heroAttack fonksiyonunu bağlıyoruz. heroAttack fonksiyonunda basılan kelimeyi alıp activeWordIndex değişkenin durumuna göre bir eşleşme olup olmadığını kontrol ediyoruz.
Bir cevap yazın