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