Javascript İle Oyun Yapımı: Nesnelerin Kontrolü — Çubuk
HTML ve CSS kullanarak oyun alanımızı oluşturduk. Ancak henüz çok eksiğimiz var. Oyunumuza dinamik bir yapı kazandırmak için Javascript kullanacağız. main.js dosyamızı açarak işlemlerimize başlayalım.
Yazı sonunda kodların toplu halini bulabilirsiniz.
Çubukların Kontrolü
İlk olarak çubuklarımızı w, s, arrow-up, arrow-down tuşlarını kullanarak aşağı ve yukarı hareketlerini sağlayalım.
DOM üzerinden kontrol sağlamak için stickLeft ve stickRight değişkenlerini oluşturduk. Çubukların konumlarını oyun alanımızın uzunluğunda merkeze getirdik. Oyuncuların tuşlara bastıklarında işlem gerçekleştirmesini sağlamak için onkeydown methodundan yararlanacağız.
Klayvemizde tıkladığımız her tuş bir kod üretir. onkeydown ile üretilen bu kodları dinleyebiliriz. Üretilen kodumuz ‘w’ tuşunun kodu ile eşitse sol çubuğu yukarı, ‘s’ tuşunun koduna eşit ise sol çubuğumuzu aşağı doğru hareket ettireceğiz. Peki ‘w’ tuşunun sahip olduğu keycode nasıl bileceğiz ? Bununu öğrenmek için birden fazla yolumuz var. Birincisi yukarıdaki kodu doğrudan çalıştırmak. Tıkladığınız her tuşun sahip olduğu keycode konsola yazdıracaktır.
Bir diğer yol, internet. Aramalar yaparak ulaşabilir veya hemen şu siteyi inceleyebilirsiniz: https://keycode.info/ , devam…
Kullanıcıların bastığı tuşları dinleyebiliyor ve basılan tuşların keycode bilgilerini biliyorsak, karar yapımızı oluşturmak için hiçbir engel kalmıyor.
Kodu çalıştırdığımızda oyuncuların w, s, arrow-up, arrow-down tuşlarından hangisine bastıklarını koonsol üzerinde görebiliriz.Bu şekilde çubuklarımızı istediğimiz doğrultuda hareket ettirebileceğiz. Ama öncesinde değinmek istediğim bir nokta var.
stickLeft.style.top += 10;gibi bir kod parçasını çalıştırdığımızda stickLeft seçicisinin sürekli +10 alarak artmadığını görürüz. Çünkü “stickLeft.style.top” değeri “250px” gibi bir değere sahiptir. stickLeft.style.top değeri integer olmadığı için yaptığımız arttırma işlemini uygulamayacaktır. Bu durumu değiştirmek için pxAdd() adında bir fonksiyon tanımlayacağız:
Bu fonksiyon parametre olarak girilen değere ‘px’ ekleyerek geri döndürecektir. Fonksiyonumuzu kullanarak tuşlara basıldığında çubukları yukarı-aşağı doğrultularında hareket ettirelim.
Çubuklar istediğimiz gibi hareketini gerçekleştirmeye başladı taa kii tarayıcımızın kapsadığı alanların dışına çıkana kadar…
Çubukların alan dışarısına çıkmasını engellemek için bir karar yapısı oluşturmamız gerekiyor. Yapıda çubukların bulunduğu konum 0'a eşit veya küçük ise bulunduğu konumda kalmasını daha fazla yukarı çıkmasını önlemeliyiz. Aşağı doğru hareketi nasıl engelleyebileceğimizi düşünün.
Artık çubuklarımızı yukarıdan veya aşağıdan taşma olmadan hareket ettirebiliriz. Bir sonraki yazıda top hareketini kontrol ettireceğiz. Görüşmek üzere…
