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.
Ç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.
var stickLeft = document.getElementById('stickLeft');
var stickRight = document.getElementById('stickRight');
stickLeft.style.top = window.innerHeight/2 + 'px';
stickRight.style.top = window.innerHeight/2 + 'px' ;
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.
document.onkeydown = function(e){
console.log(e);
}
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.
document.onkeydown = function(e){
switch(e.keyCode){
// sol çubuk
case 87:
console.log('w tusuna basildi');
break;
case 83:
console.log('s tusuna basildi');
// sağ çubuk
case 38:
console.log('yukarı ok tuşuna basıldı');
break;
case 40:
console.log('aşağı ok tuşuna basıldı');
break;}
}
Kodu çalıştırınca oyuncuların w, s, arrow-up, arrow-down tuşlarından hangisine bastıklarını 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:
function pxAdd(numb){
return numb + 'px';
}
document.onkeydown = function(e){
switch(e.keyCode){
// sol çubuk
case 87:
stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) - 30);
break;
case 83:
stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) + 30);
// sağ çubuk
case 38:
stickRight.style.top = pxAdd(parseInt(stickRight.style.top) - 30)
break;
case 40:
stickRight.style.top = pxAdd(parseInt(stickRight.style.top) + 30);
break;}
}
Ç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.
switch(e.keyCode){
// sol çubuk
case 87:
if(parseInt(stickLeft.style.top) <= 0){
stickLeft.style.top = stickLeft.style.top;
}else{
stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) - 30);
}
break;
case 83:
if(parseInt(stickLeft.style.top) + 85 >= window.innerHeight){
stickLeft.style.top = stickLeft.style.top;
}else{
stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) + 30);
}
break;
case 38:
if(parseInt(stickRight.style.top) <= 0){
stickRight.style.top = stickRight.style.top;
}else{
stickRight.style.top = pxAdd(parseInt(stickRight.style.top) - 30);
}
break;
case 40:
if(parseInt(stickRight.style.top) + 85 >= window.innerHeight){
stickRight.style.top = stickRight.style.top;
}else{
stickRight.style.top = pxAdd(parseInt(stickRight.style.top) + 30);
}
break;
default:
}
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…